2011年11月7日 星期一

在Blogger中嵌入Facebook分享按鈕

(http://www.iconfinder.com/icondetails/34144/122/button_facebook_name_share_icon)

目前在blogger中加入Facebook分享按鈕(share button),有兩種方式。



方法一:
1. 使用blogger內建的元件,登入Blogger 的控制台,點選『版面配置』再點『網誌文章中的編輯』,如下圖。



2.  此時會展開一個小視窗,裡面有『 顯示分享按鈕』打勾即可。一併幫你加入twitter、facebook、google+ 等分享按鈕,如下圖。但facebook不會有計數功能。


 方法二:
 放置在標題下方,facebook的『讚』及『分享按鈕』,並且有計數功能,看到此文章被多少人分享。
1. 登入Blogger 的控制台,點選『範本』再點『修改HTML』,此時會展開一個小視窗,並且在『展開小裝置範本 』打勾。

2. 按ctrl+f 搜尋 <div class='post-header-line-1'/> ,將下列語法貼至此行下面即可,若搜尋到多行,選擇最上面那行。



加入『讚』的語法

<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>



加入『分享按鈕』的語法

 <div style='float:right; margin-left:10px;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>

附註:div是為了讓分享按鈕靠左,如不需要可移除。