標籤

心情 (42) 好店報報 (10) 好書分享 (1) 食記 (2) 媽媽經 (31) 遊記 (11) Android (4) Blogger (12) Desire (2) facebook (3) LED光源 (1) Live Space (25) Money (5) Movie (5)
Dreams come true!

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. 学习下,新建博客,还有广告怎么加的?

    回覆刪除

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