Home » , , , » Tips Memasang Widget Facebook Social Plugins di Blogger (Like Button, Comment atau Recommendations Box)

Tips Memasang Widget Facebook Social Plugins di Blogger (Like Button, Comment atau Recommendations Box)

Posted by Hilmi Atiq on 19.44

Salah satu cara meningkatkan kunjungan pembaca ke website ataupun blog adalah dengan memasang Facebook Widget Social Plugins seperti Like Button, Comment (komentar) atau Recommendations Box.

Mungkin bagi sebagian orang suatu komentar dari orang lain merupakan wujud perhatian kepada hasil karya yang telah di buat, Ada baiknya bila komentar kita bisa di lihat banyak orang termasuk para pengguna facebook, yang notabene merupakan jejaring social terbesar saat ini di indonesia.

Ada Facebook Social Plugin untuk para blogger tentulah komentar dari pembaca bisa di lihat ke semua pengguna facebook, bagi kebanyakan orang setelah membaca artikel akan males untuk komentar, di karenakan dia harus mengisi data semisal username, alamat email, website atau data contact lainnya.

Namun dengan Facebook Social Plugins bagi mereka pengguna facebook cukup ketik komentar saja sudah bisa tanpa melkukan pengisian data ke kolom tertentu, dengan syarat dia harus log in facebook dahulu..ya cukup simpel namun sekarng trik ini bisa menjadi salah satu daya tarik para pembaca untuk mau memberi komentar atau sekedar LIKE.

Apalagi apabila komentar tersebut di share ke halaman facebook otomatis akan secara tidak langsung ikut mempromosikan link website atau blog kita… sehingga bisa meningkatkan traffic dan website atau blog anda dikenal banyak orang.

Ada berbagai macam Facebook Plugins (lihat di https://developers.facebook.com/docs/plugins/)
yang bisa anda gunakan, diantaranya yaitu :

Activity Feed
Comments
Facepile
Like Box
Like Button

Live Stream
Login Button
Recommendations Box
Registration
Send Button
Subscribe Button

Diantara Plugins yang sering dipakai yaitu : Like Button, Comment atau Recommendations Box.


Untuk Memasang Facebook Social Plugins. adapun yang dipergunakan adalah sbb:

1. ID Facecook (terlebih dahulu sudah punya account facebook), yang diperlukan adalah ID Angka anda Bila sudah mengganti ke Username (misal punya saya : www.facebook.com/k12tronik) maka anda perlu lihat pada album foto anda karena disana masih terlihat ID Angka account anda terdaftar.
contoh https://www.facebook.com/media/set/?set=a.1974286681914.2100447.1385477918&type=3
, 1385477918 adalag Id facebook saya

2. Membuat Application ID Facebook (disingkat: App ID) silahkan masuk ke alamat berikut : https://developers.facebook.com/apps/


Penting : Untuk Alamat URL anda harus lengkap seperti http://www.hilmiatiq.com/ (gunakan tanda / untuk penutup URL)

3. Memasukkan Scripts/Javascript di Layout/template blogger anda (sewaktu edit html blog centang pilihan expand template widget). Yaitu :

A. masukkan script berikut : xmlns:fb='http://www.facebook.com/2008/fbml sebelum <head>, atau cari <html , gunakan Control + F

Perhatikan script dibawah
sebelum dimasukkan :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>

Sesudahnya :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
<b:include data='blog' name='all-head-content'/>

B. masukkan script berikut diatas <b:skin>:

<meta content='App ID' property='fb:app_id'/>
<meta content='NOMOR ID PROFIL FB ANDA' property='fb:admins'/>
<meta content='article' property='og:type'/>
<b:skin><![CDATA[/*

ket : ganti App ID dan Isi NOMOR ID PROFIL FB ANDA (baca diatas cara menemukan ID facebook), pada script diatas

Sesudahnya :

<meta content='150333540942' property='fb:app_id'/>
<meta content='1385477918' property='fb:admins'/>
<meta content='article' property='og:type'/>
<b:skin><![CDATA[/*

C. Masukkan script dibawah ini setelah <body> (ditemplate layout blogger)

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID ANDA',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
<fb:comments/>
</script>

hasilnya :

</head>

<body>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '150333540942',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
<fb:comments/>
</script>

Ket : ganti App Id scripts diatas dengan App Id anda

D. Masukkan Script Komentar,
ada 2 cara, cara pertama bisa anda masukkan Script Comment langsung di setiap postingan Artikel Blog Anda, yang diperoleh dari Facebook plugins di link Comment, misal :

<div class="fb-comments" data-href="http://www.hilmiatiq.com/2012/05/berbohong-itu-dosa-tetapi.html" data-num-posts="5" data-width="470"></div>

akan tetapi cara ini sangat report sekali karena harus masukkan satu persatu di link postingan blog anda. Cara termudah yaitu memasukkan script berikut ini ke dalam layout template blogger, jadi secara default akan muncul di setiap halaman postingan blog.

Cari kode ini: <div class='post-footer-line post-footer-line-3'> ,
lalu lettakkan script berikut dibawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='10' data-width='450' expr:data-href='data:post.url'/>
</b:if>

Hasilnya :

<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='10' data-width='450' expr:data-href='data:post.url'/>
</b:if>

Catatan: selalu dicentang untuk expand template widget untuk mencari (control+F) script yang dimaksud.

E. Memasukkan Script Like Button.
dengan script ini maka akan muncul tombol Like dan Send ke wall facebook, juga terlihat berapa jumlah yang suka atau share artikel blog. Untuk Cara ini kita masukkan secara manual di setiap postingan blog, tinggal mengganti alamat URL postingan Blog. Scripts bisa diperoleh di https://developers.facebook.com/docs/plugins/

Contoh : <div class="fb-like" href="http://www.hilmiatiq.blogspot.com/2012/05/berbohong-itu-dosa-tetapi.html" send="true" width="450" faces="true"></div>

Letakkan pada akhir postingan Blog anda. (edit di menu HTML postingan blog nya)

Untuk Script Plugins lainnya bisa anda coba satu persatu. Dan bila prosedur yang telah dijalankan dengan benar dan tepat maka hasilnya bisa anda lihat pada halaman postingan saya ini.


SELAMAT MENCOBA

Label: , , ,

0 komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.


close