使用AddThis实现页面分享（social media）

1. 前言

(1) 概述

在实际项目中用到AddThis进行social media分享。然而，AddThis的官网没有具体的完整示例，Academy中也比较混乱。一些具体问题也没有在网上搜到解决方案。

于是，结合在实际项目中的需求，本文对AddThis的使用进行了总结和归纳，详细介绍如何使用AddThis生成分享按钮，实现页面与主流社交媒体的对接。

(2) AddThis简介

[1] 官网

http://www.addthis.com/

[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这一部分。

(1) Share Buttons类型

http://www.addthis.com/get/share点击Activate，去到按钮定义部分。

按钮有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的配置，进入该模块，我们开始自定义邮件模板。

官网Academy中有这么一篇：
What Are Email Templates and How to Create Them?

[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，又在代码中加入了自定义的分享按钮列表，这种情况下，以代码中的为准。

官网Academy中有这么一篇：
Customizing the AddThis Toolbox

[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等。

详见官网：
Setting the URL,Title, & Image to Share

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。

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

[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的一个机制，打开的分享页面不关闭，即使回到原页面点击其他的分享按钮也是无效的。关闭页面后返回，按钮就有效了。

这个没有解决方案，只需要了解会出现这样的情况。