Monday, May 21, 2012

How To Make Facebook and Twitter Share Button in Blogger

Making share on facebook, twitter, digg button, or maybe coupled with Google + above each post / article blog by adding code or scripts on your template. Share button in your blog can actually get the code directly on the site that provide this code. The site, such as examples of sites that provide the code for sharethis.com in pairs on your blog with a full share feature. However, the less attractive is placing less strategic.

1. Login to your blogger account.
2. Click the Design tab -> Edit HTML.
3. Download the template used in case of errors can be returned to normal.
4. Press Ctrl + F to facilitate the search.
5. Search <div class='post-body entry-content'> or class = 'post-body entry-content' 
     and usually there are 2 code, use the first code
6. If you have found, copy the code below and paste it right above 
    <div class='post-body entry-content'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'><div style='float:left;padding-left:0px;font:normal 12px Georgia;'>Share on :</div><div style='float:left;padding-left:10px;'><a name='fb_share' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script></div><div style='float:left;padding-left:10px;'><a class='DiggThisButton DiggCompact'/><script type='text/javascript'>(function() {var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];s.type = &#39;text/javascript&#39;;s.async = true;s.src = &#39;http://widgets.digg.com/buttons.js&#39;;s1.parentNode.insertBefore(s, s1);})();</script></div><div style='float:left;padding-left:10px;'><a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div style='float:left;padding-left:10px;'><!-- Place this tag where you want the +1 button to render --><g:plusone size="medium"></g:plusone><!-- Place this render call where appropriate --><script type="text/javascript">  (function() {    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;    po.src = 'https://apis.google.com/js/plusone.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  })();</script></div></div></b:if>
Look at the picture below :
7. Click Save Template
That How To Make Share Facebook, Twitter, Google and Digg + On Blogspot, please leave your comment,  good luck! 

Posted by: Denmas Tugino
Godheg Updated at: Monday, May 21, 2012

1 komentar:

  1. This is very useful tutorial. This tutorial is only for blogger. Now I have a tutorial that helps you to add facebook share button using java script. Just copy and paste the code. I think it will be helpful.http://www.databaseidea.com/

    ReplyDelete