2015-05-27

如何為Blogger加入Facebook 讚/分享/傳送/留言


這幾天不知突然為什麼想要研究如何把我的Blogger重新整理一下,把一些該放的放一放,才知道我很多都忘了,得好好的筆記一下,不然又全忘光了,只能說人的記憶是會隨著年紀而退化的。 


1. 先設定Facebook SDK for JavaScript,之後只需要將個別功能的語法加入即可使用。

打開Blogger的總覽往下找範本→按編輯HTML打開所有語法



將以下的語法複製並貼在起頭為<body>或<body 之後。


<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1****************9',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (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/zh_TW/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

注意:若要將讚/分享中文化,記得將js.src後面的en_US改成zh_TW


2. 放入讚/分享鈕在個別文章結尾處

先去Facebook的開發者網頁找Social Plugin的讚和分享拿code

在語法中找到<data:post.body/>,在其後方加入以下語法

<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-width="450" data-show-faces="true"></div>

注意: FB開發者所給的語法是data-href="你的網站",但因要在個別文章個別按讚/分享,所以要把它改成 expr:data-href='data:post.canonicalUrl'才會對。

上面這個語法是讚和分享放在一起,後來我覺得分開比較好看,所以個別去拿讚和分享的code如下: 


<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" expr:data-href='data:post.canonicalUrl'></div>
<div class="fb-share-button" data-layout="button_count" expr:data-href='data:post.canonicalUrl'></div>
 

3. 放入FB Messenger傳送鈕在個別文章結尾處

在語法中找到<data:post.body/>,在其後方加入以下語法,若有放入讚/分享語法,在其後面或前面都可放置

<div class="fb-send" expr:data-href='data:post.canonicalUrl'></div>

4. 加入FB 留言版 
在語法中找到<data:post.body/>,在其後方加入以下語法

<div class="fb-comments" expr:data-href='data:post.canonicalUrl' data-numposts="5" data-colorscheme="light"></div>

8 則留言:

  1. 查了很多資料只有你的文章可行!謝謝分享!

    回覆刪除
  2. 感謝版主的分享,另外請問版主,要怎麼設定成管理者模式呢?

    我按照網路上的設定方法做都無法成功,謝謝。

    回覆刪除
  3. 好像最近新點的贊都無法計數,不知道問題出在哪?

    回覆刪除
  4. 学习下,新建博客,还有广告怎么加的?

    回覆刪除
  5. 学习下,新建博客,还有广告怎么加的?

    回覆刪除
  6. 学习下,新建博客,还有广告怎么加的?

    回覆刪除

您或許對這些文章有興趣~