Cara Menampilkan Fanpage Facebook di Blog

Wednesday, November 09, 2016

 Cara Menampilkan Fanpage Facebook di Blog

Halo sahabat semua, kali ini saya akan membagikan tips untuk blog mengenai Cara Menampilkan Fanpage Facebook di Blog milik sahabat semua. Pada artikel ini saya akan membahas bagaimana cara menampilkannya. Kalau begitu tanpa memperpanjang tulisan lagi, mari sahabat semua baca langkah-langkah yang harus sahabat lakukan.

Cara Menampilkan Fanpage Facebook di Blog.
  • Masuk ke akun Facebook sahabat.
  • Jika sahabat belum memiliki Fanpage Facebook, sahabat dapat membuatnya terlebih dahulu.
  • Setelah itu, masuk ke link situs ini: Facebook Developers.
  • Jika sahabat sudah mengklik link tadi, maka sahabat akan melihat tampilan seperti gambar di bawah ini.
Gambar Tampilan Fanpage Facebook di Blog.
(Doc. Mhd. Saifullah)
  • Masukkan URL Fanpage Facebook sahabat seperti yang terlihat pada gambar yang telah dilingkar merah di atas.
  • Buatlah pengaturan tampilan Fanpage Facebook yang sesuai keinginan dan selera sahabat yang akan ditampilan di blog. Sahabat dapat membuat tampilan sederhana maupun tampilan sepenuhnya dengan menghapus atau mengklik tanda ceklis pada kolom yang ada.
  • Untuk melihat bagaimana tampilan Fanpage Facebook yang akan ditampilkan di Blog, tunggulah beberapa saat setelah mengklik ceklis yang ada.
Gambar yang ditampilkan pada Facebook Developers.
(Doc, Mhd. Saifullah)
  • Untuk mendapatkan link code, sahabat klik tulisan Get Code atau Dapatkan Kode dan tunggu beberapa saat sampai ditampilkan pilihan beberapa kode HTML.
  • Pada tampilan nanti, sahabat dapat memilih kode mana yang akan sahabat ambil atau copy ke Blog sahabat. Di situ ada dua, yang sebelah kiri tertulis SDK JavaScript dan yang sebelah kanan tertulis IFrame.
Untuk lebih jelas sahabat dapat melihat seperti gambar di bawah ini.
Gambar kode dari SDK JavaScript.
(Doc. Mhd. Saifullah)
  • Cara menampilkan Fanpage Facebook di Blog dengan menggunakan kode dari SDK JavaScript, yaitu sahabat harus menyatukan dua kode yang ada di kolam yang sudah saya lingkari berwarna merah. Copy kode tersebut satu persatu lalu simpan di notepad untuk sementara.
Catatan:
Ketika disatukan kedua kode, maka jadinya akan seperti ini:
<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/id_ID/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/muhammad.saifullah.1610/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/muhammad.saifullah.1610/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/muhammad.saifullah.1610/">Muhammad Saifullah</a></blockquote></div>
  • Bila sahabat ingin melakukannya dengan cara lebih sederhana, sahabat dapat membuatnya dengan menggunakan kode dari IFrame seperti yang tampak pada gambar di bawah ini. Copy kode tersebut lalu simpan di notepad untuk sementara.
Gambar kode dari IFrame
(Doc. Mhd. Saifullah)
  • Setelah mendapatkan kode untuk tampilan Fanpage Facebook dan sementara telah disimpan di notepad, sekarang kita melangkah ke Blog.
  • Masuk ke akun Blog sahabat.
  • Pilih Tata Letak untuk mengatur widget.
  • Klik tambahkan gadget lalu pilih widget HTML/JavaScript untuk ditampilkan.
  • Kode yang sudah sahabat simpan sementara di notepad tadi copy kembali lalu paste ke widget HTML/JavaScript.
  • Simpan dan lihat Blog.
Bagaimana mudahkan? Sahabat dapat mencoba kedua kode tersebut di Blog sahabat sendiri sambil iseng-iseng malakukan eksperimen kecil-kecilan.

Sekian artikel mengenai Cara Menampilkan Fanpage Facebook di Blog. Semoga artikel ini bermanfaat untuk sahabat semua yang sedang belajar atau iseng-iseng bermain Blog. Kalau begitu sampai jumpa pada artikel berikutnya dari saya. Salam.

SELAMAT MENCOBA

Sumber:
Tinta Pengembala Kata

Artikel Terkait

Previous
Next Post »
Comments
0 Comments