首页 » 博文 » wpbeginner » 最佳插件 » 如何在 WordPress 中添加 Instagram 购物图片

如何在 WordPress 中添加 Instagram 购物图片

您想将可购物的 Instagram 图片添加到您的 WordPress 网站吗?

Instagram 购物图片包含访客可以点击购买您的产品的链接。这使您可以通过嵌入引人注目的自动更新的 Instagram feed 在您的网站上推广产品。

在本文中,我们将向您展示如何在 WordPress 中轻松添加 Instagram 购物图片。

如何在 WordPress 中添加 Instagram 购物图片

什么是 Instagram 购物?

Instagram 可购物图片是 Instagram 购物的一种简单且用户友好的替代方案,因此让我们首先看看两者之间的差异。

Instagram 购物允许您在 Instagram 照片中标记产品。

可购物的 Instagram 帖子

您的 Instagram 关注者只需单击图标即可查看产品的名称、描述和价格。

访客可以再次点击屏幕前往您的 Instagram 商店,在那里他们可以购买社交媒体帖子中推荐的产品。

可购物 Instagram 帖子中的产品

这是一种很棒的用户体验,但设置起来并不容易。

您需要获得 Instagram 的批准才能使用其购物功能,其中一些要求很模糊。

例如,您需要“表现出可信度,包括通过真实的、既定的存在”。您还需要保持“足够的追随者基础”。

此外,您还必须设置 Facebook 目录、产品目录和 Facebook 业务页面。

换句话说:很多。

正因为如此,许多 Instagram 用户正在寻找一种更简单的方式来推广他们的产品。这就是可购物的 Instagram 图片的用武之地。

为什么要在 WordPress 中添加可购物的 Instagram 图片?

可购物的 Instagram feed 是一系列带有产品或服务链接的照片。Instagram 用户无法点击这些链接,如下图所示。

向 Instagram 帖子添加可购物链接

但是,当您将提要嵌入 WordPress 网站时,这些链接是可单击的。通过这种方式,Instagram 购物提要是在WordPress 网站上推广产品的一种有吸引力且引人注目的方式。

您在这些帖子上获得的任何点赞和评论也可以充当社会证据,并鼓励人们点击产品的链接。

更好的是,由于这些可购物链接出现在您的博客上,因此您可以完全控制它们。这意味着您不必遵循 Instagram 严格的购物政策或设置 Facebook 产品目录。

话虽如此,让我们看看如何使用Smash Balloon Instagram Pro轻松将 Instagram 购物图像添加到您的 WordPress 网站。

如何安装具有 Shoppable 支持的Instagram 照片插件

在 WordPress 中添加 Instagram 可购物图像的最佳方法是使用Smash Balloon Instagram Pro。这个免费插件可让您在完全可定制的源中显示来自一个或多个 Instagram 帐户的照片。

使用 Smash Balloon 创建的可购物 Instagram feed

当您向 Instagram 发布新的可购物图片时,它们会自动出现在您的网站上,因此访问者将始终看到最新的帖子,而无需您手动添加它们。

在本指南中,我们将使用 Smash Balloon 的高级版本,因为它具有在 WordPress 中添加可购物图像所需的高级功能。不过,还有一个免费版本可以让您将Instagram 嵌入 WordPress 中

在开始之前,您需要将 Instagram 帐户连接到 Facebook 页面。如果您有个人 Instagram 帐户,那么您可能还想将其转换为企业帐户,因为这样 Smash Balloon 可以自动显示您的 Instagram 简介和标题。

有关如何执行这两项操作的分步说明,您可以参阅本指南末尾的常见问题解答部分。

准备好后,继续安装并激活 Smash Balloon Instagram Pro 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的指南。

激活后,前往Instagram Feed » 设置,然后在“许可证密钥”字段中输入您的许可证密钥。

激活 WordPress 的 Instagram Feed Pro 插件

您可以在Smash Balloon 网站上的帐户中找到此信息。

输入密钥后,只需单击“激活”按钮即可。

如何将 Instagram 帐户连接到 WordPress

激活插件后,您的第一个任务是将您的 Instagram 帐户连接到 WordPress。只需转到Instagram Feed » 设置,然后点击“添加新内容”。

如何创建新的可购物 Instagram feed

借助 Instagram Feed Pro,您可以从标记的帖子和主题标签创建提要,甚至可以使用来自许多不同社交媒体网站的内容制作社交墙。

我们想要显示 Instagram 时间线中的可购物图像,因此只需选择“用户时间线”,然后单击“下一步”。

在 WordPress 中创建可购物的 Instagram feed

现在,选择您将从中获取可购物图片的 Instagram 帐户。

首先,单击“添加源”按钮。

添加可购物 Instagram feed 的来源

之后,选择是否要显示个人或企业 Instagram 帐户中的可购物图片。

如果您选中“个人”旁边的复选框,则默认情况下,Smash Balloon 不会在您的标题中包含 Instagram 头像和简介。但是,您始终可以在插件的设置中手动添加 Instagram 头像和个人简介。

将角色或企业 Instagram 帐户链接到 WordPress

选择“个人”或“企业”后,点击“使用 Facebook 登录”。

现在,您可以选择要在 WordPress 网站上显示的 Instagram 帐户,然后单击“下一步”。

选择可购物的 Instagram 来源

之后,选中 Facebook 页面旁边的复选框,该页面与您的可购物图片链接到 Instagram 帐户。

完成后,只需单击“下一步”按钮。

选择您要使用的 Facebook 页面

您现在将看到一个弹出窗口,其中包含 Instagram Feed Pro 将有权访问的所有信息以及它可以执行的操作。

要限制插件访问您的 Instagram 帐户,只需单击任意开关将其从“是”更改为“否”。请注意,这可能会影响您可以在WordPress 博客或网站上显示的照片。

考虑到这一点,我们建议启用所有开关。如果您对设置感到满意,请点击“完成”。

更改粉碎气球可以访问的信息

现在,您将看到一个弹出窗口,其中包含您刚刚添加到网站的 Instagram 帐户。

只需选中该帐户旁边的复选框,然后单击“添加”即可。

将可购物图像源添加到 WordPress 网站

Instagram Feed Pro 现在将带您返回Instagram Feed » 所有 Feed屏幕。

要创建提要,只需选中您要使用的 Instagram 帐户旁边的框即可。然后,单击“下一步”。

如何创建可购物的 Instagram feed

该插件现在将创建一个 Instagram 照片源,您可以将其添加到任何页面、帖子或小部件就绪区域。

但是,在显示可购物图像之前,需要配置一些额外的设置。

如何启用 Smash Balloon 的购物功能(可选)

有两种方法可以让您的 Instagram 照片供购物。

首先,您只需在图像的 Instagram 标题中添加每个链接即可。这些链接将出现在您的网站和 Instagram 上。但是,用户将无法单击 Instagram 中的 URL,如下图所示。

Instagram 可购物标题的示例

这可能会让 Instagram 用户感到沮丧。但是,如果您确实想将链接直接添加到标题中,那么您可以跳过此部分。

另一种选择是,通过将每个图像链接到 Smash Balloon 设置中的 URL,在访问者单击帖子后立即在新选项卡中打开可购物链接。这种方法稍微耗时一些,但是链接在Instagram上不会可见,这是一个更好的用户体验。 

要使用此方法,您需要启用 Smash Balloon 的购物功能。只需选择“设置”选项卡,然后单击“可购物源”。 

如何为您的在线商店创建可购物的 Instagram feed

在此屏幕上,继续切换“启用”滑块,使其变为蓝色。

Smash Balloon 现在将在 Instagram feed 中的每张照片或视频上显示“添加”按钮。

如何将可购物链接添加到 WooCommerce 网站或电子商务商店

只需找到您想要进行购物的第一篇帖子,然后单击其“添加”按钮即可。

现在,您可以在“产品链接”字段中输入产品或服务的 URL,然后单击“添加”。

如何向 Instagram 帖子添加购物链接

现在,单击这张照片将在新选项卡中打开链接的 URL。

只需重复这些步骤即可使每张图片都可以购买。

如果您需要随时更改帖子的 URL,只需将鼠标悬停在该帖子上并单击“更新”即可。

更改 Instagram feed 中的可购物链接

添加所有链接后,请不要忘记单击“保存”按钮。

如何过滤您的可购物 Instagram Feed

默认情况下,Smash Balloon 会显示您 Instagram 帐户中的所有图像和视频。但是,由于我们正在创建可购物源,您可能需要过滤您的帖子,并且仅显示链接到产品或服务的照片。

这可以帮助购物者在您的在线商店中找到要购买的产品,而不会被 Instagram feed 中的其他照片和视频分散注意力。

借助 Smash Balloon,可以轻松根据标题过滤 Instagram 帖子。您只需将关键字或主题标签添加到 Instagram 上的可购物图片中,然后在 Smash Balloon 中创建匹配的过滤器即可。

例如,在下图中,我们对所有要使其可购物的图像使用#ordernow 主题标签。

按主题标签过滤可购物的 Instagram feed

要在 Smash Balloon 中创建过滤器,请选择“设置”选项卡。

然后,继续并点击“过滤器和审核”。

使用主题标签过滤可购物的 Instagram 照片和视频

在“仅显示包含以下内容的帖子”框中,输入要在过滤器中使用的主题标签或关键字。

要在过滤器中使用多个单词,只需用逗号分隔每个主题标签或关键字即可。

向可购物的 Instagram feed 添加过滤器

如果您对过滤器的设置感到满意,请单击“保存”按钮。

请注意,预览不会立即更新,因此您需要刷新页面才能查看过滤器的运行情况。

经过过滤的可购物 Instagram feed

如何定制您的可购物 Instagram Feed

当您对购物 Feed 中显示的照片和视频感到满意时,您可能想要更改 Feed 的外观。

要自定义您的 Instagram 购物源,只需单击“自定义”选项卡即可。左侧是可用于更改社交媒体源外观的所有设置。

如何自定义您的可购物 Instagram feed

大多数设置都是不言自明的,但我们将快速介绍一些可以帮助您获得更多销售额的关键领域。

让我们从顶部开始,选择“Feed Layout”。在这里,您可以为您的购物提要选择不同的布局,例如突出显示和轮播,这非常适合在 WordPress 中创建响应式滑块

将 Instagram 购物图片添加到 WordPress

当您进行更改时,预览将自动更新,以便您可以尝试不同的设置以查看最佳效果。

根据布局,您将获得一些额外的设置,可用于微调您的 Feed。例如,如果您选择“突出显示”,则可以告诉 Smash Balloon 根据模式、帖子 ID 或特定主题标签突出显示帖子。这非常适合突出显示您最受欢迎的产品

使用 Smash Balloon 以突出显示的布局显示 Instagram 购物图像

到 2025 年,预计美国消费者每年将在移动设备上花费 7100 亿美元。考虑到这一点,您需要确保可购物的 Instagram feed 在智能手机和平板电脑上的外观与在台式机上一样好。

默认情况下,Smash Balloon 将在台式电脑和移动设备上显示相同数量的照片。

您可以使用右上角的一排按钮预览可购物源在台式电脑、平板电脑和智能手机上的外观。

为电子商务网站创建适合移动设备的布局

您可以通过更改“帖子数”和“栏数”部分中的设置来减少移动设备上显示的可购物照片。

进行任何更改后,单击“自定义”链接。这将带您返回主 Smash Balloon 编辑器,准备好探索下一个选项,即“配色方案”。

更改可购物 Instagram feed 的配色方案

默认情况下,Smash Balloon 使用从WordPress 主题继承的配色方案,但它也有“浅色”和“深色”主题,您可能希望将其用于可购物源。

另一种选择是通过选择“自定义”来创建您自己的配色方案。然后,只需使用控件即可 更改WordPress 中的链接颜色、背景颜色、 文本颜色等。

更改 Instagram 购物 Feed 的配色方案

默认情况下,Smash Balloon 会向可购物源添加一个标题,即您的个人资料图片和页面名称。

要更改此部分的外观,请单击左侧菜单中的“标题”,然后使用设置更改背景颜色、标题大小、添加 Instagram 简介文本等。

自定义嵌入式 Instagram feed 的标题

您还可以添加不同的个人简介。例如,您可以鼓励人们购买您的产品,或为访问者提供独家优惠券代码。

有关创建这些代码的更多信息,请参阅我们的专家为您的在线商店挑选的最佳 WordPress 优惠券代码插件

要创建独特的 Instagram 简介,只需在“添加自定义简介”框中输入即可。

如何在 WordPress 中添加 Instagram 购物图片

完成后,单击“自定义”返回主 Smash Balloon 编辑器。

然后,选择“帖子”。

如何在 WordPress 中自定义单个 Instagram 帖子

这将带您进入一个有几个不同选项的屏幕。

您可以查看这些设置并进行任何所需的更改,但我们将重点关注“标题”。

自定义 Instagram 标题

如果您在标题中添加了可购物链接,那么让文本脱颖而出就很重要。例如,您可以将标题放大。

您甚至可以为标题使用不同的颜色。

为可购物的 Instagram 标题添加样式

完成后,单击“帖子”返回上一屏幕。

在这里,您还会看到一个“悬停状态”选项,这是当您将鼠标悬停在帖子上时 Smash Balloon 添加到帖子上的叠加层。

向可购物的 Instagram feed 添加悬停状态

这使得访问者无需先打开该 Instagram 帖子即可看到您标题中的任何链接。

在此屏幕上,您可以使用设置来创建引人注目的彩色叠加层。

如何为 Instagram 照片和视频源创建自定义悬停状态

选择“悬停状态”后,您将能够更改将鼠标悬停在每个帖子上时出现的背景颜色和文本颜色。

在“要显示的信息”下,您将看到 Smash Balloon 可以作为叠加层的一部分显示的所有不同信息。只需选中您想要显示的每条信息旁边的框即可。

粉碎气球的悬停状态设置

如果您要向标题添加可购物链接,请确保启用“标题”。

当您对更改感到满意时,单击“自定义”返回到 Smash Balloon 编辑器主屏幕。您现在可以选择下一个选项,即“加载更多按钮”。

Smash Ballon 的“加载更多”按钮设置

默认情况下,Smash Balloon 会在 Instagram feed 的底部添加一个“加载更多”按钮,以便访问者可以滚动浏览您的可购物帖子。

在这里,您可以更改按钮的背景颜色、文本颜色和悬停状态。

您还可以通过在“文本”字段中输入内容来将您自己的消息添加到按钮。

如何向可购物的 Instagram feed 添加“加载更多”按钮

虽然我们建议启用“加载更多”按钮以获得更多销量,但您也可以将其删除。

例如,您可以通过限制人们在您的在线市场或商店中可以看到的照片数量来鼓励人们访问您的 Instagram 页面。

要删除该按钮,只需单击“启用”滑块即可将其从蓝色变为灰色。

如何从 WordPress 中的社交媒体照片源中删除“加载更多”按钮

如果购物者喜欢他们所看到的内容,他们可能会决定使用可购物源下方显示的“在 Instagram 上关注”按钮在 Instagram 上关注您。

由于它是如此重要的按钮,您可能希望通过从主 Smash Balloon 编辑器屏幕中选择“关注按钮”来帮助它脱颖而出。

向可购物的 Instagram feed 添加关注按钮

在这里,您可以更改按钮的背景颜色、悬停状态和文本颜色。

您还可以将默认的“在 Instagram 上关注”文本替换为您自己的消息。

如何使用“关注”按钮获得更多关注者

与往常一样,完成这些设置后,只需单击“自定义”即可返回主编辑器屏幕。

如果您启用了 Smash Balloon 购物功能,那么点击 Instagram feed 中的任何帖子都会打开一个新选项卡,并将它们直接带到链接的产品页面。

但是,如果您还没有启用购物功能,那么您可能想看看 Smash Balloon 的灯箱功能。

此功能允许访问者在灯箱弹出窗口中打开图像或视频,而无需离开您的网站。然后他们可以点击 Instagram 标题中的可购物链接。

Smash Ballon 的 Instagram 灯箱弹出窗口

要启用或禁用灯箱,只需从左侧菜单中选择“灯箱”即可。

在这里,您可以使用“启用”滑块删除或添加此功能。

如何启用或禁用 Instagram 灯箱弹出窗口

您还可以更改 Smash Balloon 在灯箱中显示的评论数量。与产品评论类似,正面评论可以帮助您销售更多产品和服务。

但是,它们也可能会分散您的注意力,因此您可能需要在“否”中输入最大数字。的评论框。

如何限制 Instagram 购物提要中的评论数量

另一种选择是通过单击“评论”开关来完全隐藏评论。

当您对 Instagram feed 的外观感到满意时,请不要忘记单击“保存”来存储您的更改。您现在已准备好将可购物的 Instagram feed 添加到您的网站。

如何在 WordPress 中嵌入 Instagram Feed

您可以使用块、小部件或短代码将可购物源添加到您的网站。

如果您使用 Smash Balloon 插件创建了多个 feed,那么如果您要使用小部件或块,则需要知道 feed 的代码。

要获取此代码,请转到Instagram Feed » 所有 Feed,然后复制“短代码”列中的值。

可购物 Instagram feed 的代码

如果您想将 Instagram Feed 嵌入页面或帖子中,我们建议您使用 Instagram Feed 块。

只需打开您想要嵌入可购物照片和视频源的页面或帖子即可。然后,单击“+”图标添加新块并开始输入“Instagram Feed”。

当右侧块出现时,单击将其添加到页面或帖子中。

Instagram Feed WordPress 块

默认情况下,该块将显示您的 Smash Balloon feed 之一。如果您想显示不同的 Instagram feed,请在右侧菜单中找到“短代码设置”。

在这里,只需添加短代码,然后单击“应用更改”。

将可购物的 Instagram feed 添加到页面或帖子

该块现在将显示您 Instagram 源中的所有照片和视频。只需发布或更新页面即可使提要出现在您的网站上。

另一种选择是将提要添加到任何小部件就绪区域,例如侧边栏或类似部分。这允许访问者从您网站的任何页面使用您的 Instagram feed 进行购物。

只需转到WordPress 仪表板中的外观 » 小部件,然后单击蓝色的“+”按钮。

将可购物提要添加到任何小部件就绪区域

在搜索栏中输入“Instagram Feed”,然后在出现时选择正确的小部件。

请注意,WordPress 有一个内置的 Instagram 小部件,因此请确保您选择显示官方 Instagram 徽标的小部件。

向 WordPress 添加可购物的 Instagram 小部件

接下来,只需将小部件拖到您想要显示可购物 Instagram feed 的区域,例如侧边栏或类似部分。

该小部件将自动显示您使用 Smash Balloon 创建的提要之一。如果这不是您刚刚创建的可购物 Instagram feed,请在“短代码设置”框中输入该 feed 的代码。

之后,单击“应用更改”。

现在,您可以通过单击“更新”按钮使小部件生效。有关更多信息,请参阅我们有关如何在 WordPress 中添加和使用小部件的分步指南。

另一种选择是使用短代码将 Instagram feed 嵌入任何页面、帖子或小部件就绪区域。

如需放置短代码的帮助,请参阅我们有关如何添加短代码的指南。

此外,如果您使用的是启用块的主题,那么您可以使用完整的网站编辑器在网站的任何位置添加 Instagram Feed 块。

有关 如何在 WordPress 中添加 Instagram 购物图片的常见问题解答

Instagram Feed Pro 可以轻松地在您的 WordPress 网站上显示可购物的帖子。话虽如此,以下是有关将 Instagram 购物图片添加到 WordPress 的一些最常见问题。

如何创建 Instagram 企业帐户?

Smash Balloon 的 Instagram Feed Pro 可以显示来自个人或企业 Instagram 帐户的可购物图像。

但是,Smash Balloon 无法自动从个人 Instagram 帐户获取 Instagram 头像和简介。因此,您可能需要检查您是否拥有个人帐户或企业帐户,然后切换到企业帐户。然后,Smash Balloon 可以自动获取您的头像和简介。

要进行检查,只需访问您的 Instagram 帐户并单击三行图标即可。

Instagram 设置页面

之后,选择“设置”。

如果您没有 Instagram 企业帐户,则此屏幕的左侧菜单中将显示“切换到专业帐户”。

切换到 Instagram 企业帐户

如果您当前有个人帐户并想切换到企业帐户,请继续并单击该链接。

如何将 Facebook 页面连接到 Instagram 帐户?

在将可购物的 Instagram 图片添加到 WordPress 之前,您需要将 Instagram 帐户连接到 Facebook 页面。

为此,请转到您要使用的 Facebook 页面,然后单击左侧菜单中的“设置”。

之后,点击“链接帐户”并选择“Instagram”。最后,继续并单击“连接”按钮。

如何连接 Instagram 和 Facebook

Facebook 现在将显示其能够访问的所有信息以及它可以在 Instagram 上执行的操作。

如果您愿意继续,请单击“连接”按钮。

授予 Facebook 访问您 Instagram 的权限

请注意,管理您 Facebook 页面的任何其他人都可以看到您客户的 Instagram 消息并对其进行回复。如果您想将 Instagram 消息保密,请单击以禁用该选项。

当您满意并准备好继续前进时,只需单击“确认”即可。

配置 Instagram 权限

这将打开一个弹出窗口,您可以在其中输入 Instagram 用户名和密码。

准备好后,单击“登录”。

连接 Instagram 企业页面和 Facebook 页面

片刻之后,您将看到一条消息,表明您的 Instagram 和 Facebook 帐户现已连接。

我们希望本文能帮助您了解如何在 WordPress 中添加 Instagram 购物图片。您可能还想查看我们有关如何创建免费企业电子邮件地址的指南,或查看我们的专家为您的商店挑选的最佳 WooCommerce 插件

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top