Facebook 常見的社交按鈕有兩種：Facebook Share 與 Facebook Like，不過前者已經不在 Facebook 官方提供的 Plugin 列表中，連到舊的 Facebook Share 說明頁面會自動導向 Facebook Like 的說明頁面，看起來 Facebook 似乎有意以 Like 取代 Share 的地位。雖然如此，兩種功能還是有其不同的定位，目前也都能夠共存並用。關於兩者差異的說明，可以參考這篇文章（英文）。下面則是 Facebook 與 twitter 各種社交功能與外觀的顯示範例與分享代碼。
Facebook Share 的分享代碼
按鈕配置
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
方塊配置
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">分享</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Facebook Like 的分享代碼
標準配置
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font=tahoma&height=20"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:20px;'></iframe>
按鈕配置
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font=tahoma&height=20"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'></iframe>
方塊配置
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=box_count&width=90&show_faces=false&action=like&colorscheme=light&font=tahoma&height=63"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:63px;'></iframe>
twitter 的分享代碼
水平按鈕
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' href='http://twitter.com/share' expr:data-url='data:post.url' expr:data-text='data:post.title'>Tweet</a>
垂直按鈕
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' href='http://twitter.com/share' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical'>Tweet</a>
參考資料
- Like Button - Facebook Developers
- Tweet Button | Twitter Developers
- Facebook Like Button Vs. Facebook Share: Why I’m Keeping Both
- [Blogger] 臉書的「分享」、「讚」推文按扭語法分享-靖 ● 技場
- 在Blogger裝置具有計數功能的Facebook分享按鈕 | 哲生博客 Jason Blog
- 在Blogger嵌入Facebook的讚(Like)按鈕 | 哲生博客 Jason Blog
- [教學] Blogger當中加入facebook 讚！ Add facebook like button in Blogger template
- Official Twitter Share Button (Tweet Button) for Blogger ~ Blogger Widgets
沒有留言:
張貼留言