RANGKAIAN SOSIAL ANDA

twitterfacebookgoogle pluslinkedinrss feedemail

Assalamualaikum dan Salam sejahtera kepada pembaca dan khasnya kepada Blogger yang mencari-cari widget facebook komen untuk blog.

Sekali lagi, inilah widget yang dinanti-nantikan oleh semua pengguna blogger (khas dari allblogtools dan sempoi corner) dan sekarang hanya ada untuk pelawat Sempoi Corner dan All Blog Tools (eksklusif) , dan ini mungkin blog yang terawal tutorialnya yang akan menerangkan kepada anda langkah mudah untuk mendapatkan kotak komen facebook yang terbaru KHASNYA untuk blogger (BLOGSPOT) blog...


DEMO KOMEN BOX INI



Perhatian: Jika anda rasa anda pernah melihat tutorial ini,(kecuali di allblogtools).Anda salah,ia mungkin kelihatan sama seperti tutorial sebelumnya tetapi entry kali ini adalah yang terbaru dan UPDATED*.Dan banyak masalah telah diselesaikan .Jika anda menghadapi masalah dalam mana2 web yang memberi tutorial ini,cubalah tutorial ini.

Untuk NaikTaraf(update): Jika anda telah mempunyai kotak komen facebook yang lama dalam blog anda dan tak nak kehilangan komen2 anda .Klik di SINI untuk mengetahui cara untuk upgrade dengan mudah.  

AMARAN : Sebelum anda menukar blog kod template anda atau melakukan apa-apa perubahan,Bro nasihatkan agar anda Backup dengan mengKlik DOWNLOAD FULL TEMPLATElink. 

okay.kita bermula disini.


 Apa yang ada dalam kotak komen 


facebook terbaru ini: 

  • Threaded comments : reply to comments.
  • User network : now it’s displaying the comment author not only name, but his profile info as well
  • Permalink to specific comments : Permalinks have now been assigned to each comment so people can share links and be directed to specific comments.
  • Notifications : sent to users will also go to the permalink, making it easier to respond. For example, clicking on the notification below will take you to the permalink of the original comment.
  • 2 Color schemes, regular light, and the new dark colors.
now let’s do it, don’t worry, i know that must of you tried to add it to blogger blogs, with no result, but today you’ll see how to add it in really easy steps and it’s 100% working. but please be careful and pay attention for all the details.
This tutorial is updated.


Langkah 1. Disablekan Default Comments.
Perkara pertama yang anda perlu lakukan adalah DISABLE KAN default comment blogger anda.kerana anda semestinya tak mahu mempunyai 2 kotak komen .

pergi ke account blogger anda,navigate ke 
 settings >> comments dan selepas comment field pilih


Hide ,kemudian skrol ke bawah dan klik 
 Save Settings


Step 2. Generate  Facebook App ID anda.
anda perlu  generate facebook app id anda, ia mudah dan senang. 
hanya pergi kefacebook developers
dan klik + Set Up New Application
tulis nama aplikasi anda, ( tulis nama yang mudah dan singkat ikut suka korang )
dan tanda agree dan klik Create Application
kemudian klik connect tab (on the left tabs-list) atau lihat imej seterusnya.
facebook comments box for blogger
dan isi info berikut.
Connect URL : url blog anda dan mesti di akhiri dengan ending dash 
(for example: http://myblogname.blogspot.com/) .
Base Domain anda mesti taip blogspot.com
kemudian klik strong>agree dan klik Save Changes 
kemudiannya facebook akan generatekan anda banyak info dan anda hanya memerlukan satu sahaja iaitu , App ID:
salin dan simpan di notepad kerana ID itu diperlukan dalam langkah yang seterusnya.Sila lihat gambar dibawah di mana anda akan jumpa facebook App ID anda:.
facebook comments box for blogger
Step 3. Codes Untuk Template anda.
Langkah ini amat penting,anda mesti memasukkan kod berikut untuk memastikan kotak komen anda berfungsi dengan lancar dan baik .
dalam langkah ini kami sediakan kod berikut,

  • xmlns attribute
  • SDK script
  • Open Graph protocol tags

  • Adding the xmlns attribute :
sila pergi ke akaun blogger anda semula dan navigate ke , layout >> edit html >> dan tanda Expand Widget Templates
dan cari kod berikut,
<html
anda akan menemui di kod anda itu,yang dihighlightkan dan masukkan kod di bawah selepas <html 
xmlns:fb='http://www.facebook.com/2008/fbml'
anda mesti tinggalkan sedikit ruang antara kod itu
ini adalah contoh.
 <html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >
  • Menambah the SDK script Code :
cari
<body>
dan tambah kod berikut SELEPASNYA,
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
jangan lupa untuk menukar  APP ID anda kepada app id anda sendiri( anda dapat dari step sebelumnya ).
  • Menambah the Open Graph protocol tags:
copy kod di bawah
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
dan tukar text bewarna yang berikut ,edit di notepad
Tukar MY-SITE-NAME dengan nama yang anda nak untuk muncul apabila pelawat 
Be the first of your friends to like this.
 KLIK LIKE DI PAGE ANDA . (Justin Bieber likes Sempoi Corner)
tukar http://google.com/…/blogger_logo.gif dengan logo blog anda, atau padamkan jika taknak.
Tukar YOUR-APP-ID dengan nombor  application ID anda.
Tukar YOUR-FACEBOOK-PROFILE-ID dengan facebook id profile anda .
selepas buat perubahan ini ,copy dan paste kod ini sebelum:
</head>
sekarang kita dah selesai menambah kod facebook di template anda .Tolong jangan ganggu apa-apa dan sambung di langkah seterusnya.
Step 5. Memuat naik kotak komen ke blogger

template anda.
cari kod berikut.
<data:post.body/>
dan selepas itu ,sila paste kod di bawah
untuk Light Comments box (sperti di demo )
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com ,  Get Yours?</a></b></div>                                 </b:if>
Untuk Dark Comments box ( Jika anda mahukan  comments box dalam dark colors. )
<data:post.body/>
dan selepas itu , sila paste  kod berikut.
For DARK Comments box ( like the one in the demo )
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>

untuk menukar lebar komen box anda sila tukar  450 kepada yang anda mahukan , ia berbentuk pixels,
dan sekarang klik  Save Template , dan WALLOH!! check  blog anda. Bro harap ia cantik dan berfungsi dengan baik.
Demo and Credits.
untuk melihat demo kotak komen,sila klik disini.
tolong jangan alihkan  link saya or atau nama dari widget ini, Bro berusaha keras untuk cari dan alihkan bahasa untuk anda . 



LIKE DAN KOMEN SERTA FOLLOW JIKA BERJAYA.. GOOD LUCK!