首頁 / CompScience / Programming / Languages / JavaScript / ※2012※在Blogger上加上Facebook「讚」按鈕

※2012※在Blogger上加上Facebook「讚」按鈕

首先,進到Facebook的Core Concepts › Social Plugins › Like Button,在Step 1 – Get Button Code這裡填寫相關資料

那個URL to Like不用管,因為之後會再改。Send Buttonㄚ琪也不選,不過你可以試試看,它會多一個寄送的按鈕。Show faces,ㄚ琪也不選,選擇的話會出現按Like人的圖示。

按Get Code按鈕

請注意,This script uses the app ID of your app請依你自己建立的應用程式來選擇。

黃色框框內的內容不要用,因為丟到Blogger的Template無法使用,改使用這樣的代碼:

<div id=’fb-root’/><script src=’http://connect..net/en_US/all.js#appId=?????&amp;xfbml=1’/>

這個appId就是黃色框框內appId那串數字,當然不要照這圖來抄,不能跑可不要怪我。

或是<div id=’fb-root’/><script src=’http://connect.facebook.net/zh_TW/all.js#appId=?????&amp;xfbml=1’/>

這是給中文用的。

接著到Blogger的Template

很重要: 修改 Template前請先備份存檔


修改步驟

1.版面配置 (Template) → 修改 HTML (Edit HTML) → 把 展開小裝置範本 (Expand Widget Template) 打勾 來編輯範本的完整 HTML

2.將第一部分的程式碼,貼到  <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>之後的下一行 


3. 將按鈕置於文章標題前:
在 <h3 class=’post-title’> 代碼前加入以下代碼,也有可能是<data:post.title/>這樣的代碼,不過會有很大一段的看不懂的代碼,請小心服用:

<div class=”fb-like” data-href=”http://ijx.blogspot.com” data-send=”false” data-width=”450″ data-show-faces=”false”></div>

data-href改成expr:data-href,http://ijx.blogspot.com改成data:post.url

或許你也可以找<p><data:post.body/></p>這樣的代碼,放入按鈕程式碼,不同的置法,會顯示在不同位置,也請小心服用。

其他部落格程式碼請參考官網說明: Like Button – Facebook

↓ 按鈕樣式如下

Print Friendly, PDF & Email
馬上成為工作達人的Fans

About ㄚ琪

工作達人Fun Taiwan的創辦者及總編,可以在這裡更認識他。

發表迴響

你的電子郵件位址並不會被公開。 Required fields are marked *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Scroll To Top