什么是社交按钮？
对于那些不知道什么是社交按钮的人：它们是您在互联网上看到的按钮，通常位于博客文章下方的某个位置，允许读者在各种社交媒体平台上共享文章。他们可以帮助获得更多的曝光率，从而为您的网站带来更多的流量。
这是一些社交按钮的示例：
社交按钮
您如何在WordPress中实现这些社交按钮？
现在，您可能想知道如何实现这些按钮。您最初的想法可能是最简单的方法是添加某种插件。但是，您也可以将其添加到主题中。这使您可以更好地控制样式和显示内容。当然，您也可以决定将这些按钮添加到插件中，但是所带来的好处很小。
一种选择是将社交按钮的代码放置在模板部分中。这样，您可以轻松地将其嵌入整个网站，而无需大幅度编辑模板文件或不必手动为每个帖子嵌入按钮。
这是一个如何为Facebook实施社交按钮的基本示例。请注意，并非所有代码都是实际的生产代码，并且已被伪代码替换，以使实现更易于理解。
<？php
//文件：<theme_folder> /html_includes/partials/social-share.php
函数facebook_social_button（）{
$ article_url = get_article_url（）; //用Psuedo-code方法检索文章的URL。
$ article_url。=’＃utm_source = facebook＆utm_medium = social＆utm_campaign = social_buttons’;
$ title = html_entity_decode（get_og_title（））; //伪代码方法以检索og_title。
$ description = html_entity_decode（get_og_description（））; //检索og_description的伪代码方法。
$ og_image = get_og_image（）; //用Psuedo-code方法检索分配给帖子的og_image。
$ images = $ og_image-> get_images（）;
$ url =’http://www.facebook.com/sharer/sharer.php?s=100′;
$ url。=’＆p [url] =’。 urlencode（$ article_url）;
$ url。=’＆p [title] =’。 urlencode（$ title）;
$ url。=’＆p [images] [0] =’。 urlencode（$ images [0]）;
$ url。=’＆p [summary] =’。 urlencode（$ description）;
$ url。=’＆u =’。 urlencode（$ article_url）;
$ url。=’＆t =’。 urlencode（$ title）;
回声esc_attr（$ url）;
}
？>
<div id =“ social-share”>
<div class =“ socialbox”>
<a rel =“ nofollow” target =“ _ blank” data-name =“ facebook” aria-label =“在Facebook上分享” data-action =“分享”
href =“ <？php facebook_social_button（）;？>”> <i class =“ fa fa-facebook-square text-icon–facebook”> </ i> </a>
</ div>
</ div>
上面的代码可以类似地用于其他社交媒体平台，但是在URL结构方面可以有很大的不同。我们建议您查看所需平台的文档，以确保兼容性。
要将这些社交按钮包括在博客文章中，请在主题的文件夹中打开single.php，然后将以下代码段粘贴到您希望按钮出现的位置：
<？php get_template_part（’html_includes / partials / social-share’）; ？>
而已！如果您不想从这些按钮收集交互数据，那么这就是您所需要的。如果要跟踪交互，请继续阅读。
跟踪与社交按钮的交互
在您的网站上拥有样式精美的社交按钮是一回事，但是跟踪与它们的实际交互会更好。您可以使用JavaScript来确保正确完成对社交媒体共享的跟踪，因此您可以轻松查看哪些社交媒体平台在读者中很受欢迎。
此代码相对简单，取决于您的网站中是否正确实施了Google Analytics（分析）Tracker。假设是这种情况，下面的代码将有很大帮助：
jQuery（document）.ready（function（$）{$（’.socialbox a’）.click（function（e）{e.preventDefault（）; if（typeof __gaTracker！==“ undefined”）{__gaTracker（’send ‘，’social’，$（this）.data（’name’），$（this）.data（’action’），document.querySelector（“ link [rel =’canonical’]”“）.getAttribute（” href “））;}}）;}）;
上面的JavaScript代码段传递了一些额外的信息，这些信息一起传递给了定位标记。这些额外的信息可以通过数据前缀来标识，并可以通过调用$（this）.data（[…]）来检索。通过此方法，您可以扩展社交共享div并轻松添加更多按钮。
如果您想了解有关Google如何跟踪这些信息的更多信息，可以在这里阅读有关信息。
更新：使用Web Share API
正如Christoph Daum在评论中指出的那样，还有一个本地Web Share API，可用于在Safari和Chrome中实现社交/共享按钮。尽管目前仍缺少对Firefox和Opera的支持，但这也是一个很好的实现功能。
结论
如您所见，向您的博客添加社交按钮并不是很困难。与pa相比，即使在Google Analytics（分析）中跟踪它们也变得轻而易举