As Salam, kali ini Nor ingin berkongsi cara masukkan komen facebook di dalam Blogger. Caranya sama seperti masukkan komen Google+ yang pernah ditunjukkan sebelum ini.
Meletakkan banyak sistem komen akan memberatkan blog anda, tetapi akan membolehkan rakan-rakan anda di media berkenaan berinteraksi dengan blog anda.
Berikut antara langkah-langkah yang perlu diikuti :
- Backup template. Sila rujuk tutorial cara backup template di Blogger.Com
- Pergi ke template dan edit html.
- Ambil kod plugin comment box di facebook.
- Tambah kod pada pembukaan html.
- Tambah kod di bahagian threaded_comment.
- Tambah kod sebelum penutup </body>.
- Save template dan lihat hasilnya.
- Komen facebook sepatutnya berada di bawah komen blogger.
1. Backup template
Amaran!!! Sila backup template anda sebelum mencuba tutorial ini. Sila simpan template di tempat yang selamat. Tiada jaminan tutorial ini akan berjaya pada semua jenis template di blogger :) walaupun saya sudah mencubanya dan berjaya :). Belum cuba, belum tahu.2. Pergi ke template dan edit html
Sila pergi ke template dan klik pada edit html.
3. Ambil kod plugin comment box di facebook.
Untuk kod ini anda memerlukan app id di facebook.Untuk mendapatkan kod sila ke link inihttps://developers.facebook.com/docs/reference/plugins/comments/
Jika tiada app id, boleh gunakan kod di bawah :
Kod ditambah di pembukaan html
<html xmlns:fb="http://ogp.me/ns/fb#">
Kod Facebook dimasukkan di dalam bahagian <b:includable id='threaded_comments' var='post'>
<!--FB Comment Start-->
<div style='width:500px; border-width:1px;border-style:solid; border-color:#c5c5c5'>
<div class='fb-comments' data-width='500' expr:data-href='data:post.canonicalUrl' />
</div>
<!--FB Comment End-->
Kod Facebook dimasukkan sebelum penghujung </body>
<!--FB Comments start-->
<div id='fb-root'/>
<script>(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=221327441271143";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--FB Comments End-->
<div id='fb-root'/>
<script>(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=221327441271143";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--FB Comments End-->
3. Tambah kod pada pembukaan html.
a. Cari kod berikut : <html
b. Tekan CTRL+F , kotak search akan keluar.
Dalam kotak search masukkan : <html
c. Anda sepatutnya menemui kod <html kod asal...>
d. Di sebelah <html tambahkan kod xmlns:fb="http://ogp.me/ns/fb#"
Hasilnya :
<html xmlns:fb="http://ogp.me/ns/fb#" kod asal...>
4. Tambah kod di bahagian threaded_comment.
a. Cari kod berikut :
<b:includable id='threaded_comments' var='post'>
b. Tekan CTRL+F , kotak search akan keluar.
Dalam kotak search masukkan :
<b:includable id='threaded_comments' var='post'>
c. Anda sepatutnya menemui kod <b:includable id='threaded_comments' var='post'>
Jika terdapat tanda segitiga di sebelah kiri, klik tanda segitiga tersebut. Kod penuh akan dipaparkan.
d. Susun atur kod tersebut seperti berikut :
Kod penuh seperti berikut :
<b:includable id='threaded_comments' var='post'>
.
.
.
Kod asal
.
.
.
Kod Facebook akan dimasukkan di sini
</b:includable>
e. Kenalpasti kedudukan kod </b:includable>
f. Sebelum kod </b:includable>, masukkan kod Facebook.
Kod Facebook :
<!--FB Comment Start-->
<div style='width:500px; border-width:1px;border-style:solid; border-color:#c5c5c5'>
<div class='fb-comments' data-width='500' expr:data-href='data:post.canonicalUrl' />
</div>
<!--FB Comment End-->
5. Tambah kod sebelum penutup </body>.
a. Cari kod berikut :</body>
b. Tekan CTRL+F , kotak search akan keluar.
Dalam kotak search masukkan :
</body>
c. Anda sepatutnya menemui kod </body>
d. Sebelum kod </body>, masukkan kod Facebook.
<!--FB Comments start-->
<div id='fb-root'/>
<script>(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=221327441271143";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--FB Comments End-->
<div id='fb-root'/>
<script>(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=221327441271143";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--FB Comments End-->
6. Save template dan lihat hasilnya.
7. Komen facebook sepatutnya berada di bawah komen blogger.
 |
| Gabungan sistem komen facebook dan sistem komen blogger |
No comments:
Post a Comment