Blog Cik Emma: Tutorial : Letak Button Like Send

17 September 2012

Tutorial : Letak Button Like Send

Facebook has introduced a new sharing tool – the Send button. The Send button allows your readers to privately share things with groups and individuals. It enables them to:


  1. Share your post with selected friends through Facebook Messages.
  2. Post it to Facebook Groups.
  3. Email it (without snippet) to individuals.

I. Letak Button Send


  1. Pergi Ke Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Tick dekat Expand Widget Templates/
  4. Cari code di bawah ini (Ctrl+F untuk memudahkan pencarian):

<data:post.body/>

Copy code XFBML dekat bawah ni di bawah code di atas.

<!--Facebook Send button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script><fb:send expr:href='data:post.url' font='' colorscheme='light'></fb:send>
</div>
</b:if>
<!--Facebook Send button End -->

Preview dulu, kalau tak ada apa-apa masalah, save macam biasa dan lihat hasilnya.

II. Letak Button Like + Send button

Ulangi langkah di atas cuma copy code di bawah ini :

<!-- Facebook Like+Send button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script><fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>
</div>
</b:if>
<!-- Facebook Like+Send button End -->

III. Tambah Send button kepada yang sudah ada Like button

Kalau korang dah ada LIKE BUTTON, cuma tukar code yang sedia ada (tak kisah menggunakan iFrame or XFBML)) dengan code di bawah ini.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'></script><fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>

IV. Stylekan Button Anda

Korang boleh tukar style yang korang nak dengan explore sendiri la. make sure preview dulu sebelum save ok. :)

Like button typeAttributeValueWidth
 standard like buttonlayoutstandard
450px
facebook like button countbutton_count
150px
facebook like box count[5][1]box_count
110px
standard like button recommendactionrecommend
n.a.
standard like button darkcolorschemedark
n.a.
n.a.
fontfont name
n.a.
*hanya dua saja yang boleh ditukar untuk Send button –colorscheme and font.




V. Repositioning the buttons

Langkah-langkah di atas untuk kedudukan butang di bahagian kiri bawah setiap posting.
Korang boleh menukar kedudukan jika korang nak :


  • Posisi itu di atas posting

Letakkan kod butang sebelum <data:post.body/>, bukan selepas.


  • Posisi itu di sebelah kanan

Tukar code float dari left ke right.
Enjoy!

credit to : Blogger Sentral

No comments:

 
Copyright© All Right Reserved by Cik Emma