15

Membuat Facebook Like Button untuk WordPress Lebih SEO Friendly

Ditulis tanggal 16 October 2014 didalam kategori WordPress dengan tag Facebook, Plugin, SEO, Tips, Website, WordPress oleh Bambang Sugiarto

Facebook Like Button merupakan social plugin berupa tombol yang memungkinkan pengguna berbagi konten (sharing) dengan teman-teman / koneksi di Facebook. Ketika pengguna mengklik tombol ini di situs anda, content sharing akan muncul dalam berita teman berikut link yang akan merujuk kembali ke website anda.

Facebook like button dapat dipasang untuk segala jenis website, termasuk website berbasis WordPress. Facebook like button dapat di install baik secara manual maupun dengan menginstall facebook like plugin untuk WordPress. Ada bermacam-macam facebook like plugin untuk WordPress. Namun, dari seluruh plugin yang tersedia, hampir semuanya memiliki kekurangan yang sama, yaitu plugin akan men-generate kode html tag IFRAME dihalaman website kita.

Menurut pakar SEO, search engine tidak terlalu menyukai IFRAME di suatu halaman, selain itu IFRAME juga membebankan halaman websita sehingga menjadi lebih lambat saat loading. Salah satu klien saya pernah meminta saya apakah saya dapat memodifikasi plugin tersebut agar lebih SEO friendly. Saya menjawabnya dengan pasti “YA” saya mampu, dan pekerjaanpun dimulai.

Ide dasarnya adalah men-generate tag html IFRAME on the fly, artinya IFRAME disisipkan atau dirender di browser window hanya pada saat pengunjung website membukanya melalui browser. Jadi bukan diproses / digenerate di sisi server dimana tags hmtl IFRAME diembed di dalam halaman website. Dengan teknik ini, maka search engine crawler (proses bagian dari mesin pencari yang bertugas untuk mengambil dan menganalisa suatu halaman website setiap periode tertentu) membaca halaman website tidak mengandung IFRAME.

Salah satu cara membuat dan menyisipkan tag-tag html on the fly ke halaman suatu website adalah melalui JavaScript, untuk itu saya memanfaatkan jQuery. Berikut ini langkah-langkah bagaimana memodifikasi website WordPress kita agar dapat memiliki facebook like button, namun tetap SEO friendly:

(1). Tambahkan kode PHP berikut ini ke file functions.php didalam folder themes yang anda gunakan:

function proceed_fblike($str){    global $post;    return str_ireplace('<!-- fblike --&gt', '<div id="fb-root"></div><div class="fblikecontainer"><fb:like href="'.get_permalink($post->ID).'" show_faces="false"></fb:like></div>', $str);}add_filter('the_content', 'proceed_fblike', 1);

(2). Pada file footer.php didalam folder themes yang anda gunakan, tepat sebelum tag HTML

</body></html>

Tambahkan kode javascript berikut ini:

<script type="text/javascript">var d=document.getElementById("fb-root");if(d){window.fbAsyncInit=function(){jQuery(".fblikecontainer").each(function(c){var e=""+jQuery(this).html();if(e==""){jQuery(this).html('<fb:like href="'+window.location.href+'" show_faces="false"></fb:like>');}});FB.init({appId:"100903993296274",status:true,cookie:true,xfbml:true});var b=new Array();var a=0;jQuery(".fblikecontainer").each(function(c){b[a]=this;a++;});if(b.length>0){a=1;FB.Event.subscribe("xfbml.render",function(c){if(a<b.length){FB.XFBML.parse(b[a]);a++;}});FB.XFBML.parse(b[0]);FB.Event.subscribe("auth.login",function(c){window.location.reload();});}};(function(){var a=document.createElement("script");a.async=true;a.type="text/javascript";a.src="http://connect.facebook.net/en_US/all.js";d.appendChild(a);})();};</script>

Penting! Karena kode javascript ini memerlukan jQuery, jadi pastikan di file header.php, jQuery sudah terlebih dulu disertakan. Atau jika belum pasti, maka tambahkan saja kode php ini di file header.php didalam folder themes yang anda gunakan. Sisipkan di baris paling atas. Berikut kode php untuk me-load jQuery:

<?php wp_enqueue_script('jquery'); ?>

Sekarang, facebook like button plugin untuk WordPress telah siap digunakan. Untuk menyisipkan facebook like button kedalam halaman website, cukup dengan menyisipkan tag

<!-- fblike -->

kedalam postingan yang anda buat.

Selamat mencoba!

Berpengalaman lebih dari 11 tahun dalam bidang IT serta terlibat dalam beberapa training dan proyek IT di beberapa perusahaan, institusi pendidikan, dan institusi pemerintahan, seperti: Indofarma Tbk, Telkom Divre I Medan, Rumah Sakit Haji Pondok Gede Jakarta, TRAC (Toyota Astra Rent A Car) Jakarta, DEKOPIN (Dewan Koperasi Indonesia), SETWAPRES (Sekretariat Wakil Presiden) Republik Indonesia, IBM ASMI, dan masih banyak lagi.

Bambang Sugiarto Lihat semua catatan Bambang Sugiarto
Website Bambang | Twitter | Facebook | LinkedIn

Related Articles

15 Komentar sejauh ini.

  1. Web Design Jakarta says:

    Membuat Facebook Like Button untuk WordPress Lebih SEO Friendly http://t.co/BiNxcob

  2. pRista Fantasia says:

    Kalo yang di wordpress biasa gimana kang ?

    • kalo pake plugin wp umumnya mereka nge-write IFrame nya langsung di HTML (g via javascript).. & so pasti spidder search engine akan mendetect tags IFrame ini.. berbeda dengan metode load dynamic via javascript, tag IFrame di render / d write ke HTML setelah document full loaded di browser, sedangkan d html nya sendiri gada tags IFrame.. :)

  3. exotic car gaallery says:

    ow baaru tau ternyata iframe tu gak baik untuk SEO ya… thanks bro infonya aku dah coba dan berhasil hahaha. kalo yang pake plugin wordpress tu gmn? seo friendly gak tu?

    • Yep.. kalo pake plugin wp umumnya mereka nge-write IFrame nya langsung di HTML (g via javascript).. & so pasti spidder search engine akan mendetect tags IFrame ini.. berbeda dengan metode load dynamic via javascript, tag IFrame di render / d write ke HTML setelah document full loaded di browser, sedangkan d html nya sendiri gada tags IFrame.. :)

  4. Emzeth says:

    kang, saya koq gak bisa ya. kalo button nya di klik gak ada responnya. mohon bantuannya yah…

  5. Rudi says:

    Kalo make di template misal sidebar pake tag apa bos ?

  6. SAM_OYI says:

    Thanks gan…

  7. harrison says:

    oya mas buat id faceboknya di taruh dimana?
    trs buat box_count itu gmn ya?
    thx

  8. gofur says:

    gua setuju boos,kita harus perhatikan juga seo,blog gua sekarang ga banyak gua kasih widget,biar agak ringan dikit,tapi makasih dah sharing boos…

  9. Astral27 says:

    Info yang bagus..
    Biar aku coba..
    :) Thanks teman..

  10. baju bali says:

    wow menarik gan….. coba dulu ya….

  11. […] internet, terutama pengguna di jejaring sosial. Sebagai contoh kecil saja adalah penggunaan facebook like button di seluruh halaman-halaman website. Dengan adanya facebook like button, pengunjung website tidak […]

  12. Penyebaran Informasi Melalui Situs Jejaring Sosial | Krishna Blog says:

    […] internet, terutama pengguna di jejaring sosial. Sebagai contoh kecil saja adalah penggunaan facebook like button di seluruh halaman-halaman website. Dengan adanya facebook like button, pengunjung website tidak […]