社交按钮如何在您的网站上添加和跟踪它们

2019.09.13 - 象牙白

社交按钮

为了帮助您的博客获得更多读者,您可以使用社交按钮,让您当前的读者可以在他们的社交媒体帐户上分享有趣的帖子。但是你应该怎么做呢?在这篇文章中,我们将为您提供一些如何入门的建议。

在我们潜入之前,如果您想了解更多关于社交媒体和其他重要的SEO技能,您应该查看我们的 全方位SEO培训!它不只是告诉你有关SEO的信息:它确保你知道如何将这些技能付诸实践!

什么是社交按钮?
对于那些不知道社交按钮是什么的人:他们是你在互联网上看到的按钮,通常位于博客文章下方,允许读者在各种社交媒体平台上分享文章。他们可以帮助您获得额外的曝光率,从而为您的网站带来更多流量。

以下是一些社交按钮的示例:

社交按钮
你是如何在WordPress中实现这些社交按钮的?
现在您可能想知道如何实现这些按钮。您最初的想法可能是最简单的方法是使用某种插件添加它们。但是,您也可以将其添加到主题中。这使您可以对如何设置样式和显示内容进行额外控制。当然,您也可以决定将这些按钮添加到插件中,但额外的好处是最小的。

一个选项是将社交按钮的代码放在模板中。通过这种方式,您可以轻松地将其嵌入整个网站,而无需大幅编辑模板文件或必须手动嵌入每个帖子的按钮。

这是一个如何为Facebook实现社交按钮的基本示例。请注意,并非所有代码都是实际的生产代码,并且已经被伪代码替换,以使实现更容易理解。

/html_includes/partials/social-share.php
function facebook_social_button() {
$article_url = get_article_url(); // Psuedo-code method to retrieve the article’s URL.
$article_url .= ‘#utm_source=facebook&utm_medium=social&utm_campaign=social_buttons’;
$title = html_entity_decode( get_og_title() ); // Psuedo-code method to retrieve the og_title.
$description = html_entity_decode( get_og_description() ); // Psuedo-code method to retrieve the og_description.
$og_image = get_og_image(); // Psuedo-code method to retrieve the og_image assigned to a post.
$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 );

echo esc_attr( $url );
}

?>

上述代码可以类似地用于其他社交媒体平台,但在URL结构方面可能有很大差异。我们建议您查看所需平台的文档以确保兼容性。

要在您的博文中添加这些社交按钮,请single.php在主题文件夹中打开并将以下代码段粘贴到您希望按钮显示的位置:


而已!如果您不想从这些按钮收集交互数据,那么这就是您所需要的。如果您想要跟踪互动,请继续阅读。

跟踪与社交按钮的交互
在您的网站上设置精美的社交按钮是一回事,但跟踪与它们的实际交互会更好。您可以使用JavaScript来确保正确完成社交媒体共享的跟踪,这样您就可以轻松查看哪些社交媒体平台在您的读者中很受欢迎。

此代码相对简单,取决于Google Analytics跟踪器是否已正确实施到您的网站中。假设是这种情况,以下代码将有很大帮助:

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代码段传递了一些传递给锚标记的额外信息。这些额外信息可以通过data-前缀识别,并通过调用来检索$( this ).data( […] )。此方法允许您扩展社交共享div并轻松添加更多按钮。

如果您想了解有关Google如何跟踪此信息的更多信息,请在此处阅读相关信息。

更新:使用Web Share API
正如Christoph Daum在评论中指出的那样,还有一个原生的Web Share API可用于在Safari和Chrome中实现社交/共享按钮。虽然目前仍然缺少对Firefox和Opera的支持,但它也是一个很好的功能。

结论
如您所见,将社交按钮添加到您的博客并不是很困难。与过去的实施相比,即使在Google Analytics中跟踪它们也变得轻而易举。

剩下的就是去实现按钮,让读者帮助推广你的帖子。祝好运!

- END -

32
0

如何从谷歌的最新“弗雷德”更新中恢复

弗雷德

为了帮助您的博客获得更多读者,您可以使用社交按钮,让您当前的读者可以在他们的社交媒体帐户上分享有趣的帖子。但是 […]