Cara menambahkan komentar facebook ke blog
Tanpa bertele-tele, langsung ke tujuan saja ya...
Langkah #1. Silahkan login dan masuk ke dalam dashboard blogger sobat. Setelah itu masuk ke bagian menu Template > Edit HTML.
Langkah #2. Tambahkan kode script dibawah ini tepat dibawah kode expr:class='"loading" + data:blog.mobileClass'>
<!-- script atm -->
<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App-id-kamu',
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>
<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App-id-kamu',
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>
untuk lebih tepatnya kode expr:class='"loading" + data:blog.mobileClass'> berada dibawah kode <body .
Nanti hasil akhirnya akan sepertinya dibawah ini :
<body
expr:class='"loading" + data:blog.mobileClass'>
<!-- script atm -->
<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App-id-kamu',
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>
expr:class='"loading" + data:blog.mobileClass'>
<!-- script atm -->
<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App-id-kamu',
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>
Langkah #3. Letakkan kode script dibawah ini dibawah Kode </article> jika tidak ada kode </article> letakkan saja dibawah kode <data:post.body/> (yang terakhir)
<!-- facebook comments atm -->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
$(window).bind("load", function(){
var container_width = $('.fbbox-comments').width();
var fburl=(window.location.href);
var fbfix=fburl.indexOf('?');
var fburlfix = fburl.substring(0, fbfix != -1 ? fbfix : fburl.length);
$('.fbbox-comments').html('<div class="fb-comments" ' +
'data-href="' + fburlfix + '"' +
' data-width="' + container_width + '" data-num-posts="5"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
<div class='fbbox-comments' style='width:100%;margin-top:20px'>
<div class='fb-comments' data-num-posts='2' data-width='680' expr:data-href='data:blog.url'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
$(window).bind("load", function(){
var container_width = $('.fbbox-comments').width();
var fburl=(window.location.href);
var fbfix=fburl.indexOf('?');
var fburlfix = fburl.substring(0, fbfix != -1 ? fbfix : fburl.length);
$('.fbbox-comments').html('<div class="fb-comments" ' +
'data-href="' + fburlfix + '"' +
' data-width="' + container_width + '" data-num-posts="5"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
<div class='fbbox-comments' style='width:100%;margin-top:20px'>
<div class='fb-comments' data-num-posts='2' data-width='680' expr:data-href='data:blog.url'/>
</div>
</b:if>
Langkah #4. dan yang terakhir, letakkan kode CSS Dibawah ini tepatnya diatas kode </b:skin> atau kode </style>.
/* facebook comments atm */
.fbbox-comments {
box-sizing: border-box;
-moz-box-sizing: border-box;
background:#fff;
border:1px solid #e5e5e5;
margin: 0 0 20px;
}
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;
}
.rich-snippet {
padding:10px;
margin:15px 0 0;
border:3px solid #eee;
font-size:12px;
}
.fbbox-comments {
box-sizing: border-box;
-moz-box-sizing: border-box;
background:#fff;
border:1px solid #e5e5e5;
margin: 0 0 20px;
}
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;
}
.rich-snippet {
padding:10px;
margin:15px 0 0;
border:3px solid #eee;
font-size:12px;
}
Save!
mudah bukan?
Jika ada pertanyaan komentar aja dibawah ☺
Post a Comment