關於Facebook、twitter、google、pinterest四種分享方法，附帶微博、QQ、微信、豆瓣等等,

　　常用的國外網站分享推過，Facebook、twitter、google、pinterest這四種社交平台最常見，下面就簡單介紹一下分享的方法。

　　首先，必須使用分享插件，share.js

　　獲取方法： https://github.com/chenpenggood/share.js

　　這有兩種分享文件：1、關於Facebook、twitter、google、pinterest四種分享方法， 簡潔版，容量小

　　　　　　　　　　　　

　　　　　　　　　　　　補充說明： 如果是針對國外網站，第三方免費分享插件addthis，涵蓋了國外絕大部分主流社交平台，可自定義樣式圖片，並且還自帶數據收集分享的后台控制平台。

　　　　　　　　　　　2、jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等，集合多種分享

　　　　　　　　　　　　

　　本文主要講解第一種分享插件， 第二種順帶說一下

　　下載好第一個share.min.js插件后，使用方法如下：

　　

 1. 在HTML中先寫好標簽，如下

 導入share.min.js

<script src="../js/share.min.js"><script>

<div class="share-msg">
    <p class="shareBtns share">
        <a data-share="facebook" class="share-facebook icon" href="javascript:;"></a>
        <a data-share="twitter" class="share-twitter icon" href="javascript:;"></a>
        <a data-share="google" class="share-google icon" href="javascript:;"></a>
        <a data-share="pinterest" class="share-pinterest icon" href="javascript:;"></a>
    </p>
</div>

 

PS: 每個分享的圖片是自己根據設計圖紙自定義的。

在js文件中, （作者使用了jquery）

$(document.body).on('click', 'shareBtns a', function(e){
   shareProcess($(this).attr('data-share'));
});

shareProcess: function(className){
   shareText = "Welcome share!",
   shareImg = "https://github.com/chenpenggood/share.js/blob/master/readImg/share.png?raw=true",
   twitterText = "share tool"，
   description: "this is a share tool"
   switch(className){
     case "facebook":
     window.share.fackbook.start({
       picture: shareImg,   //注意：新的facebook圖片的分享有大變化，這里圖片不能生效，下面會結束具體方法
       name: description,
       link: localtion.href， //注意：只能分享當前頁面，否則fb抓取到指定頁面的信息，這不是你想要的結果
       caption: "web name",
       description: description
     }, function(){
       shareSuccess('facebook');  //分享成功回調
     });
     break;

     case "twitter":
     window.share.twitter.start({
         link: location.href,
         text: description
     }, function(){
        shareSuccess('twiter');  //分享成功回調
     });
     break;
     
     case "google":
     window.share.google.start({
       link: location.href,
       text: description + location.href
     }, function(){
        shareSuccess('google');  //分享成功回調
     });
     break;
     
     case "pinterest":
     window.share.pinterest.start({
       link: location.href,
       image: shareImg,
       text: description + location.href
     }, function(){
        shareSuccess('pinterest');  //分享成功回調
     })
   }
}

 shareScucess: function(shareChannel){
    $.ajax({
      url: "成功回調的api地址"，
      type: "get/post",
      dataType: "json",
      data: {
        shareChannel: shareChannel || ''
      },
      success: function(res){
         if(res.code === 2){
           '代碼塊'
         }
      }
    })
 }

 

• 現在說一下facebook的特殊性，facebook的分享只能抓取線上或者是預發布的描述，而且對於圖片的抓取必須是線上抓取， 務必保證js中facebook的描述文案與head中一致。  

• 它的抓取的方式是在 head 中：

  <meta property="og:type" content="product" />
  <meta property="og:url" content="www.baibu.com"/>
  <meta property="og:image" content="https://github.com/chenpenggood/share.js/blob/master/readImg/share.png?raw=true" />
  <meta property="og:description" content="this is share tool" />
  <meta property="og:site_name" content="share web" />
  
  <!-- <meta property="fb:app_id" content="100924140245002" /> 
   <meta property="fb:admins" content="100004662303870" /> -->

   

附上: facebook抓取調試地址： https://developers.facebook.com/tools/debug/sharing/  

　　

第二種分享插件使用方法： 

   1. HTML中導入share.min.css 和 share.min.js

<!-- 禁用 google、設置分享的描述 -->
    <div class="social-share" data-disabled="google" data-description="Share.js - 一鍵分享到微博，QQ空間，騰訊微博，人人，豆瓣"></div>

 <!-- 設置微信二維碼標題 -->
 <div class="social-share" data-wechat-qrcode-title="請打開微信掃一掃"></div>

 <!-- 針對特定站點使用不同的屬性（title, url, description,image...） -->
 <div class="social-share" data-weibo-title="這個標題只有的分享到微博時有用，其它標題為全局標題" data-qq-title="分享到QQ時用此標題"></div>

 <!-- 使用: data-initialized="true" 標簽或者 initialized 配置項來禁用自動生成icon功能。 -->
 <div class="social-share" data-initialized="true">
     <a href="#" class="social-share-icon icon-weibo"></a>
     <a href="#" class="social-share-icon icon-qq"></a>
     <a href="#" class="social-share-icon icon-qzone"></a>
 </div>

 <!-- 以上a標題會自動加上分享鏈接（a 標簽必須帶 icon-NAME 屬性，不然分享鏈接不會自動加上）。 -->

 <!-- 如果你想在分享icon列表中內置一些元素，比如放一個收藏按鈕在分享按鈕的后面： -->
 <div class="social-share" data-mode="prepend">
     <a href="javascript:;" class="social-share-icon icon-heart"></a>
 </div>
 <!-- 這樣，所有的分享圖標就會創建在容器的內容前面，反之可以用 append 創建在容器內容后面，當然這是默認的，也不需要這么做。 -->

 <!-- 指定移動設備上顯示的圖標 -->
 <div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>
 <!-- 當在手機上打開該頁面的時候就只會顯示這4個圖標了。 -->

　　

展示所有配置可選， 通常默認就滿足需求，不需在重新配置：(記得導入jquery)

   var $config = {
    ...
   };

   $('.social-share').share($config);


  url                 : '', // 網址，默認使用 window.location.href
  source              : '', // 來源（QQ空間會用到）, 默認讀取head標簽：<meta name="site" content="http://overtrue" />
  title               : '', // 標題，默認讀取 document.title 或者 <meta name="title" content="share.js" />
  description         : '', // 描述, 默認讀取head標簽：<meta name="description" content="PHP弱類型的實現原理分析" />
  image               : '', // 圖片, 默認取網頁中第一個img標簽
  sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點
  disabled            : ['google', 'facebook', 'twitter'], // 禁用的站點
  wechatQrcodeTitle   : "微信掃一掃：分享", // 微信二維碼提示文字
  wechatQrcodeHelper  : '<p>微信里點“發現”，掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>',

 

介紹完畢