Facebook Twitter Google Plus Buttons in line on WordPress

You might have seen Facebook Twitter Google Plus Buttons together side by side in a single row on lot of websites.This helps in creating a social networking section within the website.Visitors do not have to search everywhere for the icons.Placing the icons in single line side by side also helps in user experience.This increases chance of those buttons getting hit.

To place these buttons side by side in the sidebar on WordPress website the simplest way is to use WordPress Text Widget.Follow below steps to place Facebook Twitter Google Plus Buttons side by side on WordPress

  • Find the width of your sidebar (you can find this detail in style.css file of your theme,log into to wordpress installation and find if there is anything mentioned under Appearance tab)
  • if you are able to find the width then fine else you can assume the width to be 200. Most themes have this width and below discussion will use this width.
  • Go to Facebook site and get the facebook like button code (for details you can check Add Facebook like button to WordPress).Make sure that your facebook button width is less than 50 (30 is good option) and counts are displayed vertically on top (must)
  • Go to Twitter site and get the Twitter tweet button code (for details you can check Add Twitter tweet button to WordPress).Make sure that you twitter tweet button has vertical count setting.This makes the width of twitter button less compared to the horizontal setting
  • Go to Google plus button site and get the Google plus button code (for details you can check Add Twitter tweet button to WordPress).Make sure that you Google plus button has size as Tall and Annotation as Bubble.
  • Copy all the three codes in WordPress text widget and place the wordpress text widget on sidebar where you want to place the buttons.
  • Look below to look at the final code.You can also copy the code below instead of following the procedure above and replace http://udinra.com with your URL.
  • Browse the website and enjoy.
  • The best thing about above procedure is performance.You can also tune it more using file to place all the code.Using plugin for this purpose introduces unnecessary piece of code making wordpress website slower.
<!-- Facebook Like button code start -->
<div id="fb-root"></div>
<script>(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_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://udinra.com" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="arial"></div>
<!-- Facebook Like button code end -->

<!-- Google plus button code start -->
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="http://udinra.com"></g:plusone>
<!-- Place this render call where appropriate -->
<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>
<!-- Google plus button code end -->

<!-- Twitter tweet button code start -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Udinra">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<!-- Twitter tweet button code end -->

If you need any help or have trouble placing this buttons comment me.

Leave a Comment