Blogger安裝Facebook臉書JavaScript SDK

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

按下Social Plugns。
按下Like Button。
按下Get Code。
選擇你申請好的App，這就是待會修改要用的AppID。
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會有單雙引號的問題，會導致語法錯誤，所以要用跳脫字元的方式處理，這段代碼已經處理過，可以直接複製貼上到範本中即可。

Blog透視鏡

網頁

2014年4月20日星期日