How to Add Social Media Buttons to Blogger Comments

Learn how to add social media sharing buttons with the default Blogger comments for increasing the social media presence of your Blogger Blog.

You want to maximize your blog’s social presence and allowing blog comments to be shared in the social media is one way to do so. If you are using Blogger platform then the easy solution for this will be using a 3rd party comment system like Disqus, LiveFyre or IntenseDebate. You can also switch to Facebook or Google+ to increase engagement through those social media.

But most Blogger users don’t switch to 3rd party comment systems because it is difficult to install these 3rd party comments and more exhausting work is importing existing comments to them. Also they are not so search engine friendly.

As we know the default Blogger comments system do not have social media sharing buttons but that doesn’t mean that you can’t add one to the comments. Adding social media button to the default Blogger comment box will help to increase the presence of your blog posts in social media. Also help you to build a more loyal and dedicated readership for your blog.

This post will explain you;

• The most important code required to generate the comment links or URLs for social share.
• Make social media buttons suitable for comment sharing. Using the default Facebook like, Tweet and +1 buttons for Blogger comments sharing. Also use custom made ones.
• Most importantly, how to add these social media buttons to the default Blogger comments properly.

So let’s get started.

Adding Social Media Buttons for Sharing Blogger Comments

For this follow the instructions below;

1. 1. Go to Blogger Dashboard > Template > Backup your blog’s template > Click “Edit HTML”.
   2. Template editor will open; look for <b:includable id='comments' var='post'> (hit keyboard shortcut Ctrl+F).
   3. Inside it you will find <b:loop values='data:post.comments' var='comment'>. We have to paste codes for the buttons in between the <b:loop values='data:post.comments' var='comment'>.
   4. Let’s say you want to show the buttons before the comment body or text. For this look for something like <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> on unmodified Blogger comments. If you are using a template that modified the blogger comments try to look the code for comment body (hint: <div class='comment_body'> or <data:comment.body/>.
   5. Let’s paste the code for social media buttons just before it.As you see data:comment.url is the section which generates the URL for each comments.For design purpose and matching it with the template; you can add the social buttons anywhere in between <b:loop values='data:post.comments' var='comment
   6. You are almost done, just need to add the CSS and JavaScript codes of the social buttons if required. For that;
      1. Search for ]]></b:skin> and paste the CSS code above it.
      2. Find </body> and paste the JavaScript code in the Template just before it, if required.
   7. Save your work by clicking “Save Template”.

This is all you need to do to add social media buttons to default Blogger comment box.

You should know that this tip;

• Will not work with the default blogger threaded comments, as
• However; if you are using a modified or customized Blogger threaded comments then this tip will work. Many blogger templates now use modified Blogger comment codes.
• You can use it for the full page single columns comments in Blogger also.

For getting the full benefit of social sharing; your Blogger template should have Open graph tag, sehema.org, twitter cards and common meta tags must be present in the template.

We already tried Google +1 button; now let’s also try to add Facebook like, Twitter tweet button. Also a custom made sharing buttons is given which works without any JavaScripts. The required CSS, HTML and JavaScript codes are given below and make sure you paste them in the template following the above instructions correctly.

Facebook like, Twitter Tweet and Google+1 button for Blogger Comments.

The HTML code for Facebook like, twitter tweet and Google+1 button which must be paste in between <b:loop values='data:post.comments' var='comment'>.

<!-- Blogger Comment Share Buttons By TechInfoKnow.com -->
<div class='cmnt_social'>
<!-- FBlike -->
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' expr:href='data:comment.url'/>
<!-- Tweet -->
<a class='twitter-share-button' data-count='horizontal' data-via='techinfoknow' expr:data-text="&quot;Comment on &quot;+data:post.title" expr:data-url='data:comment.url' href='https://twitter.com/share'>Tweet</a>
</div>

In the above code;

• For Facebook like button; the expr:href='data:comment.url' is used for getting the URL. You can edit the rest of the button code as you want.
• For Google plus button expr:data-href='data:comment.url' is used for getting the URL. Edit the code as you want.
• Look for expr:data-text=""Comment on "+data:post.title" in the tweet button code. Here expr:data-text is used to set the message the tweet will generate and +data:post.title adds the title of the post in the tweet. You can change it to customize the tweet the button it will generate. For example,
  • Use expr:data-text=""Epic comment of mine "+data:post.title" with expr:data-text="data:post.title".
  • Or simple remove any prior text and replace it will expr:data-text="data:post.title".
• You can customize the buttons following the the settings given by Facebook and Twitter.You can customize these codes as you want. To use these buttons you will need to add the JavaScripts for them.

If you are already using these JavaScripts in you blog then you do not need to add them again. Here are the JavaScript codes for these social media buttons. Best place for adding is just before closing the body tag (</body>) of the template.

<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Twitter -->
<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

Using a Custom Made Social Sharing Button for Blogger Comments Sharing.

The following custom made buttons are the best option because they are easy to implement and works without any JavaScript. Use it inside paste in between <b:loop values='data:post.comments' var='comment'>.

<!-- Blogger Comment Share Buttons By TechInfoKnow.com -->
<ul class='cmt-share'>
<li>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:comment.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow'><img src='http://1.bp.blogspot.com/-AbDAXVhelu0/VHiY9u_ke3I/AAAAAAAABQ0/a9ddngx0YcA/s1600/FB.png'/>Share</a>
</li>
<li>
<a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;...&amp;url=&quot; + data:comment.url' rel='nofollow' target='_blank'>
<img src='http://4.bp.blogspot.com/-YvwVmYrLSj8/VHiY9hqEn6I/AAAAAAAABQs/A0ohqTcLsFw/s1600/TT.png'/>Tweet</a>
</li>
</ul>

You can remove the “Share”, “Tweet” and “+1” text from the above code if you only want to show the logo. The CSS code for it. Paste it inside b:skin or in a new existing style tag.

/* Blogger Comment Sharing by TechInfoKnow.com */
.cmt-share{list-style: none;}
.cmt-share li > a, .cmt-share li > a:link, .cmt-share li > a:visited,  .cmt-share li > a:hover{color: #171717;text-decoration: none;}
.cmt-share li{ display: inline; margin-right: 3px;}
.cmt-share li:hover > a > img {opacity: .7;}
.cmt-share li > a > img { display: inline-block; margin-bottom: -3px; margin-right: 1px; padding: 1px;}

You can use your customized buttons too.

This are only given as a example and you can use you own social sharing buttons if you want. As you see the main element is the comment URL which is accessed by data:comment.url. By placing it properly you can use any 3rd party buttons, or any other customized buttons.

Bonus Tip

This may be the most important tip of the post. Now you may not be fond of allowing your blog’s comment URLs to be shared but want to add social sharing buttons like the 3rd party comment system. In that case; just change data:comment.url to data:blog.canonicalUrl from the social media buttons. This means the post’s URL will be shared from the Blogger comment sharing buttons.

Adding social media sharing buttons to the default Blogger comments system will be tricky as every Blogger users have different template style.