Add Social Media Sharing Buttons Widget to Blogger

Like Tweet Pin it Share Share Email
Social media is a very popular marketing tool now a days, by sharing blog content with facebook, twitter, Google+ friends and fans can bring tons of free traffic towards your blog. And thus, we need to add some social sharing buttons to our blogger blogs for giving visitors the chance to share our content with their friends & circles.  In blogger, there is a sharing widget you can see after each post in default templates. But for more attraction you can add extra sharing widget below or above every blog post. Therefore, Today, I’m sharing a social media widget which you can add to your blog and it will be appearing below every post or below every post title. All major social media networks buttons are included in this widget.

How to Add This widget to Blog?

here are few simple steps by using which you can add this widget to your blog easily.

  • Log-in to your blogger dashboard
  • Select the blog you want to add the widget into
  • Go to Template >> Edit HTML >> Jump Break >> Blog1
  • Now find this line <data:post.body/> by using CTRL+F key
Now if you want to add the social buttons below each post title then paste below code right before/above this <data:post.body/> but if you want to add this widget below every post then just paste it below/after this <data:post.body/>

<b:if cond=’data:blog.pageType == “item”‘>
<table border=’0′>
<td><div style=’margin-right:5px;’>
<g:plusone expr:href=’data:post.url’ size=’medium’/>
<td><div style=’padding-top:6px;’>
<script type=’text/javascript’>
tweetmeme_style = &quot;compact&quot;;
<script src=’//tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/>
<td><div style=’margin-right:25px;’>
<script expr:src=’&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url’/></div>
<td><div style=’margin-right:25px;’>
<div id=’fb-root’/><script src=’//connect.facebook.net/en_US/all.js#xfbml=1’/><fb:like font=” href=” layout=’button_count’ send=’true’ show_faces=’false’ width=’40px’/>
<!– AddThis Button BEGIN –>
<div class=”addthis_toolbox addthis_default_style “>
<a class=”addthis_counter addthis_pill_style”></a>
<script type=”text/javascript” src=”//s7.addthis.com/js/250/addthis_widget.js”></script>
<!– AddThis Button END –>

Now save your template and you’ve added the social media sharing widget to your blog.

6. Now search for this tag </head> and just before/above it paste below code:

<script src=’//apis.google.com/js/plusone.js’ type=’text/javascript’> {lang: &#39;en-US&#39;} </script>

Save your template and now view your blog. You will see social media buttons appearing on your blog posts.

Note: Social sharing buttons will only appear when a single post is clicked, on blog’s main page it won’t appear.

Enjoy the new simple style of social sharing buttons and do ask questions and queries about it in comment section. Also share this with everyone. Stay Blessed.

Comments (5)

Speak Your Mind