Blogger: inserting social media buttons selectively

Blogger already provides a way to include social media buttons on its pages but not selectively. We want that our social buttons appear only on posts and not on the homepage. Fortunately, Blogger also provides a series of tags (all starting with b) to perform some specific tasks within a template. Let's see how we can accomplish this task.

From Template, select Edit HTML and put the following conditional expression where you want the social buttons appear:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

  <!-- social buttons code here -->

</b:if>

The above instruction checks whether the current URL is different from your homepage's URL. Then you can include your social buttons code within that conditional block, as follows:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

    <div class='share'>
<span class='twitter'>
<a class='twitter-share-button' data-lang='en' data-via='username' href='https://twitter.com/share'>Tweet</a>
<script>!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>
</span>
<span class='google-plus'>
<g:plusone annotation='inline' size='small' width='120'/>
<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>
</span>
</div>

</b:if>

Easy enough, isn't it?

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “Blogger: inserting social media buttons selectively”

Leave a Reply

Note: Only a member of this blog may post a comment.