使用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>
    &l