Cara Memasukkan Tombol Share Twitter/Facebook Ke Dalam Blog

Rekan-rekan blogger, saya ingin bagi-bagi ilmu lagi nich soal tombol share Twitter/Facebook ke dalam blog. Seperti yang ada di kanan atas blog saya saat ini. Jika, rekan-rekan ingin memasangnya, silahkan ikuti lebih lanjut artikel kali ini.

Tombol share ini selain berfungsi untuk dapat digunakan oleh pengunjung blog agar dapat menshare artikel yang mereka minati ke Twitter/Facebook, juga dapat melihat berapa banyak artikel itu di share ke jejaring sosial tersebut, karena akan tertera angka diatas logo tombol share Twitter/Facebook nantinya.

Okeh, jika rekan-rekan berminat untuk memasangnya, berikut ini adalah langkah-langkah yang harus ditempuh dalam pemasangannya di blog, khusus Blogger :

1. Login ke akun Blogger

2. Klik “Layout”, lalu klik tab “Edit HTML”

3. Klik “Expand Widget Templates”

4. Cari kode dibawah ini :

<p><data:post.body/></p> atau <data:post.body/>

Seperti biasa, pergunakan "Ctrl + F" untuk mencari kodenya

NB : Jika terdapat "dua kode yang sama", gunakan kode yang "pertama" (yang paling atas)

5. Letakkan diatas kode tersebut, kode dibawah ini :

<div style='float:right; margin:0 0 10px 10px; text-align:center;'>
KODE-FACEBOOK
<br />
<br />
KODE-TWEETMEME
</div>

6. Ganti tulisan KODE-FACEBOOK dan KODE-TWEETMEME dengan kode berikut :


Untuk Facebook :

<a href='http://www.facebook.com/sharer.php' name='fb_share' title='Share on Facebook' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>


Dan untuk Twitter :

<a class='twitter-share-button' data-count='vertical' data-via='Sayap2Kehidupan' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

NB : Tulisan 'Sayap2Kehidupan' warna pink di kode Twitter, ganti dengan id Twitter rekan-rekan

7. Klik tombol “PREVIEW” untuk mereview perubahan tampilan template

8. Jika setelah di “PREVIEW” tidak terjadi perubahan, coba dicari lagi kode <data:post.body/> yang lain, karena ada template yang menggunakan kode tersebut beberapa kali, dan lakukan hal yang sama sesuai dengan point 5 diatas

9. Bila tampilannya sudah benar, silahkan klik “SAVE TEMPLATE”

10. Done!


Untuk memasang widget tersebut, rekan-rekan tidak perlu menggunakan account Twitter/Facebook. Bahkan, tidak harus juga punya account di Twitter/Facebook, karena tombol itu secara otomatis akan membaca URL artikel rekan-rekan dan menunjukkan angka link sharenya. So, bisa dipasang di blog / website mana saja.

Kode di atas adalah untuk pemasangan pada bagian atas artikel sebelah kanan. Kalau rekan-rekan mau meletakkannya di kiri, ganti kode style pada tag div menjadi seperti ini :

<div style='float:left; margin:0 10px 10px 0;'>

Kalau ingin memasang widget secara memanjang/menyamping, hilangkan tag <br /> atau rekan-rekan coba-coba experiment sendiri, yach! :p ..Namanya juga sekalian belajar, khan? Ntar bisa direview dulu koq sebelum disave. Hokeh okeh!!!

GuTLaK !!! (Sambil berdoa Mode : +On)

(",)v




Sumber : infonetmu.blogspot.com, berbagai sumber lainnya
Editor : AdeL`FarouK