Site icon Soul & Shell Blog

如何快速分享資訊到社群網站 (jQuery Plugin)

SJ

快速在社群網站分享資訊Like - Thumb Up

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>

 

Exit mobile version