2014年4月29日 星期二

Blogger安裝首頁Facebook臉書Like讚按鈕

除了在每篇文章尾端安裝Facebook臉書Like讚按鈕外,Mix也希望在首頁上安裝Like讚按鈕,這代表著整體網站的觀感,是否值得讀者按個讚, 首頁網址是固定的,不會像每篇文章不同而變動,相對地在安裝上,也是能夠很快速地上手。



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. 產生出來的代碼。












這個是固定網址的代碼,把xxx取代成你網站的首頁網址。

<div class="fb-like" data-href="xxx" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>



複製代碼後,Mix利用新增小工具,要把Like讚按鈕代碼加入到Blogger版面上。

  1. 版面配置。
  2. 新增小工具。
  3. 選擇HTML/JavaScript的小工具,按下加入。
  4. 內容,貼上剛剛複製的代碼。
  5. 儲存。











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

  1. 在首頁,按下讚按鈕。
  2. 可以輸入一些說明,然後按下關閉結束。







沒有留言:

張貼留言