在網頁中嵌入 Facebook 與 twitter 社交按鈕

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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=20&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:20px;'></iframe>

按鈕配置

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=20&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'></iframe>

方塊配置

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=63&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:63px;'></iframe>

twitter 的分享代碼

水平按鈕

Tweet

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

垂直按鈕

Tweet

<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