經過以下步驟；從取得 App ID 與 "程式碼" 在依照 Blogger 規則做了程式碼整理與安置，到後面整個版面圖示的微調。經過這幾個步驟後，你就可以把 Facebook 相關元件放置完畢。 q(❂‿❂)p
先期準備
請先到 Facebook Developer 登錄成為開發者。完成以後，點選上方藍色橫列中的 My Apps 並且選擇 Regiser as a Developer
接著請在彈出視窗中的右邊選擇 "是" 後按下 "登記" 後他會跳出一個視窗你按 "完成" 既可
他要你 Add a New App 在這邊你選擇右邊的 Website 後來到另一視窗 Quick Start for Website
填入你的部落格 "網址" 後；會跳出另一視窗
按下 "Create New Fackbook App ID"
在這邊你要選擇一個 "類別" 後按下 Create App ID
基本上這樣就完成了。下面有個小測試，你可以跳過 (•ิ_•ิ)?
因為他只是讓你測試你的網站跟 Facebook 有沒有連接上，測試完後你也是要把他移除的，所以說；你可以跳過 (✿◠‿◠)
程式碼取得
Facebook 臉書 Social Plugins 社群外掛元件，我們依序把留言 Comments 讚 Like 分享 Share 這三項元件，所需要的程式碼一次把他準備好 q(❂‿❂)p1. 留言 Comments 如下圖選擇 (1) Comments (2) 部落格網址 (3) 留言寬度 (4) 顯示留言篇幅
- 在這邊可以選擇你喜歡的樣式，只有圖示 2. plugin code 不一樣。
- 網站文章前面使用目前的樣式，文章頁尾我是選 (3) standard
程式碼整理
這樣基本上程式碼都有了，下面要把程式碼做一下調整才能使用順暢。這個你只要貼一個就好，你需要增加黃色部分 //<![CDATA[ 與 //]] 不然在 "還原" 時會產生錯誤訊息。
你要增修兩個部分，其他在依據你的範本再去做微調。
- 原來的網址 data-href='http://jesse-webs.blogspot.com'
要換成 expr:data-href='data:post.url' 才能正確抓到每一篇文章的位置。
- 增加 "判斷式" 外面加一層 item 判斷，只在文章頁面時顯示。
<b:if cond='data:blog.pageType == "item"'>
你的 Plugin code 要放在裡面
<div style='padding-bottom:5px;'/>
</b:if>
程式碼安置至範本位置
Favebook 指示將此程式碼放置於 <body> 內，在這裡我將放置於 </body> 前。
這裡可要注意一下囉，放置留言板、讚與分享位置；這有分在文章前與文章後。
- 留言板
<div class='post-footer-line post-footer-line-3'/>
中間有不定數量的代碼
</div>
放在這位置
</b:includable>
- 讚與分享位置 fb-link 頁首放置
<div class='post-header-line-1'>
放在這位置
- 讚與分享位置 fb-link 頁尾放置
(這敘述；他有兩個位置，放在第二個；後面)
<div class='post-footer-line post-footer-line-1'>
放在這位置
- 留言框 data-width='650' 這個數值，依你版面寬度去做微調。
<div style='padding-top:25px;'> 這個數值可以調整與上面元件的距離。 - fb-link 頁尾放置
<div style='padding-bottom:5px;'/> 這個數值可以調整與下面元件的距離。
後續須注意事項
- 網址問題，這部分牽涉到 ccTLD 這部分可以去參閱 Blogger 網址從 tw 轉回 com 但是什麼時候會取消 NCR 這只有看 Google ╮(╯▽╰)╭
- 後綴網址是 .com 所以我用 expr:data-href='data:post.url'
- 後綴網址是 .tw 建議使用 expr:data-href='data:post.canonicalUrl'
因為不管訪客在 jesse-webs.blogspot.tw 或是 jesse-webs.blogspot.fr 這時 Facebook 都會去找真實網址 jesse-webs.blogspot.com 的統計資料，就能讓 "讚" 統計、其他 Facebook 外掛工具的數據正常了。
沒有留言:
張貼留言