Wordpress插件与设计 - Elementor 专业教程 22 - Facebook Button小工具的设置和使用方法 - 特色图片

Elementor 专业教程 22 - Facebook Button小工具的设置和使用方法

Elementor Facebook Button小工具是用于在页面中添加Facebook按钮的工具。此工具使得添加Facebook按钮变得轻松,让用户方便地访问和分享你的Facebook页面。

Facebook Button小工具提供了多种按钮样式,可以根据网页的设计风格进行按钮的优化和调整,包括自定义按钮文本、颜色、对齐方式等。

此外,此工具可以帮助网站提高Facebook页面的曝光度和互动性,同时也有助于网站内容的传播和分享。

本教程将说明Facebook Button小工具的功能设置和使用说明。

Elementor Facebook Button小工具

首先,将Facebook Button小工具拖放到编辑栏内,如下图所示。

拖放小工具到编辑栏后,可以看到如下画面。

可以看到编辑栏中并没有出现任何按钮。这是因为要使用Facebook Button,需要先设置Facebook App ID。

1.设置Facebook App ID

如果要在站内设置Facebook Button,需要在Wordpress内设置Facebook App ID进行站点和Facebook账号关联操作。

点击上图中的“Integrations Settings”,进入Wordpress后台设置页面。

下拉画面找到上图中的“Facebook SDK”设置部分。在APP ID旁边的输入框中输入取得的“Facebook APP ID”。

2.取得Facebook App ID

要取得Facebook App ID,需要访问《Meta for Developers》网站,并点击右上方的我的应用按钮。

※注意:如果没有Facebook账号,需要先申请一个Facebook账号。

进入我的应用页面后,点击《创建应用》按钮,创建一个新应用。

在弹出的选项中,选择最下方的《没有》选项(因为只是按钮操作,所以选择没有选项),并点击下一步。

在上图画面中,给应用输入任意的按钮名称。然后点击创建应用。

※注意:不能用Facebook这个单词。图中文字是举例。

点击创建应用以后,需要输入Facebook账号密码,然后点击提交。

提交后,可以在左上方看到应用编号。那就是App ID。以上就是创建ID的流程。

但是,有了APP ID还不能正常使用。还需要完成一些设置。

按照上图中的顺序需要输入③,④,⑤的内容。特别是④号的隐私政策页面是必须输入的。如果不输入,应用就无法使用。输入好后,最后点击保存。

接下来需要添加网站。下拉找到“添加平台按钮”,并点击“添加平台”。

在弹出的选项中选择Website,并点击下一步。

在网站地址栏中输入自身网站的链接,并点击下方的“保存更改”。

最后,将上方的开发中按钮移动到上线那一边,然后保存更改。

以上就是使用Facebook App ID的操作步骤。

获得App ID后,返回到wordpress后台,将刚刚获得的App ID输入到指定的输入框中,如下图:

输入完成后,直接点击保存即可。

3.Facebook Button 小工具的内容标签

Facebook Button 小工具的内容标签包含以下设置选项:

  1. Type
  2. Layout
  3. Size
  4. ColorScheme
  5. Share Button
  6. Faces
  7. Target URL
  8. URL Format
3-1 Type

Type是指定Facebook按钮类型的设置选项,有“Like”和“Recommend”两种选择:

  • Like:点赞
  • Recommend:推荐

Type(类型):这个选项用于设置 Facebook 按钮的类型,可以选择标准按钮或圆形按钮。

3-2 Layout

Layout是指定Facebook按钮布局方式的设置选项,以下是可选的预设:

  • Standard
  • Button
  • Button count
  • Box count
3-3 Size

Size是指定Facebook按钮大小的设置选项,有“Small”和“Large”两种选择。

3-4 Color Scheme

Color Scheme是选择Facebook按钮颜色方案的设置选项,有“Light”和“Dark”两种选择。

默认情况下,Light和Dark的区别不大,但如果背景色较暗,两者的区别将更加明显。如下图:

3-5 Share Button

Share Button是启用或禁用分享按钮的设置选项,默认为禁用状态。

启用后,点赞或推荐按钮旁边会增加分享按钮,方便用户分享站内内容。

3-6 Faces

Faces是启用或禁用显示Facebook用户头像的设置选项,默认为禁用状态。

启用后,点赞过的Facebook用户头像会显示在文本之后。如下图:

3-7 Target URL

Target URL是指定Facebook按钮目标链接地址的设置选项,有以下两个选项:

  • Current Page:当前页面
  • Custom :自定义链接地址

选择Current Page时,用户点击网站上的“分享”按钮,就可以将网站分享到他们的朋友圈。

选择Custom时,可以自定义输入想让用户分享的页面链接。

3-8 URL Format

URL Format是指定Facebook分享按钮链接格式的设置选项,有以下两个选项:

  • Plain Permalink:直接分享当前页面的链接。
  • Pretty Permalink:页面链接将转换成Facebook专属链接,优点是链接会变短。

4. Facebook Button 小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是Facebook Button小工具的功能设置和使用说明。希望本篇内容能对您使用Elementor时有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - Elementor 专业教程 7 - Slides小工具的设置和使用方法 - 特色图片
Elementor 专业教程 7 - Slides小工具的设置和...
Wordpress插件与设计 - Elementor 专业教程 16 - Testimonial Carousel小工具的设置和使用方法 - 特色图片
Elementor 专业教程 16 - Testimonial Carousel...
Wordpress插件与设计 - JetEngine 通用教程 2 - Labels和Advance Setting的设置方法 - 特色图片
JetEngine 通用教程 2 - Labels和Advance Setti...
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 17 - 轻松添加和编辑小工具,让网站与用...
Wordpress插件与设计 - Elementor 专业教程 26 - Template小工具的设置和使用方法 - 特色图片
Elementor 专业教程 26 - Template小工具的设置...
Wordpress插件与设计 - Elementor 基础教程 27 - HTML小工具的设置和使用方法 - 特色图片
Elementor 基础教程 27 - HTML小工具的设置和使...
Wordpress插件与设计 - Elementor 专业教程 21 - Blockquote小工具的设置和使用方法 - 特色图片
Elementor 专业教程 21 - Blockquote小工具的设...
Wordpress插件与设计 - Elementor 专业教程 24 - Facebook Embed小工具的设置和使用方法 - 特色图片
Elementor 专业教程 24 - Facebook Embed小工具...
Wordpress插件与设计 - WP教程 28 - 如何有效使用WP评论功能,提高博客的互动性! - 特色图片
WP教程 28 - 如何有效使用WP评论功能,提高博客...
Wordpress插件与设计 - Elementor 基础教程 10 - 图标小工具的设置使用方法 - 特色图片
Elementor 基础教程 10 - 图标小工具的设置使用...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - Crocoblock 通用教程 1 - 购买或订阅Jet插件和在WP中激活插件的方法 - 特色图片

Crocoblock 通用教程 1 - 购买或订阅Je...

google-sheets-to-wordpress-table-sync-plugin tumnail

告别手动更新?如何用Google Sheets打...

Wordpress插件与设计 - Elementor 专业教程 29 - Video Playlist小工具的设置和使用方法 - 特色图片

Elementor 专业教程 29 - Video Playli...

Wordpress插件与设计 - WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片

WP教程 5 - 古腾堡编辑器使用指南!逐...

Wordpress插件与设计 - WP教程 23 - 使用媒体区块,创建出色的多媒体页面!以提高网站的互动性 - 特色图片

WP教程 23 - 使用媒体区块,创建出色的...

Wordpress插件与设计 - JetEngine 使用教程 1 - 如何制作自定义文章类型以及进行具体设置和使用方法 - 特色图片

JetEngine 使用教程 1 - 如何制作自定...

AI工具 与服务
AI工具与服务推荐 - Writefull X - AI学术写作工具 - 特色图片

Writefull X - AI与学术写作的完美结合...

AI工具与服务推荐 - XKool - AI云端建筑设计平台 - 特色图片

XKool云端智能建筑 - AI技术简化设计流...

AI工具与服务推荐 - Lexion - 合同管理平台 - 特色图片

Lexion - 合同处理秒速完成,交易进度...

AI工具与服务推荐 - 多种草AI - AI创作支持平台 - 特色图片

多种草AI - 自媒体运营的全能AI助手,...

YYP-2024-06-29-07-48-10

Second Nature - AI角色扮演训练,提升...

AI工具与服务推荐 - ArtHub.ai - AI艺术创意社区 - 特色图片

ArtHub.ai - AI艺术社区,发现与分享惊...

Canva教程 与技巧
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片

Canva新手指南4 – 告别平庸!用Canva打...

Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片

Canva 使用教程 9 - 如何巧妙地利用建...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片

Canva新手指南2 – 告别PS!全面解析Can...

Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片

Canva新手指南6 - 无需专业软件!用Can...

社媒运营 与营销
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片

YouTube运营全攻略:从零到一打造你的油...

社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片

YouTube频道交易的大揭秘:机遇还是陷...

社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片

YouTube Shorts!解析短视频创作和收益...

社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片

一文带你解析海外版小红书Lemon8!Z世...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

AI工具 分类筛选
AI Main Category checkbox