“Do You Like This Story” Sharing Box Widget

Social networkingis a strong way to share your stories with the world with just a single click. Social media has given the webmasters an opportunity to add their official buttons or boxes in their blog or websites through which the readers or visitors share the stories with their friends and online community after reading it on certain blog or website. You might have seen different social media buttons, boxes which are in different shapes and also different in appearance. Today in this tutorial we are going to share with you a sharing widget i.e. “DO YOU LIKE THIS STORY” box, which you can easily add within your Blogger Blog and facilitate your readers to like or share your content without leaving your blog or website.

DEMO

Benefits Of Using This Sharing Box Widget:

The benefit of using this sharing box widget under the BLOG POST TITLES is that area always catches the attention of the visitors and readers and there are a lot of chances that your story must share and circulate more than normal on social media. It’s the most important place in whole article body. So it’s better to place this SHARING BOX under the POST TITLE other than any place in your blog post.

How To Add “Do You Like This Story” Sharing Box Widget” In Blogger?

Let’s learn how to add this “Sharing Box Widget” in Blogger blog, follow the steps below:

1. Log in to Blogger Dashboard.

2. Go to Template > Backup.(Click Here To See How)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for <data:post.body/>tag.

Note:- You will find the above tag at 2 places.

5. Now copy and paste the following code just above the  <data:post.body/> tag, where you find this tag i.e. at 2 places.

<b:if cond='data:blog.pageType == "item"'>
<div style=" height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;">
<p style="color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;">Do You Like This Story?</p>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false"></fb:like>
<a class='twitter-follow-button'  href='http://twitter.com/mytutorialscafe' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

6. Click “SAVE TEMPLATE”.

That’s all set, visit any of your blog posts to see the“Sharing Box” hanging just perfectly under the blog posts title.

Note:-

1. Change “mytutorialscafe” to your own Twitter Username.

2. You can change the text "Do You Like The Story", to your own text.

3. The above code is written between the Conditional Tags, highlighted in Green color above. Which means that the “Sharing Box” will appear only at Blog Posts, not on the homepage of your blog. If you want to show “Sharing Box” on your blog homepage as well, then remove the above “Conditional Tags”.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)