Lompat ke konten Lompat ke sidebar Lompat ke footer

Memasang widget rekomendasi facebook (blogger.com)

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 :)

31 komentar untuk "Memasang widget rekomendasi facebook (blogger.com)"

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

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

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

    BalasHapus
    Balasan
    1. Bukan iklan yang aku maksud Vina, tapi dialog rekomendasi postingan lainnya

      Hapus
  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.

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

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

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

    BalasHapus
    Balasan
    1. Biar bisa konsentrasi yah mbak? :)

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

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

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

    BalasHapus
    Balasan
    1. Makasih untuk semangatnya, masalah menulisnya sebenarnya terkendala koneksi :D

      Hapus
  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

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

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

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

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

    BalasHapus
  11. 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

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

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

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

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

    BalasHapus
  14. mantap sangat jelas dan mudah di praktekkan

    BalasHapus
    Balasan
    1. Syukurlah kalau tipsnya tidak sulit, makasih udah berkunjung :)

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

    BalasHapus

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