29.11.11

Blogger Tutorial 07. Menambahkan Tombol Facebook Share

Facebook telah mengeluarkan tombol share untuk blogger yang dinamakan fshare. Dengan menambahkan tombol facebook share, maka dapat diketahui berapa banyak sebuah artikel dalam sebuah blog telah di share di facebook.


Ada lima buah model sharing button yang disediakan oleh facebook. Berikut kode dari beberapa model tersebut :

Model 1. Share Button - Floating  Kanan Atas Posting (Kode di bawah ini)
<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='box_count'/>  
</div>


Model 2. Share Button - Floating Kiri Atas Posting (Kode di bawah ini)
<div style="float:left;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='box_count'/>
</div>


Model 3. Share Button Compact - Floating Kanan Atas (Kode di bawah ini)
<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='button_count'/>  
</div>


Model 4. Share Button Compact - Floating Kiri Atas (Kode di bawah ini)
<div style="float:left;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share expr:href='data:post.url' type='button_count'/>  
</div>


Berikut cara memasangnya :
1. Masuk ke blogger dasboard
2. Pilih rancangan
3. Pilih edit html
4. Centang expand widget templates (Tunggu loading sebentar)
5. Cari kode dibawah ini (Untuk mempermudah pencarian gunakan fasilitas CTRL F)
<div class='post-header-line-1'/>

6. Apabila tida ketemu, alternatifnya adalah cari kode dibawah ini (Untuk mempermudah pencarian gunakan fasilitas CTRL F
<data:post.body/>

7. Plih salah satu kode pencarian dari langkah 5 atau 6, apabila sudah ketemu masukkan kode Facebook button yang telah anda pilih tepat diatas kode langkah 5 atau langkah 6.
8. Langkah berikutnya adalah cari kode dibawah ini (Untuk mempermudah pencarian gunakan fasilitas CTRL F)
<html

9. Ganti kode diatas dengan kode dibawah ini
<html xmlns:fb="https://www.facebook.com/2008/fbml"

10. Klik Save templates
11. Tombol facbeook share anda akan muncul pada setiap posting

-Semoga bermanfaat-
Knowledge is an opensource

No comments:

Post a Comment