1. Home
  2. Programming-網頁語法-JavaScript
    3. [JS] 社群分享按鈕

[JS] 社群分享按鈕

3月 21, 2016
我要留言
作者：
AddThis SnsShare fb LINE 補充

⌘ 使用 AddThis Sharing Button API

☞ The Sharing Button API Overview
☞ Customizing the AddThis Toolbox
☞ Attribute-Based Configuration 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<script src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</head>
<body>
<div class="addthis_toolbox">
    <div class="custom_images">
        <a class="addthis_button_facebook"><img src="images/facebook.png" width="64" height="64" border="0" alt="Share to Facebook"></a>
        <a class="addthis_button_email"><img src="images/email.png" width="64" height="64" border="0" alt="Share to email"></a>
        <a class="addthis_button_compact"><img src="images/addthis.png" width="64" height="64" border="0" alt="More..."></a>
    </div>
</div>
</body>
</html>

⌘ 使用 SnsShare jQuery Plugin

☞ Source Code: 如何快速分享資訊到社群網站 (jQuery Plugin) 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<script src="2.1.4/jquery.min.js"></script>
<script src="jquery.snsShare.js"></script>
<script>
  $(document).ready( function () {
    var x = document.URL;
    $('.share-to').snsShare('(分享測試)', x);
  });
</script>
</head>
<body>
<a href="#" class="share-to" data-sns="line">分享到 LINE</a>
<a href="#" class="share-to" data-sns="facebook">分享到 FB</a>
</body>
</html>

jquery.snsShare.js

/*
 * jQuery SNS Share Plugin
 *
 * @author sj
 * @link https://github.com/samejack/SnsShare
 * @copyright Copyright 2014 SJ
 * @version 1.0.0
 * @license Apache License Version 2.0 (https://github.com/samejack/SnsShare/blob/master/LICENSE)
 */
jQuery.fn.snsShare = function(message, url) {

    var getAtagElement, makeMouseClickEvent, types;

    /**
     * Get ths a tag singleton
     * @returns {HTMLElement}
     */
    getAtagElement = function () {
        var element = document.getElementById('share-a-tag');
        if (element === null) {
            element = document.createElement('a');
            element.style = "display: none;";
            element.id = 'share-a-tag';
            element.target = "_blank";
            document.getElementsByTagName('body')[0].appendChild(element);
        }
        return element;
    };

    /**
     * Create a mouse click event
     * @returns {Event}
     */
    makeMouseClickEvent = function () {
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return clickEvent;
    };

    /**
     * Implement SNS types
     * @type {string[]}
     */
    types = ['facebook', 'google+', 'line', 'twitter', 'plurk'];

    // fix URL
    if (typeof(url) === 'undefined') {
        url = window.location;
    }

    return this.each(function () {
        jQuery(this).click(function () {
            var element, snsType = jQuery(this).attr('data-sns'), protocol;
            if (typeof(snsType) === 'string' && jQuery.inArray(snsType, types) !== -1) {
                if (typeof(message) === 'undefined') {
                    message = window.location;
                }
                protocol = location.protocol;
                switch (snsType) {
                    case 'facebook':
                        element = getAtagElement();
                        element.href = protocol + '//www.facebook.com/sharer.php?u=' + url + '&t=' + encodeURIComponent(message);
                        element.dispatchEvent(makeMouseClickEvent());
                        break;
                    case 'google+':
                        element = getAtagElement();
                        element.href = protocol + '//plus.google.com/share?url=' + encodeURIComponent(message + ' ' + url);
                        element.dispatchEvent(makeMouseClickEvent());
                        break;
                    case 'line':
                        element = getAtagElement();
                        element.href = protocol + '//line.naver.jp/R/msg/text/?' + encodeURIComponent(message + ' ' + url);
                        element.dispatchEvent(makeMouseClickEvent());
                        break;
                    case 'twitter':
                        element = getAtagElement();
                        element.href = protocol + '//twitter.com/home/?status=' + encodeURIComponent(message + ' ' + url);
                        element.dispatchEvent(makeMouseClickEvent());
                        break;
                    case 'plurk':
                        element = getAtagElement();
                        element.href = protocol + '//www.plurk.com/m?qualifier=shares&content=' + encodeURIComponent(message + ' ' + url);
                        element.dispatchEvent(makeMouseClickEvent());
                        break;
                    default:
                        alert('SNS type not found. (' + options + ')');
                }
            } else {
                alert('data-sns attribute not set.');
            }
        });
    });
};

⌘ 使用 facebook Social Plugins (分享)

☞ Share Button 產生器 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://thecolormoon.blogspot.tw/" data-layout="button_count"></div>
</body>
</html>

按讚 (如果不要有分享功能， Include Share Button 取消勾選)

☞ Like Button 產生器 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://thecolormoon.blogspot.tw/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
</html>

⌘ 使用 LINE 設置方法 (* 僅適用行動網站)


☞ 「用LINE傳送」鍵產生器
☞ 圖檔下載1
☞ 圖檔下載2 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"zh-hant","type":"a","text":"(LINE分享)","withUrl":true});
</script>
</span>
</body>
</html>

桌機與行動網站通用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<a href="http://line.naver.jp/R/msg/text/?(LINE%e5%88%86%e4%ba%ab)http://thecolormoon.blogspot.tw"><img src="http://media.line.me/img/button/zh-hant/84x20.png" /></a>
</body>
</html>
Facebook 登入流程根據所在的平台有分成以下幾種方式
1. iOS
2. android
3. web (Facebook JavaScript SDK)
4. web (不用Facebook JavaScript SDK)
5. facebook遊戲

而web有兩種登入的方法，一種是使用JavaScript SDK，一種是手動建立流程，根據官網的說明使用sdk是比較容易而且推薦的
☞ http://ithelp.ithome.com.tw/question/10157967
☞ http://smallpoint-program.blogspot.tw/2015/07/facebooklogini.html

Source

☞ LINE 線上按鈕
☞ LINE分享按鈕測試
☞ LINE 分享按鈕安裝在網站或部落格中
☞ [教學]Facebook 讚按鈕﹍四種安裝方式深入剖析
☞ Top 10 Social Sharing Buttons for Your Website
☞ 香腸炒魷魚 | AddThis 三步驟，超簡單放上社群分享按鈕

Reference

☞ 閱讀 | 社群分享

Image Source

☞ 數位行銷實戰家 | 社群分享心理大剖析
Tags :

沒有留言:

訂閱： 張貼留言 ( Atom )
技術提供：Blogger.

網誌建立於 2015 年 8 月 24 日 The Color Moon 遇見你。月亮彩色 | Created By Themexpose | Distributed By Blogger Themes