How to add Facebook – Twitter – Google+ social icons to MySource Matrix

The following code can be used to dynamically create Facebook, Twitter and Google+ social icons in the MySource Matrix content management system.

The code can be added to your template or added to a page (as raw HTML) and then added in as a nested page when needed.

The code outputs this:

<!-- Google Plus Javascript -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<!-- CSS -->
 <style type="text/css">
.social-links { float: right; margin-right: -30px; }
.fb { float: left; margin-right : 10px; }
.googplus { float: left; }
.googplus > div { display: inline !important;}
.tweet { float: left; width: 95px; }
div[id*="content"] {clear: both;}
</style>
<div class="social-links">
 <div class="fb">
 <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
 <script type="text/javascript">
 document.write('<fb:like layout="button_count" show_faces="false" width="100"></fb:like>')
 </script></div>
 <div class="tweet">
 <a title="Tweet this page" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="googplus">
 <g:plusone size="medium"></g:plusone></div>
 </div>