使用AddThis實現頁面分享（social media）

阿新 • • 發佈：2019-01-01

1. 前言

(1) 概述

在實際專案中用到AddThis進行social media分享。然而，AddThis的官網沒有具體的完整示例，Academy中也比較混亂。一些具體問題也沒有在網上搜到解決方案。

於是，結合在實際專案中的需求，本文對AddThis的使用進行了總結和歸納，詳細介紹如何使用AddThis生成分享按鈕，實現頁面與主流社交媒體的對接。

(2) AddThis簡介

[1] 官網

[2] 什麼是AddThis?

AddThis is the world’s largest content sharing platform. We provide tools that make it easier share content across the social web, and provides publishers with increased traffic and in-depth analytics.

[3] 是否收費?

Nothing! AddThis basic tools are absolutely free for anyone to install on their website or blog. But you can upgrade to Pro starting at $10 a month.

2. 基本功能

首先，需要註冊。在本文中只涉及到Share Buttons這一部分。

按鈕有7種預設展示方式（詳見官網展示效果）：

Floating
懸浮條的方式展示的分享列表，多種位置可選擇

Inline
行內，頁面中自定義將其插入
Expanding
一個始終處於右下角（可定義到左下角）的按鈕，點選彈開分享列表
Image Sharing
滑鼠懸停在圖片上的時候出現處於圖片左上的分享列表
Popup
以彈出框方式展示的分享列表
Banner
可關閉的分享提示條
Slider
滑動彈出框，可選擇多個劃出位置

(2) 頁面中新增share buttons

以Inline的方式為例。

完成按鈕的各種自定義選擇後，得到程式碼，如下圖。
這裡寫圖片描述

按照說明將第一段程式碼，也就是js引用加入頁面的引用中。在需要放置分享按鈕的位置插入第二段程式碼，也就是DOM片段。

【注意】執行頁面必須啟服務，若是直接開啟html檔案，看不到分享按鈕。

Share Buttons就成功新增到頁面了。
這裡寫圖片描述

(3) Dashboard

在AddThis 官網右上角有dashboard的按鈕。進入這個模組，可以看到選單分為幾個部分。

[1] Analytics

統計和分析，記錄了訪問量，訪問方式（桌面或者移動端，裝置），用什麼社交媒體分享，分享次數等等資訊。
這裡寫圖片描述

[2] Tools

這裡可以管理（新增、編輯、刪除）Tool。Tool除了Share Buttons外還有其他如下：

Share Buttons
Follow Buttons
Related Posts
List Building
Link Promotion
Website Tip Jar

另外，還有A/B Tests等功能。
這裡寫圖片描述

[3] Get the Code

該頁面同本文的第一張圖，展示需要引入的程式碼。

[4] Profile Options

選單的最後一項“···”中，有很多配置。這裡不一一列舉了。

3. 進階

(1) 郵箱模板 Email Tempalte

AddThis提供了Email這種分享方式，而這並不只是個mailTo的功能。上文中提到的Profile Options中有一項Email Templates的配置，進入該模組，我們開始自定義郵件模板。

[1] 預設引數

可以在模板裡直接使用的引數如下：

Variable	Description
`{{url}}`	inserts the URL being shared
`{{title}}`	inserts the title of the URL being shared
`{{note}}`	inserts comment provided by the sender
`{{from}}`	inserts the sender’s email address

點選Add Template新建一個模板，Text content 中輸入test text content，Html Content 輸入內容如下：

<div>
    <p>url: {{url}}</p>
    <p>title: {{title}}</p>
    <p>note: {{note}}</p>
    <p>from: {{from}}</p>
</div>

將該模板設定為default，啟動專案，點選頁面中的Email分享按鈕，顯示如下：

這裡寫圖片描述

在收件箱中收到郵件如下：

這裡寫圖片描述

可知，在預設情況下，url的值是分享連結，hash是用來追蹤資料的。title為網頁head中title標籤的值。note及from的值來源於使用者的填入內容。

[2] 自定義引數

除了上述引數外，還可以自定義引數。可按照如下的格式定義引數的值，在模板中加上var_作為字首及該引數的名稱，在收到的郵件中就能讀出其值。

頁面程式碼中寫入：

var addthis_share = {
  email_vars: { 
    CustomVariable: "Hello world" 
  }
}

在郵件模板Html content中寫入：

<p>{{var_CustomVariable}}</p>

(2) 自定義分享按鈕列表樣式

自定義的按鈕有區別於預設按鈕，預設的有文字，而自定義的只有圖示。例如，預設設定的facebook按鈕，有f的圖示後面跟著文字facebook。自定義的只有f圖示。

若既在AddThis官網上設定了Share Buttons，又在程式碼中加入了自定義的分享按鈕列表，這種情況下，以程式碼中的為準。

[1] Auto-Personalized Services

列表是自動生成相應個數的按鈕，最後一項是個加號——點選是AddThis的所有分享選項。

需要更多按鈕，只需遞增末尾的數字。文中提到最多允許11的按鈕，但是實戰後發現更多的也可以支援。

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_preferred_1"></a>
  <a class="addthis_button_preferred_2"></a>
  <a class="addthis_button_preferred_3"></a>
  <a class="addthis_button_preferred_4"></a>
  <a class="addthis_button_compact"></a>
</div>

預設的按鈕大小為16×16，還提供了另外一個尺寸32×32，只需要增加一個類addthis_32x32_style

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
</div>

[2] Select your own services

區別於上一項的是，這裡指定了具體要哪一個社交媒體的按鈕。如下是facebook、twitter、email、微信和新浪微博。同樣提供了16×16和32×32兩個尺寸的按鈕，設定同上。

<div class="addthis_toolbox addthis_default_style" >
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_wechat"></a>
    <a class="addthis_button_sinaweibo"></a>
</div>

[3] Custom Images

上面兩種方式都是使用的AddThis的圖示樣式，當然，也可以使用自定義的圖片。程式碼如下：

<div class="addthis_toolbox">
  <div class="custom_images">
    <a class="addthis_button_facebook">
        <img src="http://via.placeholder.com/50x30" alt="Share to Facebook">
    </a>
    <a class="addthis_button_twitter">
        <img src="http://via.placeholder.com/50x30" alt="Share to Twitter">
    </a>
    <a class="addthis_button_email">
        <img src="http://via.placeholder.com/50x30" alt="Share to Email">
    </a>
    <a class="addthis_button_wechat">
        <img src="http://via.placeholder.com/50x30" alt="Share to Wechat">
    </a>
    <a class="addthis_button_sinaweibo">
        <img src="http://via.placeholder.com/50x30" alt="Share to Weibo">
    </a>
  </div>
</div>

(3) 程式碼中配置引數

在上文中我們所分享的是當前頁面，如果要分享其他頁面怎麼辦呢？

需要在程式碼中進行配置，除了URL還可以配置Title及Image等。

URL的配置是分享連結；Title會出現在很多社交媒體的分享框內，email中顯示在subject中；media配置的是例如下圖中的圖片；官網中提到配置description，測試後並不知道是在哪裡顯示的。
這裡寫圖片描述

[1] `data-`

在AddThis的dashboard中設定的Share Buttons在插入的例如inline這種型別中，需要插入DOM節點，在該DIV上配置以data-為字首的屬性。data-url，data-title，data-description，data-media。

<div class="addthis_sharing_toolbox" 
data-url="THE URL" 
data-title="THE TITLE" 
data-description="THE DESCRIPTION" 
data-media="THE IMAGE"></div>

[2] `addthis:`

上文中提到的自定義分享按鈕AddThis Toolbox，在標記屬性引數時有所區別，是以addthis:為字首的方式。有addthis:url，addthis:title，addthis:description，addthis:media。

<div class="addthis_toolbox addthis_default_style" 
addthis:url="THE URL" 
addthis:title="THE TITLE" 
addthis:description="THE DESCRIPTION" 
addthis:media="THE IMAGE"></div>

[3] `addthis_share`

如果不想在DOM上進行引數的配置，還可以直接配置在javascript中。如下，作為addthis_share物件的引數。

<script type="text/javascript">
var addthis_share = {
   url: "THE URL",
   title: "THE TITLE",
   description: "THE DESCRIPTION",
   media: "THE IMAGE"
}
</script>

(4) 動態修改引數

上述設定引數後，這些引數往往會發生改變，例如如下的情況：

修改url - 每個使用者分享的連結帶著不同的hash
修改title - 定製化使用者名稱等，顯示到分享的media中
修改media - 多語言的情況，使用者切換了語言，分享圖片需對應

[1] addthis.update格式

addthis.update('share', 'url', _newUrl); // new url
addthis.update('share', 'title', _newTitle); // new title
addthis.update('share', 'media', _newMedia); // new media
addthis.ready(); // this will re-render the buttons.

[2] 上述情況實戰

需要注意的是，連結去掉_http也是可行的，但是如果是https的網站，在微信分享時，掃碼出來的連結是http的，將無法訪問。

let _http=window.location.href.indexOf('https')>-1?'https://':'http://';
addthis.update(
  "share",
  "url",
  _http + window.location.host +"/" +"drummer-" +this.userHash
);
addthis.update(
  "share",
  "title",
  this.$t("message.someone_has_customized").replace(/XXX/,_userName)
);
  addthis.update(
    "share",
    "media",
    _http + window.location.host+"/static/img/"+this.$t("message.sharePic")
  );

4. 坑

在safari瀏覽器上，點選分享按鈕後，彈出新的頁標籤，如果不關閉該標籤，切換回原頁面，再點選分享按鈕，會發現按鈕失效了。

因為微信是以頁面返回的形式，不存在多個標籤，所以不會出現這樣的問題。

這是Addthis的一個機制，開啟的分享頁面不關閉，即使回到原頁面點選其他的分享按鈕也是無效的。關閉頁面後返回，按鈕就有效了。

這個沒有解決方案，只需要瞭解會出現這樣的情況。