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

和riy haydash. 经过 和riy haydash.  |  7月5日,2019年

拥有用户在线分享您的内容是成长品牌的好方法。在本教程中,我们将介绍您需要知道的一切,以添加到您的页面上的简单链接,以便用户可以直接推文。

使用Instagram,Snapchat等“年轻”社交媒体平台接管互联网,Twitter仍然是最受欢迎的营销渠道之一。

它有周围 每月3.26亿活跃用户 这意味着您的目标受众可能会使用它。这就是为什么您至少考虑使用它作为您业务的营销渠道。具有推特作为主要的营销渠道之一不仅可以帮助建立您的品牌的认识,而且还可以将流量驱动到您的网站并使您的文章成为病毒。

这怎么能实现吗?嗯,这是一些顶级博主使用的非常简单的策略。这个想法是,在你的博客文章中,你有很短的内容,这些内容很吸引人,人们喜欢它们。然后可以很容易地推发那些内容。 (例如,它可能是来自您的利基中的权威的人的报价,或者您认为您的访客可能会分享统计数据。)

所以,让我告诉您如何在文章中自动添加“点击鸣叫”按钮。

在我们开始之前,让我说这是一种中型技术。如果你正在使用WordPress 您可以使用即可提供相同目的的即用脚插件。

 

使用JavaScript创建“点击转换”按钮

让我们假设我们要从这个转身 关于会议的文章 这就是介绍了WebDesignerDepot.com…“进入一个推特的街区。

鉴于我们有以下HTML结构:

<article id="article">
<blockquote>  I only ever go to marketing conferences to meet new people and listen to their experiences. Those people never include the speakers, who are generally wrapped up in their own world and rarely give in the altruistic sense. </blockquote>
</article>

以下是我们如何创建点击Tweet按钮:

Step 1

我们需要收集所有 <quote><blockquote> 文档加载时,我们文章中的元素:

document.addEventListener("DOMContentLoaded", function() {
  // Step 1. Get all quote elements inside the article
  const articleBody = document.getElementById('article');
  const quotes = [...articleBody.querySelectorAll('quote, blockquote')];

Step 2

创建其他变量以存储当前页面URL,Tweetable URL和“单击Tweet”按钮:

  let tweetableUrl = "";
  let clickToTweetBtn = null;
  const currentPageUrl = window.location.href;

Step 3

我们需要迭代我们想要制作Tweetable的所有引用元素,并为每个元素追加“点击”:

  quotes.forEach(function (quote) {
    // Create a tweetable url
    tweetableUrl = makeTweetableUrl(
      quote.innerText, currentPageUrl
    );

    // Create a 'click to tweet' button with appropriate attributes
    clickToTweetBtn = document.createElement("a");
    clickToTweetBtn.innerText = "Click to Tweet";

    clickToTweetBtn.setAttribute("href", tweetableUrl);
    clickToTweetBtn.onclick = onClickToTweet;

    // Add button to every blockquote
    quote.appendChild(clickToTweetBtn);

  });  
});

Step 4

添加2个缺失功能​​: maketweetableurl, 这将创建一个推特的URL,以及 onclicktotweet. 这将充当我们的事件侦听器,并为推文打开窗口(单击按钮时):

function makeTweetableUrl(text, pageUrl) {
  const tweetableText = "//twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
  return tweetableText;
}

function onClickToTweet(e) {
  e.preventDefault();

  window.open(
    e.target.getAttribute("href"),
    "twitterwindow", 
    "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0,scrollbars=0"
  );

}

这是工作的 在Codepen。

 

使用jQuery创建“点击转换”按钮

现在,让我向您展示一种略有不同的方式来获得相同的结果,即使用jQuery可以实现。
这是代码:

$(document).ready(function() {

  // Get all quote elements inside the article
  const articleBody = $("#article");
  const quotes = articleBody.find("引用, blockquote");
  let tweetableUrl = "";
  let clickToTweetBtn = null;

  // Get a url of the current page 
  const currentPageUrl = window.location.href;

  quotes.each(function (index, quote) {
    const q = $(quote);
    // Create a tweetable url
    tweetableUrl = makeTweetableUrl(
      q.text(), currentPageUrl
    );

    // Create a 'click to tweet' button with appropriate attributes
    clickToTweetBtn = $("<a>");
    clickToTweetBtn.text("Click to Tweet");

    clickToTweetBtn.attr("href", tweetableUrl);
    clickToTweetBtn.on("click", onClickToTweet);

    // Add button to every blockquote
    q.append(clickToTweetBtn);

  });
});

function makeTweetableUrl(text, pageUrl) {
  const tweetableText = "//twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
  return tweetableText;
}

function onClickToTweet(e) {
  e.preventDefault();
  window.open(
    e.target.getAttribute("href"),
    "twitterwindow", 
    "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0"
  );
}

正如您所看到的,代码是相同的,除了它利用jQuery的函数来简化我们必须编写的代码。这是jQuery版本的工作 在Codepen..

 

结论

正如您所看到的,创建“点击鸣叫”按钮不需要很多时间,但这可能是鼓励您的访问者在Twitter上共享您的内容的好方法。

我希望这个教程有用,你学到了新的东西。随意使用这段代码并在您的网站上实施。

 

特色图像 通过Depositphotos.