Bagaimana Meletakkan Button Share, Bookmark, Google+ dan Facebook LIKE di Blog Anda

by Thursday, August 19, 2010 11 comments
For the English version, read this.

Daripada post saya, Bagaimana Mengelakkan Penurunan Trafik untuk Bukan Blogger Tegar, kita tahu bahawa menyediakan button share ke social network sites di blog merupakan antara strategi menarik trafik ke satu2 blog yang amat berkesan kerana ia bersifat viral. Kini seperti yang dijanjikan saya akan berkongsi bagaimana anda juga boleh menyediakan feature ini di blog anda sendiri.



Set Button Share ke Laman Jaringan Sosial di Setiap Post

Edit HTML Blog


Untuk meletakkan set button share + count seperti di gambar di atas di setiap post blog anda, pergi ke Design > Edit HTML dan cari kod di bawah (guna Ctrl+F untuk memudahkan anda):

<data:post.body/>

Selepas menjumpai barisan kod ni, letakkan kod di bawah sejurus sebelum (jika di awal post) atau selepas (jika di akhir post) kod tadi:

<!--<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>-->

Gantikan text TWITTER_USERNAME dengan username anda sendiri.

Untuk membolehkan button Google+ digunakan, cari </body> di dalam kod anda dan tambah kod di bawah sejurus sebelumnya:

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

SAVE TEMPLATE dan lihat hasilnya :) Tapi jika anda ingin ia dipaparkan di laman post sahaja dan bukan di laman utama, pastikan anda uncomment kod sebagaimana di bawah ini:

dari ...

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

  kod share button anda

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

menjadi ...

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

  kod share button anda

</b:if>

Anda juga boleh meletakkan single button untuk feature Share ke mana2 laman jaringan sosial, E-mel mahupun Bookmark dengan menggunakan widget daripada AddThis, AddToAny atau ShareThis. Setelah mendapatkan kod daripada laman web mereka, hanya letakkannya di lokasi yang sama seperti di atas untuk ia kelihatan di setiap post.

Share Button daripada AddThis


Ingin meletakkan Facebook LIKE button di akhir post seperti saya? Gunakan pula kod di bawah:

<!-- <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> -->

Selamat mencuba!

Cwynire

Author

Co-founder of Carwin Solutions and My1STOP Virtual Shopping Mall @ http://www.my1stop.com.my

11 comments:

  1. FYI saya dah update post di atas di bahagian kod utk button share Twitter supaya terus masukkan tajuk post blog di dalam Tweet kita ... rasanya tu lebih 'standard practice' kot ... bolehlah update kod anda kalau mahu :)

    ReplyDelete
  2. i used ur code and it's good.
    the onli problem i hav is these buttons are not aligned. is there a solution?

    http://thenumerologyofour.blogspot.com

    ReplyDelete
  3. Hi. Visited your blog - nice one.

    Did u use the exact codes i posted, including the 'span' tags? If you did, the buttons possibly don't align due to inheriting styles in your blog's CSS, which may differ from mine. In that case, push a button up by adding 'margin-bottom:10px;', push it down with 'margin-top:10px;' (play around with the value of the px until u get it right) ... place it like this ... span style='display:inline-table; vertical-align:middle; margin-bottom:10px;'

    Hope that works 4 u.

    ReplyDelete
  4. appreciate ur reply, it really solves the problem.

    but now i hav another problem. there is an unwanted gap between my tweet button and sahre button.

    do u mind to have a look and let me know if there is a way to get rid of the gap?

    ReplyDelete
  5. The shortcut would be to place the twitter button last, but if u really want it to be somewhere in between other social media buttons, then add the bolded css code to the span tag of the button which comes after twitter: span style='display:inline-table; vertical-align:middle; position:relative; left:-15px;'

    ReplyDelete
  6. u're really helpful, thanks for the information ^^

    btw, is there any possibility that i can show the buttons at the homepage and have the share button to share the post instead of the homepage?

    I notice when i remove the tag, the buttons appear in homepage, but the share button in every post will not share the particular post instead the homepage itself when i click to share.

    Am i comprehensible? haha

    ReplyDelete
  7. Hrmmm ... the share buttons grab the current page's URL .... when allowed to be displayed at the home page, it thus captures the home page's URL. Even if we somehow find a way to assign individual post URL to the buttons at the home page, it will then affect its use in the post pages. Sorry can't help this time ... maybe someday when either of us finds out how we can do this, we can update one another.

    Share/like this blog post if u find it worth sharing yea!

    ReplyDelete
  8. http://www.socialblogr.com/

    I think it's achievable. U can refer to this website, the share buttons are sharing every post separately even though they are all in 1 page.

    ReplyDelete
  9. @4 ™
    Refer to this tutorial. It will extract the correct post url, even if you're on homepage (or any other page.
    Add Facebook share button with counter

    ReplyDelete
  10. Thank you so much!

    ReplyDelete
  11. Sorry been busy & unable to research on this previously. Thanx 4 ™ and GreenLava for the links! The articles shed some light to solving 4 ™ 's issue. It's just a matter of putting the data:post.url in the codes to suit each social media. I've updated my codes and used them for my own blog as u can see. Thanks ppl!

    ReplyDelete