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 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Page Title</title>
  6. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  7. <script src="//s7.addthis.com/js/300/addthis_widget.js"></script>
  8. </head>
  9. <body>
  10. <div class="addthis_toolbox">
  11.     <div class="custom_images">
  12.         <a class="addthis_button_facebook"><img src="images/facebook.png" width="64" height="64" border="0" alt="Share to Facebook"></a>
  13.         <a class="addthis_button_email"><img src="images/email.png" width="64" height="64" border="0" alt="Share to email"></a>
  14.         <a class="addthis_button_compact"><img src="images/addthis.png" width="64" height="64" border="0" alt="More..."></a>
  15.     </div>
  16. </div>
  17. </body>
  18. </html>

⌘ 使用 SnsShare jQuery Plugin

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

jquery.snsShare.js

  1. /*
  2.  * jQuery SNS Share Plugin
  3.  *
  4.  * @author sj
  5.  * @link https://github.com/samejack/SnsShare
  6.  * @copyright Copyright 2014 SJ
  7.  * @version 1.0.0
  8.  * @license Apache License Version 2.0 (https://github.com/samejack/SnsShare/blob/master/LICENSE)
  9.  */
  10. jQuery.fn.snsShare = function(message, url) {
  11.  
  12.     var getAtagElement, makeMouseClickEvent, types;
  13.  
  14.     /**
  15.      * Get ths a tag singleton
  16.      * @returns {HTMLElement}
  17.      */
  18.     getAtagElement = function () {
  19.         var element = document.getElementById('share-a-tag');
  20.         if (element === null) {
  21.             element = document.createElement('a');
  22.             element.style = "display: none;";
  23.             element.id = 'share-a-tag';
  24.             element.target = "_blank";
  25.             document.getElementsByTagName('body')[0].appendChild(element);
  26.         }
  27.         return element;
  28.     };
  29.  
  30.     /**
  31.      * Create a mouse click event
  32.      * @returns {Event}
  33.      */
  34.     makeMouseClickEvent = function () {
  35.         var clickEvent = document.createEvent('MouseEvents');
  36.         clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  37.         return clickEvent;
  38.     };
  39.  
  40.     /**
  41.      * Implement SNS types
  42.      * @type {string[]}
  43.      */
  44.     types = ['facebook', 'google+', 'line', 'twitter', 'plurk'];
  45.  
  46.     // fix URL
  47.     if (typeof(url) === 'undefined') {
  48.         url = window.location;
  49.     }
  50.  
  51.     return this.each(function () {
  52.         jQuery(this).click(function () {
  53.             var element, snsType = jQuery(this).attr('data-sns'), protocol;
  54.             if (typeof(snsType) === 'string' && jQuery.inArray(snsType, types) !== -1) {
  55.                 if (typeof(message) === 'undefined') {
  56.                     message = window.location;
  57.                 }
  58.                 protocol = location.protocol;
  59.                 switch (snsType) {
  60.                     case 'facebook':
  61.                         element = getAtagElement();
  62.                         element.href = protocol + '//www.facebook.com/sharer.php?u=' + url + '&t=' + encodeURIComponent(message);
  63.                         element.dispatchEvent(makeMouseClickEvent());
  64.                         break;
  65.                     case 'google+':
  66.                         element = getAtagElement();
  67.                         element.href = protocol + '//plus.google.com/share?url=' + encodeURIComponent(message + ' ' + url);
  68.                         element.dispatchEvent(makeMouseClickEvent());
  69.                         break;
  70.                     case 'line':
  71.                         element = getAtagElement();
  72.                         element.href = protocol + '//line.naver.jp/R/msg/text/?' + encodeURIComponent(message + ' ' + url);
  73.                         element.dispatchEvent(makeMouseClickEvent());
  74.                         break;
  75.                     case 'twitter':
  76.                         element = getAtagElement();
  77.                         element.href = protocol + '//twitter.com/home/?status=' + encodeURIComponent(message + ' ' + url);
  78.                         element.dispatchEvent(makeMouseClickEvent());
  79.                         break;
  80.                     case 'plurk':
  81.                         element = getAtagElement();
  82.                         element.href = protocol + '//www.plurk.com/m?qualifier=shares&content=' + encodeURIComponent(message + ' ' + url);
  83.                         element.dispatchEvent(makeMouseClickEvent());
  84.                         break;
  85.                     default:
  86.                         alert('SNS type not found. (' + options + ')');
  87.                 }
  88.             } else {
  89.                 alert('data-sns attribute not set.');
  90.             }
  91.         });
  92.     });
  93. };

⌘ 使用 facebook Social Plugins (分享)

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

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

☞ Like Button 產生器 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Page Title</title>
  6. </head>
  7. <body>
  8. <div id="fb-root"></div>
  9. <script>(function(d, s, id) {
  10.   var js, fjs = d.getElementsByTagName(s)[0];
  11.   if (d.getElementById(id)) return;
  12.   js = d.createElement(s); js.id = id;
  13.   js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.5";
  14.   fjs.parentNode.insertBefore(js, fjs);
  15. }(document, 'script', 'facebook-jssdk'));</script>
  16. <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>
  17. </body>
  18. </html>

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


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

桌機與行動網站通用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Page Title</title>
  6. </head>
  7. <body>
  8. <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>
  9. </body>
  10. </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