Nov 5, 2012

How To Show Social Media Sharing Button?

Actually, Blogger has default social media sharing feature, but it doesn't show sharing count. Sharing count help us as author, knowing about popular post or reader preferences.

Another way to show social media sharing button is using horizontal social button. I like this social button because not too large to put on my post. Usefull and simple enough.

How to put horizontal social button on blog?


  • Go to Template, then click Edit HTML. 
  • Tick mark Expand Widget Template, then find (ctrl+f) 

<div class='post-header-line-1'> if you want to put it above post, or
<div class='post-footer-line post-footer-line-1'> if you want to put it under post

  • Paste these code below that code on second step


<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- 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>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</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>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<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>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

  • Click Save button

10 comments:

  1. I don't have either of this:
    div class='post-header-line-1'
    div class='post-footer-line post-footer-line-1'

    what should I do?

    ReplyDelete
  2. what if i want to add facebook share widget ?
    please give facebook share script .
    thank you .

    ReplyDelete
  3. When I click on the pinterest button, the image doesn't show? any idea what to do? I have been trying to find a solution for this for a long time...Pinterest doesnt work with blogger :( Thanks for you help in advance!

    ReplyDelete
  4. Hi! I tried both above and under the post, but does not work... what can I do? Thank you in advance

    ReplyDelete
  5. Done! There are successful with this http://www.bloggersentral.com/2012/01/aligning-google-1-twitter-and-facebook.html, sorry if I disturbed.

    ReplyDelete
  6. what if i want to add Comment facebook share widget Baju Pesta
    please give tutorial comment facebook share script thank you .

    ReplyDelete
  7. how to add tumblr share on this code. can you help me pls.

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008