Blogger 嵌入 Facebook Comments 留言板功能教學

最近看了很多網誌和新聞網頁，下方都會有個 Facebook 的留言板，一時興起也想來弄一個。

用 Facebook 留言板的好處是，FB 帳號比較像實名制，善良的使用者也只有一個Facebook帳號，有名字和頭像，大家比較不敢胡亂留言，減少垃圾留言或機器人洗版的可能。而且留言者可以順便貼到塗鴉牆，等於間接提高文章的曝光度，而且他塗鴉牆朋友回覆他的留言時，原來的這邊的留言板也會同步在此顯示，我覺得這超棒的！等於我的網誌直接從 Web2.0 無痛升級成 Web3.0 了！而我認為社群的核心概念，就是建立在這種無私的分享與良性互動的討論上面。

用 Facebook 留言板的壞處是，畢竟是你介接別人的東西，萬一有一天 Facebook 不爽給你用或甚至倒了，所有留言就會歸零（別說不可能，我當初也以為 Facebook 可以永久快快樂樂使用下去，但直到有一天他無預警的停用我帳號後我才恍然大悟，免費的服務，他才是老大，朕賜你的，才是你的，朕沒給的，你不能要！）。再來就是沒有臉書帳號的人就無法留言（這問題倒是還好，這年頭可能家裡的小狗或陽台的盆栽都有 Facebook 帳號了），最後就是留言的管理問題，基本上你是沒有權限刪除任何一則留言的，就算設了後台管理介面頂多也只能隱藏留言（就跟陳懷生少校一樣，看不見可是他依舊存在），他本人和他的朋友還是都看的見，別問我為什麼，因為你是借用別人的，臉書才是老大，規則他說了算！

原本以為是很簡單設定的東西，但是到真正完全搞定還是花了不少功夫。原因在於研究一些網路上的教學文章，發現隨著 Facebook 不斷的小改版，很多文章都已經不合時宜了，所以才會多花點時間在 try&error，在此還是把我成功的步驟經驗分享一下吧。


在此分為兩種版本，一個是「超級簡易版」，一個是「後台管理版」。「超級簡易版」就是沒有管理功能的版本，把程式碼複製貼上就馬上能用了，適合跟這種有字天書的程式碼不是很熟的朋友。另一種「後台管理版」則設定複雜很多，但好處就是具有管理模式，可以把不想看到的留言給隱藏起來，眼不見為淨，適合喜歡掩耳盜鈴的朋友。


超級簡易版

1. 在 Blogger 後台的「版面配置」找一塊你想放留言板的地方「新增小工具」，類型選擇「HTML/JavaScript」，然後把下面程式碼複製貼上到內容區塊。

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

document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>


像這樣新增一個 HTML/JavaScript 的區塊

2. 按下「儲存」和「版面配置」頁的「儲存排列方式」，搞定！（註）


後台管理版

1. 取得應用程式 ID
首先要去 Facebook 開發人員網頁建立一個新的應用程式（可按我前往），按照網頁的步驟一個個過關斬將輸入完成，而 Website with Facebook Login 那邊記得順便填入你的網誌首頁的URL，總而言之，言而總之，最後就是要取得所謂的應用程式 ID (APP ID)就對了（若有申請好應該可按這裡找到）。

2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID，方法如下：


Facebook查看個人首頁，如果網址是以下這種，那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱

代表你的個人首頁已經命名過了，那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱

進去後會看到「"id":"數字"」，那串數字就是你的帳號ID。


3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾，開始艱辛的修改程式碼的步驟（變動前最好先將整份範本備份一下）。

（可按下Ctrl+F）搜尋 "<head>" (是""裡的字串不包括"")，在這行下方新增一行貼上這兩行：（記得帳號ID和應用程式ID要置換成你剛剛取得的）

<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>



4. 搜尋 "<body" (是""裡的字串不包括"")，在這行下方新增一行貼上以下的程式碼：

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '你的應用程式 ID',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        FB.Event.subscribe('xfbml.render', function(response) {
        });
        FB.Event.subscribe('auth.sessionChange', function(response) {
            // 當 Facebook session 改變時通知
        });
        FB.Event.subscribe('edge.create', function(response) {
            // 當有人按讚時通知
        });
        FB.Event.subscribe('comments.create', function(response) {
            // 當有新留言時通知
        });

    };
(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/all.js#appId=你的應用程式ID&amp;xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


注意要把程式碼裡頭的兩個 "你的應用程式ID" 給置換掉，這個步驟的目的是初始化你的Facebook JavaScript SDK 還有註冊一些事件，當有人按讚和留言時，才會在你（管理者）的 Facebook 通知頁面通知你唷！

5. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼，通常建議都放每篇文章結束後的下方，所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括"")，找到這個位置，在下面新增一行貼上這行：

<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>

注意 data-num-posts 後面的數字代表你想要最多顯示幾則（若有更多則下方會出現「顯示更多...」）， data-width 後面的數字則代表留言板的寬度，這兩個數字都是可以按照個人偏好自行改變調整的。

最後按下「儲存範本」，沒有錯誤的話就大功告成了！


那，如何知道有沒有成功呢？如果留言板出現如下圖那行「公開的回覆」、「管理模式」和齒輪的「設定」按鈕，就代表具備後台管理功能了！

比「超級簡易版」多出上面那行

而我們辛辛苦苦這麼多做這麼多步驟，無非就是為了可以管理呀（不然就用超級簡易版就好了）！按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了，或者你也可以去專屬的後台網站去管理，網址是：https://developers.facebook.com/tools/comments。

若你需要有人一回覆留言或按讚都要通知你的話，可以點右上角的齒輪「設定」去把你的臉書帳號設到版主那一欄，最後記得按下方的「儲存」即可。

如上圖藍色部分，如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的，如果這塊有奇奇怪怪的錯誤資訊，代表你有哪個地方沒設對，可以去 Debugger網站抓一下 bug，網址是：https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區，代表你有哪個環節有問題，請自行照上面的錯誤提示去修改囉！修改完再測一次，紅色區塊消除的話，代表設定成功囉！

這個Debug網頁可以協助判斷應用程式有無設定成功

以上的步驟和程式碼，我是參考最新官方網站的步驟去實做的，保證2012年底前有效，之後若臉書老大不爽又有變動，當然以官方為準囉！


註：如果使用「超級簡易版」用「新增小工具」排放的位置怎麼樣都不滿意，還是想放到每篇文章結尾的下方的話，還是可以的！只要多做「後台管理版」步驟5.的部分，搜尋"<b:includable id='comments' var='post'>" ，然後在下面把「超級簡易版」的程式碼複製貼上就可以了！

[Blogger] 2011夏季版型

可能是因應最近火紅的Google+的推出，Google的各項服務也都做了不小的改版，就連Blogger後台的管理介面，不知不覺中，也改成了下圖的模樣。

一開始覺得很多東西都找不到，但後來熟悉一下就發現介面還蠻清爽的，想想部落格版型也一年多沒換了，那就來換個版型好了！

這次想換個充滿夏天活潑氣息一點的版型，我就拿官方Picture Window的第一個來套用，換個底圖，再小改一下CSS的長寬設定，和加上我原先的一些JavaScript (例如連結Facebook按讚 等等設定)，三兩下就大功告成了！

改版型立即可獲得的好處是，之前舊版型的bug終於不見了，現在每篇文章標題下會發現一排分享的按鈕，其中甚至連「Google的+1按鈕」也內建了，非常方便文章的分享與傳遞！還有文章下方也多了五顆星星的Rating評比，這些都是Blogger內建的功能喔！只是之前被舊版型莫名的bug給封印起來，現在整個版型換掉，封印也自然解除了！


之前的文章如果配色不好看或html tag亂掉的地方就懶得改了(反正會看舊文的朋友應該也不多，這個網誌純粹是自言自語用的 XD)，順便拿掉一些少用的JavaScript程式碼，希望網頁開啟速度能夠快那麼一些些。


對了，我的Google+首頁在此 (https://plus.google.com/113018178858441274797 或 http://gplus.to/ArcherLin)，有興趣者可以加我到你的小圈圈唷！如果還有不得古哥家其門而入的朋友們，可以偷偷把Gmail信箱告訴我，我可以邀請你們使用唷！

Blogger與FeedBurner和Facebook的愛恨情仇

我一向有把網誌的文章同步到Facebook的習慣，而它是透過RSS的「全文輸出」發佈過去的，其實我也不在乎主站流量或者到底會有多少人看我文章(我完全是寫自爽的)，全文同步過去輕鬆自在大家也閱讀方便，但是轉過去的排版時常都會變得亂七八糟，嚴重漏失了我本來要表達的意思，這才是我最Care的地方。

舉例來說，我發現最基本HTML的Table Tag一定不吃，我「精心」製作的表格在RSS裡都變成一坨雜亂的文字，還有圖片自動幫我縮小也就罷了，還常會自動遺失某幾張圖，Youtube的嵌入影片更是一定不會出現，這樣在Facebook上看的人根本看不到我文章所講的圖片或影片，也就不知道我在說什麼。幾於以上種種缺點，於是我下定決心要將RSS改為「摘要輸出」，讓想看我文章的人導回我原本的網誌去看，雖然這樣要另開視窗很麻煩，但也只能是兩權相害取其輕的權宜之計。


其實Google的Blogger後台就有RSS「摘要輸出」的功能了，只要選擇「設定」裡的「網站提供」，在「允許網誌資訊提供」那邊選取「簡短」，RSS就會只開放一個段落或255字元的文字敘述。(方法1)

再者，其實你若仔細研究Blogger的RSS Feed來源，他後面的類型是可以變化成full或summary的...(方法2)
例如：
原先的文章訂閱RSS輸出的網址預設為：http://你的Blog網址/feeds/posts/default
若要強制訂閱「全文輸出」的RSS則為：http://你的Blog網址/feeds/posts/full
若要強制訂閱「摘要輸出」的RSS則為：http://你的Blog網址/feeds/posts/summary

可以改為 summary 屬性就會強制為「摘要輸出」了。

但是我想要的是在「簡短輸出」之餘，還可以在下方有個類似「繼續閱讀...」的小提示和Link來提醒讀者，這在原先Blogger後台提供的陽春功能就有所不足了，於是，我想到了老牌的文章「飼料燃燒器」FeedBurner，一進他的官網才發現，他竟然也被Google買下來了！好吧！還是申請一個來玩玩看，填入Google帳號密碼很快的就申請好了，這裡你可以申請一個「獨一無二的FeedBurner網址」(例如我申請了 http://feeds.feedburner.com/blogspot/archerlin )，你當然還是可以用上面的方法，將FeedBurner的「Original Feed」處填入上方你想要的路徑來達到full或Summary效果。

接下來我介紹比較進階的作法，在「Original Feed」處填原來的 http://你的Blog網址/feeds/posts/default 路徑卻可以達到進階的「摘要輸出」的效果。(方法3)

1. 點選「Optimize」分頁
2. 點選左下方的「Summary Burner」
3. 在此處填寫你想要節錄的字元數(本例是填入300字)
4. 在此處填寫你想要在每篇摘要文章提示的字(本例是填入[Read More...])
   (特別注意！！這裡並不支援中文和HTML語法喔！)
5. 按「Save」存檔即可！

你可以在瀏覽器的網址列打上剛剛申請好的「獨一無二的FeedBurner網址」就可以觀察「燒」出來的RSS你尬不尬意了。(我原先希望[Read  More...]可以自帶超連結Link到該篇文章的，但是FeedBurner不支援HTML語法，只能很殘念的作罷了...希望他將來早日開放阿！)

接下來再回到Blogger的後台剛剛提到的地方，也就是「設定」裡的「網站提供」，在第二個欄位「張貼資訊提供重新導向網址」這邊輸入你在FeedBurner申請好的「獨一無二的Feed網址」，他就會自動將「文章訂閱」的網址導入到你貼的新網址內。

其實比起Blogger原先提供的文章訂閱服務，申請FeedBurner還蠻實用的，除了你可以自訂一個「獨一無二」的RSS網址外，還有個額外好處，就是他可以幫你做訂閱的流量分析，例如多少人「訂」了你的文章，這些人來自何方，每篇文章多少「Click」數多少「View」數都會自動幫你分析的徹徹底底。


最後再把FaceBook上的RSS文章同步網址改掉，也改成剛剛那個FeedBurner的RSS網址。這裡我找了好久最後才找到(在此特別抱怨一下，FaceBook的介面設計真的是超級不直覺的，要不是所有親友大家都在用，大家一起非死不可、死在一起，不然我一定會唾棄他！)

修改方法如下：

1. Facebook「個人檔案」的「塗鴉牆」，其上方的「分享」按鈕下有一個小小的放大鏡和「選項」，點選下去...
   

2. 點下去後，原來選項的位置又會變成「設定」，再點選下去...
3. 點選「已匯入的網站」，就會展開曾經加入過的BLOG/RSS的URL，在這裡就能修改你的RSS連結了！
   (註：如果嫌Facebook老是超慢才去更新你家的RSS，導致你Blog的新文章過好幾天才同步到Facebook可以點這裡的「現在更新」，可以立即更新！)

(又註：如果FeedBurner的各項改變在RSS閱讀器中或Facebook中沒有立即生效，別心急，他也是需要一段時間才能將文章給「燒」好的！)

一不小心又打了這麼多，其實照步驟做是很容易的！在此分享給也有這種需求的部落客們享用囉！

最後，如果你還是不爽「摘要訂閱」，不爽來我網誌，就是喜歡用各種RSS Reader或Google閱讀器觀看全文的人，還是可以在你的RSS Reader輸入以下網址訂閱我的網誌呀！

http://archerworks.blogspot.com/feeds/posts/full

謝謝收看囉！

網誌新增項目介紹之FaceBook「讚」外掛教學

最近又將我的部落格加了點新東西，簡單介紹如下：

1. 每篇文章底下加了FaceBook的「讚」按鈕，這是看了Facebook官方網頁新推出的「Like Box」功能而改良的，我看了覺得挺有趣的，便想把他安裝到自己的網誌裡頭。

與官方教學的程式碼不同之處是，原本範例是只能放在固定的網頁(例如部落格首頁)，我想要放在每篇文章底下，勢必得動態抓取文章的網址才行。於是我開始動工想用Javascript來抓取目標的url，太久沒寫Javascript了很多語法都忘光光了，只記得應該要用location.href來抓取目前的url，還有用document.write()來印出字串。但是我試了兩個晚上，類似「javascript:document.write(location.href);」的語法在那邊兜來兜去，怎麼試都試不成功，程度實在退化的太多了。

後來終於被我試出來了，原來抓取文章網址要用Blogger內的 data:post.url 語法才行，在此分享給大家：


把下面程式碼貼到想要顯示的地方即可。


<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>


以Blogger為例，登入Blogger 的控制台後，進入「版面配置」的「修改HTML」，勾選「展開小裝置範本」，如果你想要貼在文章開頭處請搜尋這一行：

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

然後在這行的下面貼上上面的那坨code就完成了。但如果你要像我一樣貼在文章最後面就要自己尋找位置了(因為每個網誌文章結尾的code都不一樣)，我喜歡貼在最後的原因是因為，你得要看完文章才能決定我寫的這篇「讚」不「讚」阿！放在開頭固然可以吸引人去按，但那對我而言是毫無意義的！我喜歡的是真實的鼓勵而不是那數字上的增減。

2. 文章最後再新增「您或許對這些文章有興趣:」的widget。這個就簡單多了，只要登入「LinkWithin」的官網去填一填資料，馬上就有一段程式碼可以貼了...在此就不多加贅敘。

3. 左欄最下方新增「KOUMIS試聽貼紙」，這是我老弟最近極力推薦的創作歌手，我也覺得挺清新好聽的，所以就放上來幫她打個免費廣告，這也是只要複製貼上以下的程式碼到你想要放的地方就好：


<div id="koumisBlogStick" style="width:160px;height:400px;"></div>
<iframe id="rFrame" width="0" height="0" frameborder="0" src=""></iframe>
<script type="text/javascript" src="http://www.koumis.cc/BlogSticker/js/koumis.js"></script>


大家可以點來聽聽看，真的是很難得一聞的Vocal唷！如果大家還不認識Koumis蓓麗的話，除了可以去她的官方網站瞧瞧或加她的Facebook粉絲外，在此要內舉不避親的推薦我老弟寫的「介紹文」和「CD開箱文」。(我老弟也是愛攝影、愛寫文章的文藝青年！最重要的，他目前還是單身！)


其實還有很多想新增的元素，但是我的網誌開啟速度已經很慢了，不想變得更慢，故在此作罷，其實對我而言，「捨棄」永遠比「留下」要困難的多阿！

[Blogger] 再換個版型

剛剛閒來無事，再換個Blogger的版型，其實還是套用Google預設的版型，因為內嵌了很多JavaScript的緣故，懶得一個個慢慢加回去，套用預設版型相容性還是最高。

這次以更精簡為主，選擇白底黑字的清爽版面，也把一些沒用的東西都拿掉了，希望Loading速度能夠更快一些，畢竟我的網誌，重點是文字而不是其他花俏的介面。

我會放幾個Google小廣告，純粹是想支持一下Google而不是想賺錢，畢竟他都沒收半毛錢，提供我這麼好用的部落格平台(當然還有信箱、相片、文件、日曆、閱讀器...等等免費又強大的服務)，放個他家的廣告支持他也是應該的。

剛剛整理文章時無意間發現，文章最下面剛設不久的「反應」，還真的有人點耶，哈哈！依舊還是[小遊戲]植物大戰殭屍這篇投票率最高，大部分都投「有趣」和「實用」，有一個投「難過」，該不會是留言那個找不到完整版遊戲下載的小朋友吧？哈哈！

太灰暗了

有人反應我的部落格實在太灰暗了，不知道指的是文章還是版型，希望他指的是後者，於是乎我來換個開朗點的版型，舊的黑底白字其實看久了也挺刺眼的，最後順便加個「...繼續閱讀」讓版面清爽一點。希望我在整頓心情、剪個俐落髮型、改頭換面，連部落格也換個風格後，重新出發，心境和運氣也能隨之轉好，最好幸福女神也能隨之降臨，謝謝。

千里之行，始於足下

從以前到現在，一直想要有個簡單的記事的Blog，現在 Web 2.0如此蓬勃地發展，數以萬計的部落客們每天勤奮的在寫文章，End User當起了Content Provider ，在滿足瀏覽者的需求，在猶恐失之的trace每週每日的流量，在放Google AdSense幻想收到第一張Google給你的支票......等等。其實也不太差我這個部落格，甚而我連Blogger也稱不上，因為我根本沒有心力去弄這些東西，也不會每天定期更新文章。

想過無名、樂多、或是Pixnet之類的平台，不是華而不實、充塞廣告，就是連線緩慢、介面繁雜。甚至想過自己架一個(以前大學同學用 MovableType 架一個給我用了一陣子)，不是做不到，只是「懶」而已，終於當Google合併掉Blogger後，有個乾淨簡單的小空間可以使用了(重點是Google還把他做出中文介面了)，這裡就當作是我心情抒發的小小垃圾桶吧......你不會看到太多有言之有物的東西、闡述技術的文章、有的只是一些擲地無聲的斐言贅語罷了。

說這麼多，倘若你仍執意要看下去，甚至把我加入書籤，那我只能說，你真是我的知己阿...我不渴望被人瞭解，但我渴望與人分享，希望路過的人能不吝留個言說說您的看法或指教，「分享」才是部落格的精神與真諦，我自以為著。