How To Put Share Buttons, Bookmark, Google+ and Facebook Like Button With Unique Count on Your Blog

2010-11-07T16:16:00.007+08:00

Untuk versi Bahasa Melayu, baca di sini.

From my blog post, How to Prevent Blog Traffic Decrease for Seasonal Bloggers, we know that providing easy share to social network buttons can help to increase traffic to our blog as it promotes viral marketing. Now I will share complete codes on how to put these buttons for your every blog post, and for your main page with unique share counts.

Share Buttons with Count Set in Every Blog Post

Edit Blog HTML

To place the share buttons (with count) set as in the snapshot above, go to Design > Edit HTML then find the code below (use Ctrl+F to speed it up for you):

<data:post.body/>

Now that you've found the code, place the following code just before the previous code (if you want the buttons to appear before your blog post) or right after the previous code (if buttons appear after your blog post):

<!--<b:if cond='data:blog.pageType == &quot;item&quot;'>-->

<div style='padding:10px; background-color: #F8F8F8; border-top:1px solid #F2F2F2; border-bottom:1px solid #F2F2F2; '>

<!-- FB Share -->

<span style='display:inline-table; vertical-align:middle; '>

<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</span>

<!-- Google+ -->

<span style='display:inline-table; vertical-align:middle'>

<g:plusone expr:href='data:post.url' size='medium'/>

</span>

<!-- StumbleUpon -->

<span style='display:inline-table; vertical-align:middle'>

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

</span>

<!-- Reddit -->

<span style='display:inline-table; vertical-align:middle; '>

<script>reddit_url=&#39;<data:post.url/>&#39;</script><script>reddit_title=&#39;<data:post.title/>&#39;</script><script language='javascript' src='http://reddit.com/button.js?t=1'/>

</span>

<!-- Twitter -->

<span style='display:inline-table; vertical-align:middle;'>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='TWITTER_USERNAME' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</span>

</div>

<!--</b:if>-->

Replace the text TWITTER_USERNAME with your own Twitter username.

For the Google+ button to work, find the </body> tag in your code and add the following code just before it:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

SAVE TEMPLATE and see the results :) If you want the buttons to appear in your post pages only, and not on your main page, then uncomment codes as follows:

from ...

<!-- <b:if cond='data:blog.pageType == "item"'> -->

  the share buttons codes

<!-- </b:if> -->

becomes ...

<b:if cond='data:blog.pageType == "item"'>

  the share buttons codes

</b:if>

You can also put a single button to share your blog post to various social networking sites, e-mail, even bookmark your blog using widgets from AddThis, AddToAny or ShareThis. After getting the codes from their site, just put it in the same location as above for it to appear in every post.

Share Button from AddThis

Want to put Facebook LIKE button at the end of your blog post? Use the following code:

<!-- <b:if cond='data:blog.pageType == "item"'> -->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

<!-- </b:if> -->

Good luck!

Cwynire

How To Put Share Buttons, Bookmark, Google+ and Facebook Like Button With Unique Count on Your Blog