[TUTORIAL] Pasang Tombol Twitter, Facebook Share dan Facebook Like (3-in-1)

Saat ini situs-situs jejaring sosial terutama Facebook dan Twitter merupakan jenis situs online yang paling banyak diakses oleh pengguna internet di seluruh dunia, dengan salah satu layanan yang banyak digunakan adalah kemudahan bagi penggunanya untuk menyebarkan/membagikan aka share artikel online yang ada di berbagai website/blog.

Bagi pemilik atau pengelola website/blog, tentunya hal tersebut menjadi salah satu peluang untuk memperbesar tingkat kunjungan ke situsnya melalui Facebook dan Twitter ini, dengan memberikan kemudahan bagi pengunjung untuk share artikel yang ada di blog, salah satunya adalah dengan memasang tombol share Facebook dan Twitter.



Sebelumnya pernah disampaikan secara terpisah cara memasang tombol share Twitter dan Facebook, dan juga tombol Facebook Like. Kali ini masih soal cara memasang tombol Facebook dan Twitter, tapi sedikit berbeda dari cara sebelumnya itu. Pemasangan tombol share kali ini menggunakan layanan dari LinksAlpha, yang menyediakan tombol share yang menggabungkan ketiga tombol tersebut (Facebook Share, Facebook Like, dan Share Twitter) untuk ditampilkan menjadi satu baris saja, sehingga terlihat lebih simpel, kompak dan lebih rapi.

*

Sebenarnya, tombol bernama "1-Click Retweet/Share/Like" yang disediakan oleh LinksAlpha ini bisa anda pasang dengan menggunakan kode yang diberikan di situs tersebut. Tapi sayangnya, kode tombol yang disediakan hanya untuk halaman / URL statis saja (Website), jadi tidak bisa tampil secara otomatis membaca URL/alamat setiap artikel blog. Kecuali anda install plugin untuk blog Wordpress (self-hosted), atau blog TypePad.

Untuk platform blog/situs lainnya, tenang saja, bisa diakali kok. Berikut ini cara pemasangannya.

*

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke tab Design/Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <b:if cond='data:blog.pageType != &quot;archive&quot;'>
 <iframe id='websites_iframe' expr:src='&quot;http://www.linksalpha.com/social?link=&quot; + data:post.url + &quot;&quot;' frameborder='0' height='25px' scrolling='no' width='320px'/>
 </b:if>
</b:if>

Demo: lihat di sini.

*

2. Pasang di template Wordpress.ORG (self hosted)

Anda bisa install plugin ini, atau bila anda seperti saya :) yang tidak suka install terlalu banyak plugins (karena semakin banyak plugins, semakin berat beban server hosting), silahkan pasang kode berikut ini. Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:

<iframe id="websites_iframe" src="http://www.linksalpha.com/social?link=<?php the_permalink() ?>" scrolling="no" frameborder="0" height="25px" width="320px"></iframe>

Demo: lihat di sini.

*

3. Pasang di Sidebar/Widget/Webpage (javascript)

Ini adalah kode generik untuk semua website (tentunya yang membolehkan pemasangan kode javascript) tanpa perlu edit template/theme, seperti pada demo pemasangan di artikel ini.

<script type="text/javascript">
document.write('<ifr'+'ame id="websites_iframe" src="http://www.linksalpha.com/social?link=' + escape(location.href) + '" scrolling="no" frameborder="0" height="25px" width="320px"></ifr'+'ame>');
</script>

*

Untuk blog WordPress.COM (atau blog lainnya yang tidak mendukung pemasangan kode script atau pun iframe, alternatifnya bisa menggunakan layanan dari situs GetSocialLive (klik di sini). Tapi terpaksa pasang tombol satu-satu di setiap artikel :), UPDATE: sudah disediakan secara build-in, silahkan login ke dashboard, masuk ke bagian Setting, lalu ke bagian Sharing.

Demo: lihat di sini.

*

Demo Pemasangan

Silahkan anda klik semua tombol retweet/share/like di bawah ini :D

*

UPDATE

Baca juga ini:

Tombol Sharing RESMI Facebook dan Twitter

*

.