21 March 2013

Memasang widget rekomendasi facebook (blogger.com)

Posted by Fadly Indrawijaya , 33 Komentar

‫بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
Widget rekomendasi
Konsisten itu ternyata tidak mudah yah, beberapa hari ini aku mencoba posting dengan teratur tapi buktinya malah keluar dari jalur konsisten lagi :) Sebagai ganti atas keterlambatan tulisanku, aku ingin menulis trik membuat dialog rekomendasi postingan via facebook seperti yang kalian lihat di sebelah kanan bawah dari blogku ini.

Sebelum melanjutkan postingan ini, aku ingin menambahkan dulu bahwa beberapa minggu yang lalu aku menjalin sebuah kesepakatan dengan salah seorang blogger profesional untuk menerjemahkan postingannya dalam bahasa Indonesia dan Alhamdulillah ia setuju. Dan widget ini adalah salah satu hasil karyanya. Kayaknya prolognya kepanjangan, langsung saja di praktekin yah teman-teman tapi sebelum di praktekin, kalian harus ketahui fungsinya dulu biar lebih yakin memasangnya.
Untuk apa memasang dialog rekomendasi?
Sesuai namanya, fungsi utama dari widget ini adalah menyodorkan atau merekomendasikan beberapa postingan lain kepada pembaca sehingga pembaca akan lebih tertarik dan memilih untuk sedikit berlama-lama di blog kalian. Selain itu ketika seseorang menekan tombol “Like” maka secara tidak langsung ia ikut merekomendasikan tulisan kalian melalui akun jejaring sosial (facebook) miliknya. Kalau masih bingung, langsung saja klik “like” kemudian cek hal menarik yang terjadi di profil facebok kalian. Gimana, tertarik kan?

Membuat aplikasi facebook

  1. Untuk membuat aplikasi facebook, silahkan mengunjungi halaman Facebook Apps
  2. Klik tombol Create New App
  3. Kemudian dialog Create New App akan muncul, silahkan isi App Name dengan nama aplikasi kalian. Silahkan abaikan untuk pilihan lainnya. Kemudian klik Continue
  4. Membuat widget

  5. Akan muncul kode keamanan, silahkan ketik sesuai kode tersebut. Untuk yang terbiasa blogging, pasti tidak asing dengan kode seperti ini ketika berkomentar di sebuah blog :D
  6. Klik Website with Facebook Login kemudian pada kolom site URL, isi dengan alamat blog kalian. Tidak usah klik pilihan lain yah, langsung klik Save Changes
  7. Rekomendasi facebook


  8. Akhirnya langkah pertama selesai, kalian akan melihat 2 kode, yaitu App ID dan App Secret. Silahkan salin kodenya, kalau yang pakai linux (kayak aku) bisa menggunakan gedit text manager, kalau yang menggunakan windows bisa menggunakan notepad, atau bisa juga di catat di kertas :D

  9. Widget biluping

Memasang Widged di blog (blogger.com)

Sekarang waktunya memasang widget tadi pada blog kalian. Pada kesempatan ini aku hanya menulis tips memasang di blogspot, untuk yang menggunakan wordpress, silahkan berkomentar dan bersabar untuk postingan berikutnya :)

  1. Silahkan login ke blogger.com > Template
  2. Jangan lupa backup dulu template kalian yah (biar aman)
  3. Klik Edit HTML, dialog peringatan akan muncul, klik lanjutkan
  4. Silahkan cari kode " <html " , biasanya berada di bagian awal html blog kalian kemudian tambahkan xmlns:fb='http://ogp.me/ns/fb#' setelahnya.
  5. Di blogku ia tampak seperti ini <html xmlns:fb='http://ogp.me/ns/fb#' Kenapa kita memasang kode ini, agar widget yang kalian buat kompatibel juga untuk versi internet explore :)
  6. Sekarang cari <body> , untuk memudahkan, silahkan ketik Ctrl+F
  7. Jika kalian menggunakan template terbaru blogger, kalian tidak akan menemukan <body> jadi silahkan cari <body (tanpa balas kurung)
  8. Setelah menemukannya, tempelkan kode berikut tepat dibawah kode body tadi.

  9.     <div id='fb-root'/>
        <script>
        //Facebook Recommendation bar by www.mybloggertricks.com
        //<![CDATA[

        (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/all.js#xfbml=1&appId=***************";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        //]]>
        </script>
        <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
        <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.biluping.com' trigger='40%'/></div>
        </b:if></b:if>



  10. Silahkan ganti ********** dengan 15 digit app id yang tadi kalian dapatkan di facebook. Untuk App secretnya di simpan aja yah :)
  11. Ganti juga http://www.biluping.com dengan alamat blog kalian

  12. Simpan template kalian dan coba mengunjungi sebuah postingan.

Tambahan:
Berikut beberapa pengaturan lanjutan yang dapat kalian lakukan untuk menyesuaikan widget.
  • max_age: Untuk mengatur batas jangka waktu postingan. Kalian dapat mengisinya dengan interval waktu antara 1-180.
  • num_recommendations: Untuk mengatur berapa banyak rekomendasi yang muncul. Contohnya saja di blogku aku hanya menampilkan 3. Jika kalian ingin menambahkan atau menguranginya, silahkan menggantinya dengan nilai lain.
  • read_time: mengatur waktu munculnya dialog rekomendasi
  • side: mengatur lokasi dari dialog. Pada kode diatas, kita menggunakan right, kalian dapat mengaturnya menjadi left jika kalian ingin menampilkannya di sebelah kiri.
  • trigger: untuk mengatur lokasi pemicu munculnya dialog rekomendasi itu. Di kode di atas tertulis 40%, itu artinya dialog rekomendasi akan muncul ketika kalian sudah melakukan scroll 40% halaman.
  • Dialog rekomendasi ini akan muncul hanya di halaman postingan, jika kalian ingin menampilkannya juga pada halaman homepage, silahkan hapus kode berwarna biru.

Tulisannya sampai disini dulu yah, jika kalian menemukan kesulitan dalam masalah pemasangannya, silahkan berkomentar kemudian kita bahas bersama untuk menemukan solusinya. Terima kasih sudah membaca tulisan sederhana ini, jangan lupa klik tombol “like”nya yah... hitung-hitung berbagi ilmu pada teman-teman facebook :)

foto fadly
Penulis: Fadly Indrawijaya
Manusia sederhana dengan impian luar biasa. Penikmat hujan, segelas teh hangat dan buku. Sangat tertarik pada astronomi, teknologi, fotografi, jurnalis, dan alam. Selengkapnya >>

33 comments:


bingungBingung? Jangan ragu untuk Bertanya | Komentar

Kami menghargai setiap tanggapan pembaca.
Kami akan berusaha merespon tanggapan tersebut secepatnya, اِ نْ شَآ ءَ اللّهُ

Catatan
1. Jangan SPAM yah....
2. Tidak menggunakan link hidup
3. Silahkan berkomentar dengan sopan


  1. saya tuh, ga pernah bisa sukses main kode2 begini hehehe... tapi tetap sy ucapkan terikasih atas berbagi ilmu tutorialnya... semoga mendatangkan manfaat... amin

    ReplyDelete
    Replies
    1. Memang masalahnya dimana teman? Soalnya pada awalnya aku juga mengalami kesulitan tapi belajar sedikit-sedikit akhirnya bisa :)

      Delete
  2. hmm , kalo ada iklannya malah pengunjung tuh jadi risih , emang sih naikin trafik tapi kalo bkin ga nyaman sih aku mending ga pake

    ReplyDelete
    Replies
    1. Bukan iklan yang aku maksud Vina, tapi dialog rekomendasi postingan lainnya

      Delete
  3. puciiing kalo pake html2 code gini sayanya mah hehe.. untuk sementara, merhatiin dulu aja.. nti kalo ada ada cara yg gak perlu pake html2 code, insya Allah langsung pasang.

    ReplyDelete
    Replies
    1. Hehehe... itu cuma awalnya kok mbak, kalau udah ngerti pasti gak akan dapat masalah lagi :)

      Delete
  4. Replies
    1. Makasih pujiannya, ini cuma berbagi widget aja sapa tau ada yang minat :)

      Delete
  5. kalau mencoba kode-kode seperti ini harus mood dulu nih akunya, trus pas anak-anak tidur :)

    ReplyDelete
    Replies
    1. Biar bisa konsentrasi yah mbak? :)

      Delete
  6. agak bingungka' kak,kayak ribet saya liat caranya. Apakah widgetnya itu bisa langsung dipasang tanpa membuat aplikasi facebook? ^^

    ReplyDelete
    Replies
    1. Bisa sih sebenarnya dengan cara copy aplikasi orang lain yang telah membuat sebelumnya tapi lebih amannya jika menggunakan widget milik kita sendiri kan?

      Delete
  7. ayo mas ayo, update yang teratur :D

    ReplyDelete
    Replies
    1. Makasih untuk semangatnya, masalah menulisnya sebenarnya terkendala koneksi :D

      Delete
  8. santai aja Mas fadly kalo nggak konsisten. kita semua dinamis bukan? hehe

    soal teknis begini, saya mesti pelan2 bacanya. soalnya lama bisa paham, hehe.. maklum yaa

    ReplyDelete
    Replies
    1. Ia kak, dikit2 aja bacanya, kalau dapat kendala, langsung di komentari agar cepat direspon :)

      Delete
  9. Boleh juga nih dicoba... tapi takut sama kode2nya...

    ReplyDelete
    Replies
    1. Kok malah takut mbak? silahkan ditulis disini kendala atau faktor apa yang membuat takut

      Delete
  10. Mau coba tapi takut kebanyakan ntar di blog saya....
    salam kenal aja deh......

    ReplyDelete
  11. boleh di coba nich sob..syukur-syukur bisa menambah PV dengan recomendation widget FB ini.

    ReplyDelete
    Replies
    1. Tentu dong soalnya pembaca disarankan untuk baca tulisan lainnya dan ia bisa tahu teman-temannya yang merekomendasikan hal itu juga :)

      Delete
  12. ga usah cape cape edit templaete segala kalau cuma mau masang recom fb, cukup dengan tambah elemen java script, langsung dipastekan kodenya yg telah dibuat facebook

    ReplyDelete
    Replies
    1. Makasih untuk tambahan infonya yah mas :) tapi sengaja ditaruh di taruh di body soalnya bagian widged udah kebanyakan :)

      Delete
  13. hedew.. koq ga work di blog ku ya mas.. munculnya bukan rekomendasi dari postingan saya, tapi "word" .. ada saran mas.. :(

    ReplyDelete
    Replies
    1. Word gimana maksudnya mas? coba di cek kembali langkah-langkahnya :)

      Delete
  14. mantap sangat jelas dan mudah di praktekkan

    ReplyDelete
    Replies
    1. Syukurlah kalau tipsnya tidak sulit, makasih udah berkunjung :)

      Delete
  15. wah keren amat infonya..... lam kenal ya

    ReplyDelete
  16. This is a great article. It gave me a lot of useful information. thank you very much.
    I would like to thank you for the efforts you have made in writing this article.
    Bulk SMS Hyderabad, Bulk SMS

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
 

BiluPing © 2009 - 2016.

Home | | Contact | FAQ | BiluPing Google+