使用AddThis实现页面分享(social media)

本文详述了如何使用AddThis实现页面分享,包括AddThis的免费服务、分享按钮类型、基本配置、进阶功能如自定义分享列表样式、动态修改参数,以及在实际使用中遇到的问题和解决方案。
摘要由CSDN通过智能技术生成

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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值