Welcome, Guest
Username: Password: Remember me
Got a Joomla problem? Post as much detail about it as you can here to see if you can get a solution.

Help others in the community - post your Joomla tips and how-tos here.

TOPIC: Adding the big four Social Media buttons to your Joomla website

Adding the big four Social Media buttons to your Joomla website 4 years 5 months ago #6705

  • neilforrester
  • neilforrester's Avatar
  • Offline
  • Senior Boarder
  • Posts: 72
  • Thank you received: 13
Adding the big four social media buttons to your Joomla website

If you would like to add the four main social media buttons to your site this tutorial will show you how the easy way. You can always play around with formatting the button code later on.

If you want to see a quick example of how it looks see my site here:

We're going to add Facebook, LinkedIn, Google+ and Twitter
Copy the following code into a new HTML module adn publish where you would like the buttons to appear.
Note: View the module in code mode and save it in code mode too. Sometimes a WYSIWYG editor will strip out Javascript etc.
<div class="social">
<div class="fb-like" data-send="true" data-layout="button_count" data-width="220" data-show-faces="false" data-colorscheme="dark"></div>

<div class="social">
<s-cript src="//platform.linkedin.com/in.js" type="text/j-avascript"></script>
<s-cript type="IN/Share" data-counter="right"></script>

<!-- Place this tag where you want the +1 button to render. -->
<div class="social">
<div class="g-plusone"></div>

<!-- Place this tag after the last +1 button tag. -->
<s-cript type="text/j-avascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/j-avascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

<div class="social tweet">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out the Pixelfire website">Tweet</a>
<s-cript>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

CSS Styling
Next add this bit of code to your CSS stylesheet. Each piece of code has been wrapped in a div with a class called 'social' so we can target the div and tweak the spacing a bit.
The Twitter 'div' also has an addition class called 'tweet' to correct a spacing issue.
/*#### SOCIAL MEDIA ####*/
div.social {
    display: inline;
    float: left;
    height: 20px;
    margin-right: 20px;
    padding: 0;


Finally, to ensure the Facebook button works correctly add the following code directly after the <body>tag in your templates index.php file.
<div id="fb-root"></div>
<s-cript>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

That's all I have done for my site and it works fine. I hope this is useful for someone :)

Neil Forrester
Last Edit: 4 years 5 months ago by neilforrester.
The administrator has disabled public write access.

Adding the big four Social Media buttons to your Joomla website 1 year 3 months ago #7741

  • Shane Thorpe
  • Shane Thorpe's Avatar
  • Offline
  • Expert Boarder
  • Posts: 113
  • Thank you received: 10
Hey Neil,

Thanks for this. Client wanted the actual code on his site and not anything 3rd party - go figger eh!

Anyway works fine for him

Moderator for MJUG forum.
The administrator has disabled public write access.
Time to create page: 0.040 seconds
Powered by Kunena Forum