2014年4月20日 星期日

Blogger安裝Facebook臉書JavaScript SDK

安裝Facebook臉書Social Plugins社群外掛元件時,常常有很多第一次安裝的網友,因為沒有把JavaScript SDK的代碼放上範本,只放上社群外掛元件,這樣會導致安裝失敗,無法呈現元件,這是因為SDK代碼中,還有個AppID需修改,會因不同網站而有所不同,所以要記得修改這部分代碼。




在安裝之前,首先要先取得你的AppID,可以參考:Blogger安裝Facebook臉書AppID,這篇文章。

Mix以安裝Like讚按鈕為例,找出JavaScript SDK的代碼。



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

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

  1. 按下Social Plugns。
  2. 按下Like Button。
  3. 按下Get Code。
  4. 選擇你申請好的App,這就是待會修改要用的AppID
  5. appId=xxx,這就是你的AppID










記得修改xxx為你的AppID,修改完後,在<body>之後,加入以下代碼,然後儲存範本。

<div id='fb-root'/>
<script>(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 = &quot;//connect.facebook.net/zh_TW/all.js#xfbml=1&amp;appId=295900053906547&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>



代碼加入之後的結果。




Blogger的範本是用XHML格式,若直接貼上Facebook臉書所提供的代碼,JavaScript會有單雙引號的問題,會導致語法錯誤,所以要用跳脫字元的方式處理,這段代碼已經處理過,可以直接複製貼上到範本中即可。

沒有留言:

張貼留言