1. Home
  2. »
  3. WordPress
  4. »
  5. 如何在 WooCommerce 中提升产品销售额(5 种简单方法)

如何在 WordPress 中添加社交分享按钮(4 种简单方法)

如今,社交媒体是人们发现新内容的主要途径。

因此,WPBeginner 在每篇文章顶部都添加了社交分享按钮,方便访客将我们的内容分享到他们的社交媒体平台。我们发现,这能有效扩大我们的影响力,带来新的流量,并提升用户参与度。

除了分享之外,我们还发现,展示社交分享次数可以提升用户信任度并鼓励点击。当你突出显示内容的受欢迎程度时,就证明了其他人认可你的网站或产品。

本文将向您展示如何在 WordPress 网站上轻松添加社交分享按钮并显示分享次数。

为什么要在 WordPress 中添加社交分享按钮?

社交网络是当今最流行的在线活动之一。因此,社交媒体营销现在已成为每个小型企业发展战略的关键组成部分。

如果你想接触更多潜在客户,那么社交媒体平台是与新用户沟通的高效渠道。

问题在于,当你在社交媒体个人资料上分享内容时,它只能触达你已有的有限数量的粉丝。

但是,通过直接在网站上添加社交分享按钮,您可以鼓励访客将您的内容分享到他们的社交媒体动态中。这样,他们的朋友和粉丝就能看到您的内容,并可以点赞、评论和转发。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-example20251114_ -1

这样一来,社交分享按钮可以帮助你为网站带来更多流量,提升你的社交信誉,产生更多潜在客户,并提高用户参与度。

方法一:使用 Novashare 添加社交分享按钮(推荐)

Novashare是WordPress最好的社交媒体插件之一,它提供了一种简单的方法,让您可以轻松地在文章中添加社交分享按钮。您可以添加 Facebook、Pinterest、Twitter 和 LinkedIn 等热门平台的按钮,从而提升内容在各个社交平台上的传播范围。

您可以显示每篇文章的分享次数,并选择最适合您网站的按钮样式。该插件还针对 WordPress 的速度和性能进行了优化,因此您不必担心它会降低网站速度。

此外,Novashare 还允许您创建 “点击发推”框, 方便访客快速分享文章中的精彩语录。它还提供“关注”模块,可用于推广您的社交媒体账号。

首先,请访问Novashare网站并选择套餐。之后,您需要安装并激活插件。如果您需要帮助,请参阅我们的WordPress 插件安装指南。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) novashare-pricing-plans20251114_ -2

激活插件后,您需要在 WordPress 控制面板中导航至“设置”»“Novashare”页面以激活您的许可证。

请确保您位于“许可证”选项卡,然后粘贴您购买插件时获得的许可证密钥。接下来,请务必点击“保存许可证”按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-license20251114_ -3

启用社交分享内嵌按钮

激活许可证后,请点击“内嵌内容”选项卡启用内嵌内容功能。启用后,您就可以在文章和页面中添加社交分享按钮。或者,您也可以将社交按钮添加到浮动栏中,我们将在下一节中介绍。

只需将“启用内联内容”按钮切换到“开启”位置,然后选择要添加的按钮即可。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content120251114_ -4

Novashare 内置包含 26 个按钮的按钮库,涵盖 X(Twitter)、Facebook、LinkedIn 等热门社交网络。它还提供电子邮件、打印和复制等操作按钮。

接下来,您可以配置按钮在文章和页面上的显示位置。

向下滚动到“显示”部分。在这里,您可以勾选复选框,让社交按钮显示在您的帖子、页面和媒体附件页面上。如果您有网店,还会看到一个用于显示产品的复选框。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content220251114_ -5

您还可以从“按钮位置”下拉菜单中选择按钮位置。您可以选择将社交分享按钮显示在内容上方、内容下方或同时显示在两者上方。您也可以使用此短代码手动将按钮放置在每个页面上:

[novashare_inline_content]

移动设备断点允许社交按钮在较小的移动设备上正常显示,当按钮宽度达到一定值时,会将其拆分为两行或多行。默认值为 1200 像素,但为了更好地兼容较小的设备,您可以将其减小到 768 像素。

在下一节中,您可以设计按钮的外观。Novashare 提供数十种样式和形状组合供您选择,例如:

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-button-design-examples20251114_ -6

向下滚动到设计部分,你会看到按钮属性的下拉菜单,例如样式、布局、对齐方式、大小和形状。

只需选择最适合您网站的不同属性即可。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content320251114_ -7

接下来,您可以找到更改按钮颜色的选项。只需将这些按钮留空,即可显示您在选择按钮时看到的默认颜色。

您在此部分所做的任何颜色更改都将影响所有按钮。您可以设置按钮颜色、悬停颜色、按钮右侧图标的颜色等等。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content420251114_ -8

点击这些选项中的任何一个,都会出现一个颜色选择器,您可以在其中选择您想要使用的颜色。

本部分底部的“显示标签”选项允许您选择是否在每个社交网络的图标旁边显示其名称。

除了提供社交分享按钮外,最好还能显示当前帖子在所有社交渠道上的分享次数。

在博客文章中显示分享次数可以提升文章的可信度,因为它能展现内容的受欢迎程度,从而鼓励更多用户参与互动和分享。这提供了一种社会认同,表明你的内容受到他人的认可,进而增强用户对你的信任。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content520251114_ -9

此设置默认启用。您可以选择将当前帖子的分享次数显示在社交分享按钮之前或之后,还可以自定义颜色。

以下是一个在社交分享按钮后显示白色背景的分享计数示例。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-share-counts-example-border20251114_ -10

如果你愿意,还可以在按钮栏中添加行动号召,例如“分享给你的朋友!”。这可能会鼓励更多访客分享你的内容。

虽然我们自己的网站不提供此功能,但您只需在“文本”字段中输入信息即可添加行动号召。您还可以自定义字体大小和颜色。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-inline-content620251114_ -11

完成社交分享按钮的自定义后,点击页面底部的“保存更改”,即可将其添加到您的网站。

这是它在我们的演示网站上的样子:

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-demo-site20251114_ -12

启用社交分享浮动栏

您可以不直接在帖子和页面中添加社交分享按钮,而是将它们添加到网站边缘的浮动栏或移动设备屏幕底部的固定栏中。

默认情况下,它会显示在屏幕左侧,或者在窄屏幕上显示在底部。即使您滚动浏览内容,它也不会移动。

要在您的网站上启用浮动栏,您需要导航至“设置”»“Novashare”,然后点击左侧的“浮动栏”选项卡。

然后您可以启用浮动栏选项,并选择要添加的社交分享按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-floating-bar120251114_ -13

之后,您可以自定义工具栏的位置。

与“内联内容”选项类似,您可以点击复选框在帖子、页面、媒体存档以及(如果您有在线商店)产品上显示社交分享按钮。

您还需要启用“在文章页面显示”选项,才能在文章中显示按钮。如果您愿意,还可以启用“在归档页面显示”设置,以便在博客文章归档页面上显示浮动栏。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-floating-bar220251114_ -14

现在,您可以使用“按钮对齐方式”下拉菜单来选择在宽屏幕上将工具栏显示在页面的右侧还是左侧。在窄屏幕上,它将显示在页面底部。

您可以使用“顶部偏移”和“边缘偏移”选项来控制浮动栏与屏幕边缘的距离。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-floating-bar320251114_ -15

“滚动时显示”选项允许您隐藏社交图标,直到用户向下滚动页面达到设定的距离。

在本教程中,我们将使用默认设置,这些设置适用于大多数网站。

“设计”和“分享次数”部分的工作方式与上述“内嵌内容”设置相同。但是,此页面上还有一个针对移动设备的额外部分。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-floating-bar420251114_ -16

“移动设备”部分的默认设置适用于大多数网站。工具栏将固定在屏幕底部,但在宽度小于 800 像素的屏幕上会隐藏。

不过,您可以轻松更改最大宽度,以及按钮的背景颜色和内边距。此外,您还可以设置使进度条填充屏幕空间,或通过隐藏总分享数来节省空间。

设置完社交分享按钮后,请务必滚动到屏幕底部,然后点击“保存更改”按钮,以便在您的网站上显示浮动栏。

这是它在我们的演示网站上的样子:

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-floating-bar-example20251114_ -17

配置共享按钮

节省按钮栏空间的一种方法是使用“分享”按钮。这样,您可以将主要的社交网络添加为单独的按钮,用户点击“分享”按钮即可将内容分享到其他平台。

首先,请确保将“分享”按钮添加到“内联内容”或“浮动栏”中。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-add-share-button20251114_ -18

接下来,您可以通过导航至“设置”»“Novashare”,然后单击“分享按钮”选项卡来配置分享按钮的设置。

这样,您就可以选择用户点击“分享”按钮时要显示的其他社交网络。您还可以添加行动号召,并为这些附加按钮选择样式。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-share-button120251114_ -19

别忘了点击页面底部的“保存更改”按钮来保存您的设置。

这是点击“分享”按钮后,在我们的演示网站上的显示效果。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-share-button-example20251114_ -20

向图片添加 Pinterest 按钮

Novashare 还可以为网站上的每张图片添加Pinterest“Pin”按钮。默认情况下,当您将鼠标悬停在图片上时,此按钮才会显示。不过,您可以配置插件,使其始终显示这些按钮。

首先,导航至“设置”»“Novashare”,然后点击“Pinterest”选项卡。进入后,您可以将“启用图片 Pin 图”开关打开,并选择要显示按钮的“帖子类型”。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-pinterest120251114_ -21

您还可以自定义按钮的位置、形状和颜色,不过默认设置对于大多数网站来说效果都很好(请参见下面的屏幕截图)。

如果您希望即使鼠标悬停在图片上时也显示 Pinterest 按钮,请确保启用“始终显示”选项。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-pinterest220251114_ -22

最后,如果您有一些不想分享的图片,只需在“排除的图片”字段中输入文件名,这些图片就不会显示 Pinterest 按钮。

点击“保存更改”按钮保存设置后,即可开始在图像上显示 Pin 按钮。

这是鼠标悬停在我们的演示网站上的图片时的样子。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) socialshare-novashare-pinterest-example20251114_ -23

方法二:使用 Social Snap 添加社交分享按钮(免费)

如果您正在寻找一种免费的方式为您的网站添加社交分享按钮,那么 Social Snap 插件是付费工具的一个不错的替代方案。

首先,您需要安装并激活Social Snap插件。有关详细说明,您可以参阅我们的WordPress 插件安装新手指南。

激活后,从 WordPress 管理侧边栏访问Social Snap » 设置页面。然后,展开左侧栏中的“社交分享”选项卡。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) expand-social-sharing-tab20251114_ -24

这将打开侧边栏中的新设置,您需要选择“管理网络”选项卡。

接下来,点击“+ 添加网络”按钮,根据提示添加您选择的社交媒体网络。您可以添加 Facebook、Twitter、LinkedIn 和电子邮件等平台。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) click-add-network-button20251114_ -25

您还可以通过将鼠标悬停在眼睛图标上并将移动设备开关切换到“开启”来配置不同设备上的按钮可见性。这样做会将社交分享按钮显示给使用移动设备访问您网站的用户。

之后,退出“管理网络”选项卡。

这将带您进入常规设置页面,您可以在其中选择是否要为社交分享图标添加浮动栏或内联按钮。

添加社交分享内嵌按钮

社交分享按钮会显示在您的文章和页面的顶部或底部。

要将它们添加到您的网站,只需点击“内联按钮”选项卡将其展开即可。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-the-inline-buttons-tab20251114_ -26

这将在左侧栏打开新的设置,并在屏幕右侧显示社交分享按钮的预览。

在这里,您可以配置按钮的位置。您可以选择“内容下方”选项,将按钮显示在内容底部;选择“内容上方”选项,将按钮显示在页面顶部。

您还可以从这里自定义按钮的对齐方式、分享标签、形状和大小。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) customize-social-share-buttons20251114_ -27

接下来,向下滚动到“按钮标签”部分,您可以在这里决定是否要显示社交媒体平台的名称、分享次数或两者都显示。

之后,向下滚动到“显示位置”部分。在这里,如果您只想在文章中显示社交分享按钮,可以勾选“文章”复选框。您也可以勾选“页面”复选框,在“关于我们”、“联系我们”或“文章存档”页面上显示社交分享按钮。

此外,如果您只想在主页上显示社交分享按钮,可以勾选“主页”选项。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-where-you-want-to-display-social-share-buttons20251114_ -28

完成后,别忘了点击底部的“保存更改”按钮来保存您的设置。

您现在可以访问您的 WordPress 网站,查看社交分享按钮的实际效果。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) social-share-buttons-preview-220251114_ -29

添加社交分享浮动栏

如果您决定添加浮动栏,那么您的社交分享按钮将显示在您的WordPress 文章或页面的侧边栏中。

要做到这一点,只需打开“浮动侧边栏”选项卡即可。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-floating-bar-option20251114_ -30

这将打开左侧栏中的一些新设置,您可以在其中配置浮动栏图标的位置、大小和形状。

完成上述操作后,向下滚动到“显示在”部分,然后选择要显示社交分享按钮的页面。

例如,如果您只想在博客文章中显示社交分享浮动栏,则可以选择“文章”选项。

同样地,如果您也想在网站首页显示浮动栏,则可以选择“首页”选项。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-where-to-display-your-floating-bar20251114_ -31

最后,点击“保存更改”按钮以保存您的设置。

您现在可以访问您的 WordPress 博客,查看社交分享浮动栏的实际效果。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) social-sharing-floating-bar-preview20251114_ -32

为图片添加社交分享按钮

如果你有一个摄影网站,那么你可以借助 Social Snap 插件为你的图片添加社交分享按钮。

这将允许用户在他们的社交媒体上分享您的图片,并有助于为您的网站带来更多流量。

首先,您需要从 WordPress 控制面板访问Social Snap » 设置页面,然后点击“媒体”选项卡将其打开。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-the-on-media-option20251114_ -33

进入设置页面后,选择按钮类型。您可以将所有社交分享按钮添加到图片顶部,或者添加一个Pinterest 按钮

之后,您还可以选择按钮的大小、形状、可见性和位置。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-social-share-buttons-to-display-with-images20251114_ -34

然后,您可以设置图片的最小高度和宽度。这意味着,如果网站上的图片高度和宽度小于此限制,则分享按钮将不会显示。

接下来,您必须向下滚动到“显示在”部分,并检查您希望在图片上显示社交分享按钮的页面或帖子的选项。

如果您不想在移动设备上显示图片分享按钮,还可以将“在移动设备上隐藏”开关切换为“开启”。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) configure-display-settings20251114_ -35

最后,点击“保存更改”按钮以保存您的设置。

现在,只需访问您的 WordPress 网站即可在图片中查看社交分享按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) social-share-button-in-images-preview20251114_ -36

显示社交分享次数

如果您还想在社交分享按钮旁边显示分享次数,请访问Social Snap » 设置页面,然后从左侧栏展开“管理网络”选项卡。

之后,向下滚动到“Facebook 分享计数提供商”部分,您可以在那里选择两个来源中的任意一个。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-sharedcount-as-share-count20251114_ -37

不过,我们建议选择“SharedCount.com”选项。这样,统计数据将从SharedCount服务API获取。插件只需两次API调用即可获取所有统计数据,这对WordPress的性能最为有利。

如果您选择“Facebook Graph API”选项,则分享计数将从 Facebook API 获取,这可能会降低您的网站速度。

您只需在SharedCount.com网站上注册一个免费帐户,即可轻松获取 SharedCount API 。

为此,您需要提供电子邮件地址和密码,然后点击“创建帐户”按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) create-account-on-sharecount-120251114_ -38

网站现在会向您的邮箱发送确认链接。

请点击链接验证您的账户。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) click-account-verification-link20251114_ -39

现在,您必须再次登录您的 SharedCount 帐户,然后从屏幕右上角的下拉菜单访问“设置”页面。

这将带您进入一个新页面,您将在该页面上看到您的 SharedCount API 密钥。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) copy-sharedcount-api-key20251114_ -40

您需要复制此密钥,然后返回 WordPress 网站上插件的设置页面。

现在,请将 API 密钥粘贴到“SharedCount API 密钥”字段中。

之后,点击“保存更改”按钮以保存您的设置。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) paste-sharedcount-api-key20251114_ -41

然后您可以再次输入此 API 密钥来获取您的 X(Twitter)分享次数。之后,点击“保存更改”按钮以保存您的设置。

您现在可以访问您的网站,查看每篇博客文章的社交分享按钮及其分享次数。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) share-buttons-with-count-previewpng20251114_ -42

方法三:使用 SeedProd 在自定义落地页上添加社交分享按钮

如果您想为您的网站构建带有社交分享按钮的自定义着陆页,那么您可以使用SeedProd轻松实现。

我们认为它是市面上最好的WordPress页面构建器。它配备了拖放式构建器、300多个预制模板和高级模块,可以创建带有社交分享按钮的精美落地页。

首先,您需要安装并激活SeedProd插件。有关详细说明,请参阅我们的WordPress 插件安装分步指南。

注意:SeedProd 也提供免费套餐,您可以将其用于本教程。不过,升级到付费套餐将解锁更多功能。

激活后,从 WordPress 控制面板访问SeedProd » 着陆页 部分,然后点击“添加新着陆页”按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) click-add-new-landing-page-button-420251114_ -43

这将带您进入“选择新页面模板”屏幕,您将在其中看到许多预制模板可供选择。

做出选择后,系统会要求您输入即将创建的着陆页的名称。

输入这些信息后,只需点击“保存并开始编辑页面”按钮即可继续。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) enter-your-page-details20251114_ -44

这将启动 SeedProd 的拖放式构建器,您将在左侧列中看到模块列表,右侧显示页面预览。

现在您可以拖放不同的模块来构建页面。更多详情,请参阅我们关于如何在 WordPress 中创建着陆页的教程。

之后,只需在左侧栏中找到“社交分享”模块,并将其添加到页面上的所需位置即可。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) add-social-sharingblock20251114_ -45

接下来,您需要再次点击该模块,在侧边栏打开其设置。在这里,您可以从下拉菜单中选择要添加的社交媒体平台。

您还可以通过点击列中的“+ 添加新分享”按钮来添加新的社交分享按钮。

之后,您还可以配置按钮的大小和对齐方式。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) choose-social-media-platform20251114_ -46

您甚至可以切换到顶部的“高级”选项卡来更改间距、选择设备可见性、添加自定义 CSS 以及使用动画效果。

完成后,只需点击顶部的“保存”按钮,然后点击“发布”按钮即可保存您的设置。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) publish-landing-page-with-social-sharing-block20251114_ -47

现在,只需访问自定义着陆页即可查看社交分享按钮的实际效果。

这是该页面在我们演示网站上的样子。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) landing-page-with-social-sharing-block20251114_ -48

方法四:使用 Sassy Social Share 添加 WhatsApp 分享按钮(额外技巧)

除了社交媒体平台,您还可以在 WordPress 网站上添加 WhatsApp 分享按钮。WhatsApp 是一款即时通讯应用,允许世界各地的人们互相联系。

添加 WhatsApp 分享按钮后,用户即可将您的网站内容分享给他们的联系人,包括朋友、家人和同事。这可以提升用户参与度,增强内容曝光度,并帮助您扩大品牌影响力。

使用Sassy Social Share插件,您可以轻松地在 WordPress 中添加 WhatsApp 分享按钮。

如何在 WordPress 中添加社交分享按钮(4 种简单方法) whatsapp-share-button20251114_ -49