2014年4月21日 星期一

Blogger安裝Facebook臉書Like讚按鈕

Social Plugins社群外掛元件Facebook臉書重要的網路行銷工具,其中Like讚按鈕,是一個最基本的互動介面,可以讓網友快速地表達意見,且不會對網站造成負面效果,而網頁也會因為被送了一個讚,在Facebook臉書上曝光,進而帶來更多新的流量。



Mix將在每篇文章尾端安裝Facebook臉書Like讚按鈕,安裝步驟可以分4個部分:

  1. 安裝UserID,可以參考:Blogger安裝Facebook臉書UserID,這篇文章。
  2. 安裝AppID,可以參考:Blogger安裝Facebook臉書AppID,這篇文章。
  3. 安裝SDK,可以參考:Blogger安裝Facebook臉書JavaScript SDK,這篇文章。
  4. 安裝Like讚按鈕

如果你之前曾經安裝過Social Plugins社群外掛元件,也已順利安裝了UserIDAppID,與JavaScript SDK,就略過第1,2,3步驟,直接跳到第4部份,進行安裝Like讚按鈕



此為第4部份安裝Like讚按鈕Mix將到官網設定屬性,產生相關代碼,再把代碼放入Blogger文章尾端。

網站名稱:Facebook臉書Social Plugins社群外掛元件

網站地址:https://developers.facebook.com/docs/plugins

  1. 按下Social Plugns。
  2. 按下Like Button。
  3. 按下Get Code。
  4. 選擇你申請好的App。
  5. 產生出來的代碼。











這個是固定網址的代碼,data-href屬性就是要按讚的URL,不過Mix希望能夠在每篇文章都能有個Like讚按鈕,並且只顯示Like讚按鈕,不要顯示Share分享按鈕,所以使用每篇文章的網址來取代固定網址,每篇文章的網址如下:

data:post.url

將原代碼,修改成為以下代碼:

<div class='fb-like' data-action='like' data-layout='standard' data-share='false' data-show-faces='false' expr:href='data:post.url'/>



至於要放在文章頂端或尾端,看個人喜好來決定,Mix是放在文章尾端,與原本的分享按鈕放在一起,接下來Mix要來找到文章尾端的代碼,然後插入準備好的代碼。

  1. 範本。
  2. 編輯HTML。





Ctrl+F,搜尋這段代碼。

<b:includable id='shareButtons' var='post'>



發現這段代碼。





在<data:top.shareToPinterestMsg/></span></a></b:if>之後,插入代碼,然後儲存範本。

代碼加入之後的結果。




完成之後,Mix測試看看Like讚按鈕的效果如何。

  1. 文章尾端有很多小按鈕,接著下方有個讚按鈕,按下讚按鈕。
  2. 可以輸入一些說明,然後按下關閉結束。







針對每篇文章,成功地按下讚後,同時也會出現在Facebook臉書的塗鴉牆上。




5 則留言:

  1. 你好~
    照著四篇文章的步驟走了還是沒辦法成功裝上去,我可以把我的html寄給你請你幫我看嗎?

    謝謝:)

    回覆刪除
  2. 版主您好,謝謝您的分享!我按照四步驟做了, 分享與like按鈕也放上去了,可是它們連結到的是Facebook developer專頁而不是我的粉絲專頁,請問我是哪裡會出了錯呢?

    回覆刪除
  3. 代碼中的appId,userId,要改成你的。

    回覆刪除
  4. 版主你好,不知道是不是我更換其他範本的關係,想要安裝字體為"微軟正黑體"及fb like&share都沒任何改變,可否請版主幫我看一下,感恩~~~~謝謝!

    回覆刪除