The Right Way to Add Social Media buttons in your Blog

This article will tell you the right way to add social media buttons in your blog. Social networks such as Facebook, Google+, Twitter, etc. all give a wide range of social media buttons for webmasters.

What is the need for Social Media Buttons?

As you know social media buttons are really becoming important nowadays for bloggers to distribute their content via social channels. Readers of the blog post view the content, if the article helped them, they take the extra step sharing them.

This is how articles spread around Facebook and Twitter like wildfire, and in turn help you to gain traffic to your site.

Now you know why majority of bloggers choose to include buttons of all the major social networks into their blog posts. Here lies the main problem, i.e. inserting code into the blog posts.

How do typical bloggers add social buttons code?

Novice bloggers go to the concerned social networking site such as Facebook and then copy paste the code directly into a widget or a template.

Mainstream bloggers use plugins or third party apps which have all in one functionality for displaying buttons of all the major social networking sites.

Code enthusiasts take all the social media button codes and bundle them into just one long code and tweak it a little bit, so that it loads asynchronously (without blocking) in an efficient manner.

Loading Social Media buttons asynchronously

This is how every Blogger should practice adding social media button codes into their website. Just drop this script into your (footer.php), just before the ending body tag.

<div id="fb-root"></div>
<script type='text/javascript'>
// Load Google Analytics gaq
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);
// Load Facebook Init Code
window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxx', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
  };
(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www')   '.google-analytics.com/ga.js', 'ga');
    // Google  button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));
</script>

Make sure to include your Google Analytics tracking code and Facebook App ID in the script above. If you would like to include more social buttons in the future just add the function and the required javascript url, that’s it.

This script makes sure all your buttons load in a non-blocking fashion, i.e. they will not affect the page rendering process. In short after everything in your theme has been loaded, only then these buttons gets processed.

How to display social media buttons

After you have inserted the script above, displaying the button is as easy as copying the button code and calling it wherever you want.

For example, just copy paste this Facebook like button code where you want to show it:

<fb:like send="false" width="450" show_faces="false"></fb:like>

Isn’t it easy? Now you just have to paste one simple line. Also you can prevent unnecessary calling of the same function repeatedly.

Hope this post has helped you. If you have any further ideas to improve this code or would like to share on of your own techniques of adding social buttons, please let us know by a comment!

Thanks for the code Nicolas!

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.