Hallo Semua kembali lagi di Artikel Berseri yang di sajikan geo-geo22.blogspot.com
Apa kabarnya ! Semoga dalam keadaan baik baik selalu dan dalam lindungan Tuhan . setelah sebelumnya saya membuat Artikel mengenai Cara menaikan traffic blog dan Cara membuat Fan Page Facebook kali ini saya akan memberikan tutorial mengenai Bagaimana caranya Mengintegrasikan Fan Page Facebook pada Blog dan hal ini tidak terlalu sulit asal teman teman semua melakukannya dengan seksama .Sekurang -kurangnya ada 2 Tutorial yang akan saya bagikan pada teman teman semua
1. Membuat Like Box Fan Page Facebook di Sisi Samping kanan
pertama-tama teman teman tentu harus membuat Fan Page Facebook dulu kalau memang belum punya dan kalau sudah punya teman teman bisa langsung menuju https://developers.facebook.com/docs/reference/plugins/like-box/ dan kemudian teman teman masukan link URL Fan Page Facebook ditanda merah yang saya tunjukan seperti gambar di bawah ini :
klik gambar 1.1 untuk memperbesar
kemudian teman teman pilih klik get code maka akan keluar tampilan seperti di bawah ini :
klik gambar 1.2 untuk memperbesar
sampai disini ada banyak variasi kalau saya sih memilih Html5 kemudian kita copy semua kode yang saya beri tanda merah tersebut dan kemudian kita beralih ke Blog ,kita ke Dasbor kemudian klik layout kemudian kita klik add a Gadget yang ada disisi kanan kemudian kita cari Widget Html /javascript
lihat gambar di bawah ini :
klik gambar 1.3 untuk memperbesar
kemudian kita klik Widget Html/javascript dan kita copy semua kode sesuai petunjuk yang ada di gambar 1.2 dan seperti di bawah inilah hasilnya :
klik gambar 1.3 untuk memperbesar
oke kita lanjut ke Tutorial yang kedua
2. Membuat Like Fan Page Facebook di atas Postingan
Caranya hampir sama dengan Tutorial nomor satu hanya ada beberapa bagian yang cukup sulit tapi saya berharap bisa di praktekan juga ,ok here we go
pertama-tama kita menuju ke https://developers.facebook.com/docs/reference/plugins/like/ dan kemudian teman teman masukan Url fan page facebook di lingkaran yang saya tandai merah dan show facesnya tidak usah di centang untuk mempercantik tampilan dan like button bisa lebih menyatu dengan artikel ,lihat gambar di bawah ini :
klik gambar 2.1 untuk memperbesar
dan kemudian klik get code maka akan ada tampilan seperti dibawah ini :
klik gambar 2.2 untuk memperbesar
di gambar di atas ada 2 kode yang saya tandai merah dan saya beri nomor ,kemudian kita segere menuju ke Dasbor blogger masuk klik template kemudian klik edit Html seperti gambar di bawah ini :
klik gambar 2.3 untuk memperbesar
setelah kita klik edit html maka akan seperti di bawah ini :
klik gambar 2.4 untuk memperbesar
nah coba perhatikan baik baik gambar diatas karena kalau sampai salah template blog kita akan berantakan jadi untuk menghindari hal-hal yang tidak di inginkan silahkan teman teman ke Dasbor trus klik template setelah itu klik tombol back up/restore di pojok kanan atas kemudian download secara penuh template teman teman .
ok kalau sudah mari kita lanjutkan,seperti kita lihat di gambar atas maka kita perlu mencari <body> untuk meletakan kode #1 yang ada di gambar 2.2 lalu bagaimana cara mencari <body> ? kalau saya sih tekan kontrol F dulu lalu masukan kode tersebut dan langsung ketemu ,oh ya kode #1 kita masukan tepat di bawah <body> seperti gambar diatas
perlu di perhatikan juga bahwa bahwa terkadang ada error pada saat memasukan kode #1 dimana letak masalahnya pada kode &appId jadi jika ini terjadi error maka yang kita lakukan mengganti kode error tersebut dengan &appId
klik gambar 2.5 untuk memperbesar gambar
ok sampai disini pekerjaan kita sudah hampir selesai ,seperti kita lihat gambar diatas kita masukan kode #2 dengan meletakannya diatas <data;post.body> , awas jangan sampai salah karena ada sekurang kurangnya 3 <data;post.body> dan saya meletakannya pada <data;post.body> yang kedua sesuai gambar dan maka hasilnya akan seperti dibawah ini :
klik gambar 2.6 untuk memperbesar
akhirnya selesai juga tutorial yang saya sajikan hari ini ,semoga bisa bermanfaat dan jika teman-teman ingin mencopas Artikel saya tolong sertakan juga link blog ini
terimakasih sudah meluangkan waktu membaca blog saya
regards
No comments:
Post a Comment