Cara menambahkan halaman FB di Blog

Cara menambahkan halaman FB di Blog - Halaman Fb atau fans page blog sangat penting pada sebuah website. Dengan adanya halaman Fb blog tersebut, akan lebih memudahkan blog kita di akses oleh pengunjung melalui media sosial Facebook. 

Ada beberapa tipe tampilan dari fans page blog yang sangat populer. Yakni ada yang berbentuk timeline, tanpa timeline, hide cover foto, dll. Tinggal anda memilih mana yang pas sesuai dengan selera anda dan cocok pula untuk blog.

1. Tampilan timeline



Untuk membuat fans page seperti ini, ikuti langkah-langkah berikut:

1. Anda masuk di dashboard blogger.

2. Pilih "Tata Letak"


3. Klik "Tambahkan Gadget".


4.Klik "HTML/Java Script".



5. Copy dan paste kode java script berikut ke dalam jendela yang baru saja muncul.


<div class="fb-page" data-href="https://www.facebook.com/portabs" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/portabs"><a href="https://www.facebook.com/portabs">Portabs Blog</a></blockquote></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=1642118326052796";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Catatan : 
Ganti bagian yang di beri kotak merah dengan url halaman sobat.
Ganti juga bagian yang di beri kotak hijau dengan nama halaman sobat.

Jika sudah, lalu klik "Save".

2. Tampilan tanpa Timeline

Oh iya, jika Anda ingin menghilangkan tampilan timeline nya menjadi seperti ini:

Lakukan cara seperti langkah-langkah di atas kemudian pada "HMTL dan Java Script" copy dan pastekan kode berikut.
<div class="fb-page" data-href="https://www.facebook.com/portabs" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/portabs"><a href="https://www.facebook.com/portabs">Portabs Blog</a></blockquote></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=1642118326052796";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

3. Tampilan Kecil

Atau jika tampilan nya hanya berupa ikon blog dan tombol like seperti ini:


Lakukan cara seperti langkah-langkah sebelumnya kemudian pada "HMTL dan Java Script" copy dan pastekan kode berikut. 

<div class="fb-page" data-href="https://www.facebook.com/portabs" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/portabs"><a href="https://www.facebook.com/portabs">Portabs Blog</a></blockquote></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=1642118326052796";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Baik, itulah tadi cara Cara menambahkan halaman FB atau fans page di Blog, mudah-mudahan bermanfaat.

Jangan lupa like and share nya yah. Thanks! 

Postingan terkait: