快速在社群網站分享資訊
SNS (Social Network Services) 無非是目前流通資訊最快速的途徑，現在這個時代已經很少人用 Email 分享資訊了，而我們常常需要在 Web 中提供「分享」按鈕來整合不同社群網站。想要張貼資訊到 SNS (Social Network Services)，除了透過各家提供的 API/SDK 之外，大部分的社群網站都能夠藉由網址連結直接進行分享。一般來說，各大社群網站都會提供簡易的 HTTP API 讓使用者進行資訊分享，我們來看看要如何在 Web 中實作，好讓資訊可以快速流通到幾個常用的社群網路。
介紹幾種常用的社群網站連結分享
分享到 Plurk 噗浪
http://www.plurk.com/m?qualifier=shares&content={要分享的訊息}
分享到 Twitter 推特
http://twitter.com/home/?status={要分享的訊息}
分享到 Line
http://line.naver.jp/R/msg/text/?{要分享的訊息}
分享到 Facebook
http://www.facebook.com/sharer.php?u={要分享的訊息}
分享到 Google+
https://plus.google.com/share?url={要分享的訊息}
這裡要注意的是由於分享的文字資訊是透過 URL 進行傳遞，請記得要對文字進行 URL Encode。此外 Line 的分享機制僅對行動裝置有效用，最好的方法就是判斷裝置動態產生或隱藏 Line 分享功能。
透過 jQuery Plugin 建立分享按鈕
整合上述的使用方式，我寫了一支 jQuery Plugin，需要的開發者可以直接到 GitHub 下載使用，SnsShare jQuery Plugin 使用範例如下：
<html>
<head>
<title>SNS Share jQuery Plugin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>SNS Share jQuery Plugin (Example)</h2>
<button class="share-to btn" data-sns="facebook">Facebook</button>
<button class="share-to btn" data-sns="twitter">Twitter</button>
<button class="share-to btn" data-sns="google+">Google+</button>
<button class="share-to btn" data-sns="plurk">Plurk</button>
<button class="share-to btn" data-sns="line">Line (Mobile only)</button>
</div>
<!-- Include JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./jquery.snsShare.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('.share-to').snsShare('Hello World!', 'https://github.com/samejack/SnsShare');
});
</script>
</body>
</html>
2 comments for “如何快速分享資訊到社群網站 (jQuery Plugin)”