bloggerads

2013年4月20日 星期六

自己的Google Blogger加入FaceBook讚按鈕


先選擇範本→編輯HTML



首先要看這三個說明:

綠色字-註解,不用理會沒關係
藍色字-原程式碼
紅色字-加入該程式碼


下面有兩段程式碼,我選擇第二種,加在文章頁腳做說明

'1.----加在文章頁身body----------------------------------------------------------

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <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'>
  
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height: 65px;'/>

        
<data:post.body/> 



'2.----加在文章頁腳footer----------------------------------------------------------

<div class='post-footer'>



<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height: 65px;'/>

<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>

'----------------------------------------------------------------------------------------


點選編輯範本,可以用ctrl+F搜尋 "post-footer'>" 關鍵字
找到後,如下圖1528行

插入紅色的程式碼如下,然後按儲存範本!


完成!如下圖


----

參考:
http://greentea99.blogspot.tw/2013/01/google-bloggerfacebook.html
http://littlebmix.blogspot.tw/2012/07/google-bloggerfacebooklike-button.html
http://design-forces.blogspot.com/2011/10/html-blogger-facebook.html



沒有留言:

張貼留言

bloggerads down