2010-09-27

如何在Blogger加上Facebook留言版

昨天發現一個網站, http://www.allblogtools.com/ 裡面有很多跟Blogger相關的免費範本和一些Blogger的教學小敝步,裡面有一個教學是如何在自己的部落格放上Facebook的留言版, 讓每個朋友都可以使用facebook留言而且真的很簡單, 之前找很多,或是Facebook自己的教學,對

於不懂程式語言的我來說, 真的是太難了(淚~),每次看到一半,就卡住了,沒辦法整個很順的操作完成。


所以覺得這個真的簡單多了,如果看的懂英文的人,可以去這裡直接看原文操作,
http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/  


只要4個步驟:


第 1 步:隱藏Blogger的原有的文章留言功能


原因是你不會想要有2種留言功能出現在你的部落格裡,怎麼作呢?到設定→留言→留言選擇隱藏,醬子就完成了。 


第 2 步:為你的Blogger申請一個Facebook應用程式 ID


再來就是去Facebook裡為你的Blogger申請一個應用程式 ID,到facebook developers這裡輸入你的部落格的名字和網址再選擇所在地區,按Create Application,網址輸入的方式例如:http://myblogname.blogspot.com/。


下一步會要求輸入安全驗証密碼,醬子就完成囉。記得把你的應用程式ID複製起來,等一下就會用到。


第 3 步:加程式碼到你的網頁HTML裡


你必需要將下列幾項程式碼加到HTML裡才能使留言版正常運作,請到設計→修改HTML→勾選「展開小裝置範本」按Ctrl+F開啟尋功能,尋找以下位置




<html

然後加入以下程式碼
xmlns:fb='http://www.facebook.com/2008/fbml'
前後都要都要空一格,醬子才可以哦。以下是範例:
 <html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.........2005/gml/expr' >
再來是尋找以下位置:

<body>
然後按下一行加上以下程式碼: 

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/zh_TW/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
YOUR APP ID換成剛剛申請好的應用程式ID哦。


好了以後再尋找以下位置: 

</head>
在這個位置的前面加上以下程式碼: 

<b:if cond='data:blog.pageType == "item"'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
把綠色的字改成你的部落格的名字,紅色的字改成應用程式ID,橘色的字改成你在Facebook的名字。藍色的字,可以換成你的部落格的LOGO圖像位址,或是可以整列都不要。


現在已經把開啟Facebook的留言功能程式語言加好了,再來就是最後一個步驟了。 


第 4 步:加入Facebook的留言版程式碼


找到下列位置

<data:post.body/>
然後按下Enter到下一行,加入以下程式碼

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url'   expr:xid='data:post.id'/></div>
</b:if>
你可以改變留言版的寬度,在紅色的位置修改。再按Save Template,就完成囉。


使用心得:版媽在使用一陣子之後覺得,雖然可以自動的把留這Post到FB,但是對於部落格的管理者還滿不方便的,無法管理留言內容或是第一時間收到留言通知,醬子還滿感冒的,有想用回原本的留言版了,畢竟比較能夠知道有誰在那裡留言了,不然未來如果超過百篇的文章,不就得一個個去看了。切~

3 則留言:

  1. 決定把Facebook留言功能先關了...反正上面那個點讚也可以留言...醬子比較好管理..

    回覆刪除
  2. 常看到文章寫到程式碼都會特別把他寫在"框框"內
    跟其他文字區別....那種框框有方便的方法讓他呈現出來嗎??
    在blog還是要特別用語法才能呈現?? 不好意思打擾^^ 感激

    回覆刪除
  3. 你可以Google一下HTML的語法教學, 或是copy我文章的框框回去用囉.

    回覆刪除

您或許對這些文章有興趣~