无需聘请开发人员即可添加 Twitter 推文和关注按钮

Twitter是鼓励购物者分享商品和页面的电子商务营销人员的重要网站。幸运的是，该服务易于集成到零售网站中，甚至无需聘请开发人员。

在本文中，您将学习如何在简单的产品页面上添加 Twitter 推文按钮和 Twitter 关注按钮。这不需要广泛的 HTML 或 CSS 知识，但您需要了解什么是 HTML 和 CSS，以及如何在您的网站上访问它们。如果您知道什么是锚点标签和脚本标签，那也会很有帮助。

产品页面

在许多电子商务平台上，产品页面是使用多个模板构建的。例如，可能有用于页面标题部分、主要内容区和页脚的模板。实际上，主内容页面也可以划分为几个模板。这意味着您需要找到电子商务平台中您希望放置 Twitter 按钮的具体模板。

在本例中，我构建了一个简单的 HTML 页面。

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>
    <style>
        #content { margin: 50px auto 20px; width: 800px; }
        img, section { display: inline-block; }
        img, section { width: 390px; }
        section { padding: 0 0 0 10px; vertical-align: top; }
        img { border: 3px solid #000 }
        h1 { margin: 0 0 10px; font-family: 'Aguafina Script', cursive; }
        h3 em { vertical-align: super; font-size: 10px; text-decoration: underline; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug -->
</head>
<body lang="en">
    <div id="content">
        <img src="product.jpg" alt="some great product" >
        <section>
            <h1>Some Great Product</h1>
            <p>Lorem ipsum dolor sit amet...</p>
            <h3>$795.<em>00</em></h3>
        </section>
    </div>
</body>
</html>

添加 Twitter 推文按钮

Twitter 推文按钮允许网站访客对特定页面的内容进行推文——以示例产品页面为例。它由两部分组成：一个锚点标签和一个 JavaScript 标签。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="www.practicalecommerce.com" data-count="none" data-via="ecommerceboy">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

锚点标签是 HTML 中描述链接的标准方式。对于 Twitter 推文按钮，它具有多个属性，首先是“href”，它告诉浏览器链接应连接到哪个页面。

<a href="https://twitter.com/share"

在此处，锚点指向 Twitter 分享页面。

接下来，锚点指定了一个类名。

class="twitter-share-button"

当前页面的 URL 或地址是下一个属性。在您电子商务平台的模板系统中，可能有一种方法可以指定当前页面的地址，这是填充此属性的正确方式。如果从锚点标签中省略此属性，按钮仍然可以正常工作，但生成的 Twitter 帖子将不包含指向您网站的链接。

data-url="www.practicalecommerce.com"

data-count 属性告诉 Twitter 是否应显示帖子收到的推文数量。我可以使用“horizontal”（水平）或“vertical”（垂直）来代替“none”。

data-count="none"

data-via 属性将在共享推文中包含一个 Twitter 用户链接。其形式为 @some-handle。此属性可以省略。

data-via="ecommerceboy"

在打开的锚点标签关闭后，我插入了“Twitter”一词，如果用户禁用了 JavaScript，该词将出现在按钮的位置。

最后是闭合的锚点标签。

脚本的下一部分仅指向一个 Twitter JavaScript。您可以按原样粘贴它。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

添加 Twitter Follow 按钮

Twitter Follow 按钮用于鼓励网站访客关注页面所有者。该按钮通常会显示特定用户的粉丝数量。Follow 按钮的实现方式与 Tweet 按钮非常相似。事实上，如果您已经在页面上集成了 Twitter JavaScript（如本例所示），则无需再次包含该 JavaScript。

<a href="https://twitter.com/ecommerceboy" class="twitter-follow-button">Follow @ecommerceboy</a>

如果单独部署 Follow 按钮，您需要以下脚本标签。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

请注意，您的 Twitter 用户名应放在锚点 href 属性中。就是这么简单。

总结

在本文中，我介绍了如何向一个简单的产品页面添加 Twitter Tweet 按钮和 Twitter Follow 按钮。这两个按钮都将帮助访客在 Twitter 上分享您的网站。