Element XD lab
哥教的不是CG,是偷雞
快速導引

【Blogger + FB】在文章頭尾安裝『Facebook讚』按鈕 - html版

就像Google+1按鈕一樣,如果我們想為每一篇文章加上Facebook按鈕的話,應該怎麼做呢?


基本步驟有四
1.取得fb:app_idfb:admins的兩串數字
2.將上面兩串數字替換掉以下對應的數字,置入<head>這一行之後
<meta content='xxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxxxx' property='fb:app_id'/>
3.在<body 這一行後面置入代碼
4.選擇放留言板的位置,置入代碼


前三步驟請按照這一篇的方式安裝過Facebook留言板,基本上是通用的。

做完前三步驟之後

選擇放讚按鈕的位置,置入代碼


取出下半部的讚按鈕代碼,更換網址,將我們一開始打的網址,置換成每一篇文章的網址


這裡是我們一開始申請app時候填入的網址,表示讚按鈕回應的是這個網址
<div class="fb-like" data-href="http://www.thephilko.com/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div>


將固定網址改成該篇文章的網址,這樣讚按鈕回應的,會是每一篇文章的數目
<div class="fb-like" expr:href='data:post.url' data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div>


或者用這簡潔版語法(刪除未填入數值的寬高)
<div class="fb-like" expr:href='data:post.url'  data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div>




這邊示範的位置,是跟這一篇【社群】在文章頭尾安裝『Google +1』按鈕放在一起。

搜尋"post-header-line-1",如果你已經跟著Google+1按鈕這一篇安裝過,應該已經具備了判斷式,跟Google+1按鈕的語法,這時可以將整塊Facebook按鈕語法放在Google+1語法之前或之後都可以。



要放在文章尾端也是一樣

請搜尋"post-footer-line",找到Google+1的語法,放在之前或之後就可以了。


完工~
技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved