Meta Tag Facebook Open Graph NextWapBlog Dan Cara Memasangnya

Meta Tag Facebook Open Graph NextWapBlog Dan Cara Memasangnya

         Kali ini saya akan share kembali cara memasang meta tag facebook open graph tapi bedanya ini untuk nextwapblog, code ini saya ambil dari OFFICIAL CSS jadi jika ada yang tidak berfungsi silahkan kunjungi saja blog tersebut.

Di sini saya tidak akan bicara panjang lebar tentang facebook meta tag ini, karena saya tau anda mencari postingan ini berarti sudah faham untuk apa dan kegunaannya.

Sebelum codenya di pasang pada blog baca terlebih dahulu keterangan lengkap yang telah saya tulis di bagian bawah.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
 {% if active_page == 'home_page' %}  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ site.url }}"/>  
 <meta property="og:type" content="website"/>  
 <meta property="og:title" content="{{ page_title }}"/>  
 <meta property="og:description" content="{{ page_description }}"/>  
 <meta property="og:image" content="  LINK-LOGO-ATAU-THUMBNAIL-ANDA "/>  
 {% elseif active_page == 'singlepost_page' %}  
 <script>  
 $(document).ready(function(){  
 var fbOgp = $('#post-{{ post.id }} < img');  
 $('meta[property"og:image"]').attr('content', fbOgp);  
 });  
 </script>  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ site.url }}/{{ post.link }}"/>  
 <meta property="og:type" content="article"/>  
 <meta property="og:title" content="{{ post.title }}"/>  
 <meta property="og:description" content="{{ post.content|striptags|slice(0,300) }}"/>  
  <meta property="og:image" content=" "/>  

 {% elseif active_page == 'singlepage_page' %}  
 <script>  
 $(document).ready(function(){  
 var fbOgp = $('#post-{{ page.id }} < img');  
 $('meta[property"og:image"]').attr('content', fbOgp);  
 });  
 </script>  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ site.url }}/pages/{{ page.link }}.html"/>  
 <meta property="og:type" content="article"/>  
 <meta property="og:title" content="{{ page.title }}"/>  
 <meta property="og:description" content="{{ page.content|striptags|slice(0,300) }}"/>  
  <meta property="og:image" content=" "/>  

 {% elseif active_page == 'view_video' %}  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ view.link }}"/>  
 <meta property="og:type" content="video"/>  
 <meta property="og:title" content="{{ view.name }}"/>  
 <meta property="og:description" content="{{ view.description }}"/>  
 <meta property="og:image" content="{{ view.thumb }}"/>  
 {% elseif active_page == 'view_mp3' %}  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ site.url }}"/>  
 <meta property="og:type" content="music"/>  
 <meta property="og:title" content="{{ view.name }}"/>  
 <meta property="og:description"content="{{ view.description }}"/>  
 <meta property=\"og:image\" content="{{ view.thumb }}"/>  
 {% elseif active_page == 'view_apk' %}  
 <meta property="fb:app_id" content="  FACEBOOK-APP-ID-ANDA "/>  
 <meta property="og:url" content="{{ site.url }}"/>  
 <meta property="og:type" content="application"/>  
 <meta property="og:title" content="{{ view.name }}"/>  
 <meta property="og:description" content="{{ view.description }}"/>  
 <meta property="og:image" content="{{ view.thumb }}"/>  
  {% endif %}  

Abaikan tulisan berwarna merah jika anda sudah memasang library jQuery

Ganti tulisan berawarna biru dengan semantik tag post anda sendiri cari di post.html ada diatas twig code berikut {{ post.content|raw }}. hal ini agar thumbnail yang tampil bisa sesuai dengan postingan saat artikel dibagikan ke Facebook jadi berhati-hatilah

Edit bagian yang sudah saya tandai dengan warna hijau, untuk app id silahkan buat dulu caranya bisa cari di google.

Letakan code tersebut di header.html di antara meta tag nextwapblog ingat pasang di template mobile dan desktop, lakukan pengujian di Debugger - Facebook for Developers dengan memasukan url blog NWB anda jika hasil tidak muncul klik Kurangi Lagi.

Selamat mencoba . ..

AntarezPedia

Percayalah Tidak Ada Hasil Yang Menghiyanati Usaha Dan Tidak Akan Ada Usaha Yang Berahir Sia - Sia.

Subscribe to receive free email updates: