Facebook Like Button dan 1 Button

by Sifu Blog Monday, June 04, 2018 0 comments
Banyak pertanyaan daripada rakan-rakan yang ingin tahu bagaimana untuk masukkan button Like Facebook dalam blog masing-masing. So, ini adalah guide berkenaan. Hopefully, boleh dipraktikkan ye.. ;) Bonus kepada Facebook Like ini, saya tambahkan button 1 Google Plus.

Mula-mula sekali, perlu decide di mana nak letakkan button-button ni. Katakan nak letakkan di bawah title entry kita. Contoh macam di bawah ni, di bawah title 'Tambah Gadget HTML/Javascript Untuk Blogger'.

facebook like button

Alright, seterusnya login ke akaun blogger.com anda. Klik pada menu Template.

PENTING : Sebelum buat apa-apa perubahan backup dulu template sedia ada (klik pada button Backup / Restore).


Klik pada button Edit HTML.


Tekan Ctrl+F pada keyboard anda dan cari perkataan <body.


Copy dan paste kod di bawah selepas line <body berkenaan (selepas '>').


<!--Facebook Button Script-->
<div id='fb-root'>      </div>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>


Save template (dengan klik pada button Save template). Seterusnya, agak tricky sedikit, sebab berlainan template akan lain kedudukan code seterusnya. Cari pula perkataan <data:post.body/>. Bergantung kepada template yang anda gunakan, anda mungkin akan jumpa lebih daripada 1 perkataan ini. Anda akan nampak kod seperti ini:



    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>



Copy kod di bawah dan paste sebelum '<b:' dalam window template anda atau sebelum paragraph yang mempunyai perkataan <data:post.body/> berkenaan.


<!--Facebook and Google+ buttons-->
<table width='100%'>
<tr>
<td><fb:like expr:href='data:post.url' font='segoe ui' send='true' show_faces='false'/></td>
<td style='text-align:right' width='10'><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr>
</table>


Siap! Jangan lupa untuk save template anda (dengan klik pada button Save template).

Minta tinggalkan komen di sini sama ada anda berjaya atau tidak dengan guide ini ye.

Labels:

About author: Sifu Blog

Cress arugula peanut tigernut wattle seed kombu parsnip. Lotus root mung bean arugula tigernut horseradish endive yarrow gourd. Radicchio cress avocado garlic quandong collard greens.

0 comments:

Subscribe to: Post Comments (Atom)