Zi 字媒體

快速在社群網站分享資訊 SNS (Social Network Services) 無非是目前流通資訊最快速的途徑，現在這個時代已經很少人用 Email 分享資訊了，而我們常常需要在 Web 中提供「分享」按鈕來整合不同社群網站。想要張貼資訊到 SNS (Social Network Services)，除了透過各家提供的 API/SDK 之外，大部分的社群網站都能夠藉由網址連結直接進行分享。一般來說，各大社群網站都會提供簡易的 HTTP API 讓使用者進行資訊分享，我們來看看要如何在 Web 中實作，好讓資訊可以快速流通到幾個常用的社群網路。 介紹幾種常用的社群網站連結分享 分享到 Plurk 噗浪 1 http://www.plurk.com/m?qualifier=shares&content={要分享的訊息} 分享到 Twitter 推特 1 http://twitter.com/home/?status={要分享的訊息} 分享到 Line 1 http://line.naver.jp/R/msg/text/?{要分享的訊息} 分享到 Facebook 1 http://www.facebook.com/sharer.php?u={要分享的訊息} 分享到 Google+ 1 https://plus.google.com/share?url={要分享的訊息} 這裡要注意的是由於分享的文字資訊是透過 URL 進行傳遞，請記得要對文字進行 URL Encode。此外 Line 的分享機制僅對行動裝置有效用，最好的方法就是判斷裝置動態產生或隱藏 Line 分享功能。 透過 jQuery Plugin 建立分享按鈕 整合上述的使用方式，我寫了一支 jQuery Plugin，需要的開發者可以直接到 GitHub 下載使用，SnsShare jQuery Plugin 使用範例如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28     SNS Share jQuery Plugin          rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">   class="container">     SNS Share jQuery Plugin (Example)     class="share-to btn" data-sns="facebook">Facebook     class="share-to btn" data-sns="twitter">Twitter     class="share-to btn" data-sns="google+">Google+     class="share-to btn" data-sns="plurk">Plurk     class="share-to btn" data-sns="line">Line (Mobile only)   type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> type="text/javascript" src="./jquery.snsShare.js"> type="text/javascript">     $(document).ready( function () {         $('.share-to').snsShare('Hello World!', 'https://github.com/samejack/SnsShare');     });   分享到 Twitter(在新視窗中開啟) 按一下以分享至 Facebook(在新視窗中開啟) 分享到 LinkedIn(在新視窗中開啟) 點這裡寄給朋友(在新視窗中開啟) 按一下即可分享至 Skype(在新視窗中開啟) 分享到 Reddit(在新視窗中開啟) 分享到 Tumblr(在新視窗中開啟) 按一下以分享到 Telegram(在新視窗中開啟)