Cara memasukan javascript facebook dan twitter ke html blogger

Question

CARA memasang widget social share Facebook, Twitter, Google Plus, dan WhatsApp (WA) di bawah posting blog.

Yang unik dari kode social share berikut ini adalah tambahan tombol share ke WhatsApp. Selain cara berikut ini, kita juga bisa gunakan AddThis yang sangat lengkap, termasuk untuk berbagi ke WA.

Khusus tombol share WA hanya muncul saat blog dibuka di HP. Di desktop tidak muncul.

Demonya, silakan buka halaman ini di HP Anda. Lihat bagian bawah, ada tombol share Like, Share, Twitter, Google Plus, dan WhatsApp.

Cara Pasang Tombol Social Share di Bawah Posting Blog

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == "item"'>
<div style='margin:10px 0'>
<div style='float:left;margin:5px 20px 5px 5px;'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div style='float:left;margin:7px;0 0 0'>
<div class='facebook-share'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</div>
<div style='float:left;margin:7px;0 0 0'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
<div style='float:left;margin:7px;0 0 0'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div style='float:left;margin:7px;0 0 0'>

<script type='text/javascript'>if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://googledrive.com/host/0BwMMDqbfGy7Od3UtLTRJcncwQ1U";h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>

</div>
<div class='clear'/>
</div>
</b:if>

3. Save Template!

Jika Anda hanya membutuhkan tombol share to WhatsApp doang, maka kodenya yang harus ditambahkan hanya ini:

<script type='text/javascript'>if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://googledrive.com/host/0BwMMDqbfGy7Od3UtLTRJcncwQ1U";h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>

Demikian cara Memasang Tombol Share Facebook, Twitter, Google Plus, dan WhatsApp (WA). Good Luck! (http://www.contohblog.com).*

Jumlah pengguna Twitter di Indonesia memang masih kalah dibandingkan dengan jumlah pengguna Facebook. Tapi apakah kalian tahu kalau banyak sekali kejadian menjadi viral bermula dari Twitter? Bahkan belakangan ini saya sering melihat akun Facebook dan Instagram yang mengambil konten dari Twitter dengan cara men-capture tweet-nya. Kebanyakan adalah akun-akun banyolan yang butuh konten, karene Twitter adalah sumbernya jokes receh.

Belum lagi banyak public figure yang memanfaatkan Twitter sebagai sarana untuk berkomunikasi dengan penggemarnya. Tak terhitung bayaknya politikus, seniman, artis, atlet, dan sebagainya yang sering berkicau disana. Jadi jangan remehkan kekuatan Twitter, karena penggunanya sebenarnya sangat banyak meski tidak sebanyak Facebook.

Saya sudah bermain Twitter sejak 2009 dan sampai sekarang tetap menyukainya. Twitter adalah media sosial favorit sepanjang masa! Setidaknya untuk saya pribadi. Bagi kamu yang punya Twitter, boleh lah difollow akun saya.

Cara Membuat Plugin Kronologi Twitter di Blog

Jika kamu ingin membuat widget atau plugin yang menampilkan semua tweet dari timeline Twitter seperti diatas, caranya sangat mudah dan kodenya sangat sedikit.

1. Buka alamat berikut:

https://publish.twitter.com

2. Masukkan URL lengkap profil Twitter di kotak yang tersedia. Contoh:

https://twitter.com/igniel

Ganti igniel dengan username masing-masing. Setelah itu tekan ENTER.

3. Pilih Embedded Timeline.

4. Agar tampilannya tidak terlalu besar, atur dulu tinggi dan lebarnya. Klik tulisan set customization options.

5. Tuliskan nilai panjang (height) dan lebar (width) yang diinginkan. Selain itu ada beberapa pengaturan lain seperti warna link, mode tampilan (light / dark), dan bahasa. Setelah selesai klik tombol Update.

6. Kode akan muncul. Copy kode ini dan letakkan dimanapun kamu menginginkannya. Bisa di sidebar atau di dalam postingan sekalipun.