免费获取策划方案多一份参考,总有益处

它山之石

Tashan stone of

案例581

它山之石

如何编写“点击推文”按钮

来源:派臣科技|时间:2019-07-25|浏览:

让用户在网上分享你的内容是发展你的品牌的好方法。在本教程中,我们将介绍向页面添加简单链接所需的所有知识,以便用户可以直接在twitter上发布链接。

随着Instagram、Snapchat等“年轻”社交媒体平台占领互联网,Twitter仍是最受欢迎的营销渠道之一。

它每月大约有3.26亿活跃用户,这意味着你的目标用户可能正在使用它。这就是为什么你至少应该考虑使用它作为一个营销渠道为您的企业。把Twitter作为主要的营销渠道之一,不仅有助于树立你的品牌知名度,还能增加你网站的访问量,让你的文章像病毒一样传播开来。

如何才能做到这一点?嗯,这是一些顶级博主正在使用的一种非常直接的策略。这个想法是,在你的博客文章中,你有一些简短的内容,很容易记住,人们喜欢它们。这些内容可以很容易地在twitter上发布。(例如,它可以是来自你所在领域的权威人士的一段话,或者是你觉得可能会被访问者分享的一项统计数据。)

因此,让我向您展示如何让“点击推特”按钮自动添加到您的文章中的每一个引用。

在我们开始之前,我想说这是一种中等先进的技术。如果你正在使用WordPress,你可以使用一个现成的插件,它也可以达到同样的目的。

用JavaScript创建“点击推特”按钮

让我们假设我们想把这篇关于会议的文章从“根据webdesignerdepot.com…”转换成一个tweetable块。

假设我们有以下html结构:

下面是我们如何创建一个点击推特按钮:

步骤1

当文档加载时,我们需要从文章中收集所有和元素:

步骤2

创建额外的变量来存储当前页面url、tweetable url和一个' click to tweet '按钮:

步骤3

我们需要遍历所有想要创建tweetable的quote元素,并为每个元素添加一个“click to tweet按钮”:

步骤4

添加两个缺少的函数:makeTweetableUrl,它将创建一个tweetable URL; onClickToTweet,它将作为我们的事件监听器,并为tweet打开一个窗口(一旦单击按钮):

这里,它正在处理CodePen。

使用jQuery创建“Click to Tweet”按钮

现在,让我向您展示一种稍微不同的方法来获得与使用jQuery时相同的结果。

正如您所看到的,代码是一样的,只是它利用jQuery的函数简化了我们必须编写的代码。这是在CodePen上工作的jQuery版本。

结论

正如你所看到的,创建一个“点击推特”按钮并不需要太多的时间,但是它可以是一个很好的方式来鼓励你的访问者在推特上分享你的内容。

我希望本教程对您有所帮助,您学到了一些新的东西。请随意使用这段代码并在您的网站建设上实现它。

留言

返回顶部

君
重庆网站建设它山之石如何编写“点击推文”按钮