Horizontal Social share buttons below Blog Post Title

Horizontal Social share buttons below Blog Post Title

social bookmark widget

Social sharing widget is generally for sharing the content in various social sharing site. Generally we add this kinds of social sharing widget end of the blog post. But we can also add this sharing widget below every blog post title. I think this is the more useful for getting your post shared  by your readers. This widget is very simple but strong. I have used 3 major social sharing icons, such as Facebook share and send, Google Plus and Twitter. I hope this widget would help you to increase your content sharing by your current readers. Though you can use Addthis widget but Addthis widget is hosted on other server so it may take time to load. So this widget will be completely install in your blogger template. So it is very fast to load. I have simplified the installing system thus you can easily add this widget in to your blog. Hope you would like it. Please follow the instruction from below to get this widget.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code <data:post.body/> by pressing  Ctrl + F 

Step 4 Paste the below code  Before/above <data:post.body/>

Note: You would get  code 3 or 4 times in your blogger template try with one by one until visible the widget.

<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons'>
<!-- Facebook Like+Send www.bloggerspice.com-->
<div style='float:left;margin-right:10px;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
<!-- Google +1 -->
<div style='float:left;margin-right:-15px'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
<!-- Twitter www.bloggerspice.com -->
<div style='float:left;margin-right:-15px;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>jQuery.noConflict();(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;));
<!-- Twitter -->
<script>jQuery.noConflict();!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>
<!-- Google Plus One www.bloggerspice.com -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<!-- Scripts End -->

Step 5 Now hit the save button.

That's it. You have done. Now check any post to see the widget.  

Post a Comment

Sorry, i want share button like of you. Please share for me

Hi Akat..I have already shared my social sharing widget. To get this please visit the below link---


Thanks very much!

Thanks for dropping your comment.

help me why my adsense can't display on my home page.. http://jahazilatown.blogspot.com

Hi Salama your site containing adult contain which is against Google AdSense policy. Without removing adult content you won't get approval from Google AdSense. On the other hand you didn't add any Privacy Policy, Terms of Use or Disclaimer...

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *