如何在WordPress中添加官方Twitter关注按钮

Twitter正在将其功能扩展到更广泛的万维网。这一切都始于官方的推文按钮,然后是Twitter Anywhere平台,最近是新的官方Twitter关注按钮。您可能想知道这个Twitter关注按钮到底是什么?Twitter关注按钮和智能关注按钮有何不同?别担心,在本文中我们将介绍什么是Twitter关注按钮,以及如何将其添加到您的WordPress网站。

什么是Twitter关注按钮

Twitter关注按钮是一个小小部件,允许用户轻松地从任何网站关注您的Twitter帐户(或任何推特帐户)。跟随按钮使用与官方推文按钮相同的实现模型,并且它非常易于集成。您可以在下面图片的左上角看到关注按钮的演示。单击“关注”按钮时,将打开一个窗口,其中包含有关用户的更多信息。

Twitter Follow Button

你可能想知道它与下面的Smart Follow按钮有什么不同?

那么智能关注按钮要求你完成整个Twitter Anywhere集成。它也不允许您显示您的关注者计数或进行任何自定义。而Twitter跟随按钮可让您显示计数,并且它非常易于集成。查看下面的实际示例(不要忘记单击关注以查看它的作用):

关注@wpbeginner

如何在WordPress中添加官方Twitter关注按钮

您可以转到“关注按钮”页面并为您生成代码。或者你可以简单地复制下面的代码:

<a href="http://twitter.com/wpbeginner"  data-show-count="true">Follow @wpbeginner</a>  <script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>

P.S。请务必使用您自己的用户名更改用户名。

如果您使用官方推文按钮,则无需粘贴脚本两次。因此,您的代码将如下所示:

<a href="http://twitter.com/wpbeginner"  data-show-count="true">Follow @wpbeginner</a>

现在,您可以将代码粘贴到WordPress主题中的任何位置。大多数人会把这些代码放在他们的 sidebar.php 文件。但是,如果您对编辑主题文件感到不舒服,那么您也可以使用WordPress主题小部件。所有好主题都带有小部件准备好的侧边栏。所以你要做的就是去Appearence»Widgets选项卡。然后将文本小部件添加到相应的侧边栏。最后,粘贴上面的代码,你就完成了。请查看下面的屏幕截图中的示例:

Twitter Follow Button Widget

实际上没有必要添加插件来执行这样简单的操作。

高级自定义

此部分适用于想要进一步自定义此按钮以匹配其网站颜色方案等的设计人员和开发人员.Twitter可让您自定义按钮颜色,文本颜色,链接颜色,插件的语言,小部件和对齐方式。

我们正在使用的JavaScript版本中的可用变量:

  • data-show-count( true 或false)
  • 数据按钮(蓝色或灰色)
  • 数据文本颜色(十六进制代码)
  • data-link-color(十六进制代码)
  • data-lang(en,fr,de,es) – 使用两个字母的ISO-639-1语言代码
  • data-width – (300px)
  • data-align – (右)

如果要在代码中指定它,它将如下所示:

  <a href="http://twitter.com/wpbeginner"  data-button="grey" data-text-color="#FFFFFF" data-link-color="#ffa24f" data-show-count="true">Follow @wpbeginner</a>  

Follow Button Documentation
按照按钮生成器

Twitter正在将其功能扩展到更广泛的万维网。这一切都始于官方的推文按钮,然后是Twitter Anywhere平台,最近是新的官方Twitter关注按钮。您可能想知道这个Twitter关注按钮到底是什么?Twitter关注按钮和智能关注按钮有何不同?别担心,在本文中我们将介绍什么是Twitter关注按钮,以及如何将其添加到您的WordPress网站。

什么是Twitter关注按钮

Twitter关注按钮是一个小小部件,允许用户轻松地从任何网站关注您的Twitter帐户(或任何推特帐户)。跟随按钮使用与官方推文按钮相同的实现模型,并且它非常易于集成。您可以在下面图片的左上角看到关注按钮的演示。单击“关注”按钮时,将打开一个窗口,其中包含有关用户的更多信息。

Twitter Follow Button

你可能想知道它与下面的Smart Follow按钮有什么不同?

那么智能关注按钮要求你完成整个Twitter Anywhere集成。它也不允许您显示您的关注者计数或进行任何自定义。而Twitter跟随按钮可让您显示计数,并且它非常易于集成。查看下面的实际示例(不要忘记单击关注以查看它的作用):

关注@wpbeginner

如何在WordPress中添加官方Twitter关注按钮

您可以转到“关注按钮”页面并为您生成代码。或者你可以简单地复制下面的代码:

<a href="http://twitter.com/wpbeginner"  data-show-count="true">Follow @wpbeginner</a>  <script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>

P.S。请务必使用您自己的用户名更改用户名。

如果您使用官方推文按钮,则无需粘贴脚本两次。因此,您的代码将如下所示:

<a href="http://twitter.com/wpbeginner"  data-show-count="true">Follow @wpbeginner</a>

现在,您可以将代码粘贴到WordPress主题中的任何位置。大多数人会把这些代码放在他们的 sidebar.php 文件。但是,如果您对编辑主题文件感到不舒服,那么您也可以使用WordPress主题小部件。所有好主题都带有小部件准备好的侧边栏。所以你要做的就是去Appearence»Widgets选项卡。然后将文本小部件添加到相应的侧边栏。最后,粘贴上面的代码,你就完成了。请查看下面的屏幕截图中的示例:

Twitter Follow Button Widget

实际上没有必要添加插件来执行这样简单的操作。

高级自定义

此部分适用于想要进一步自定义此按钮以匹配其网站颜色方案等的设计人员和开发人员.Twitter可让您自定义按钮颜色,文本颜色,链接颜色,插件的语言,小部件和对齐方式。

我们正在使用的JavaScript版本中的可用变量:

  • data-show-count( true 或false)
  • 数据按钮(蓝色或灰色)
  • 数据文本颜色(十六进制代码)
  • data-link-color(十六进制代码)
  • data-lang(en,fr,de,es) – 使用两个字母的ISO-639-1语言代码
  • data-width – (300px)
  • data-align – (右)

如果要在代码中指定它,它将如下所示:

  <a href="http://twitter.com/wpbeginner"  data-button="grey" data-text-color="#FFFFFF" data-link-color="#ffa24f" data-show-count="true">Follow @wpbeginner</a>  

Follow Button Documentation
按照按钮生成器

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-04-23 14:52:22
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
[email protected]
取消

选择聊天工具: