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

by Cwynire Thursday, August 19, 2010 11 comments Mama

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!