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 基础教程 11 - 图像框小工具的设置和使用方法 - 特色图片
Elementor 基础教程 11 - 图像框小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 2 - 内部区段 小工具的使用方法 - 特色图片
Elementor 基础教程 2 - 内部区段 小工具的使用方法
Wordpress插件与设计 - WP教程 27 - 提高网站文件管理效率! 掌握WP媒体库的实用技巧 - 特色图片
WP教程 27 - 提高网站文件管理效率! 掌握WP媒体库的实用技巧
Wordpress插件与设计 - WP教程 26 - 使用区块样板,可让网页设计变得轻松又有趣! - 特色图片
WP教程 26 - 使用区块样板,可让网页设计变得轻松又有趣!
Wordpress插件与设计 - WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别 - 特色图片
WP教程 2 - 别再傻傻分不清了!一文读懂WordPress.com和WordPress.org的区别
Wordpress插件与设计 - WP教程 25 - 提升博客吸引力的秘密武器! 全面解析小工具区块的魔力 - 特色图片
WP教程 25 - 提升博客吸引力的秘密武器! 全面解析小工具区块的魔力
Wordpress插件与设计 - WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式 - 特色图片
WP教程 3 - 一文解析WordPress帖子与页面,轻松掌控网站展示方式
Wordpress插件与设计 - Elementor 基础教程 28 - 菜单锚点小工具的设置和使用方法 - 特色图片
Elementor 基础教程 28 - 菜单锚点小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 27 - HTML小工具的设置和使用方法 - 特色图片
Elementor 基础教程 27 - HTML小工具的设置和使用方法
Wordpress插件与设计 - WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力! - 特色图片
WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力!
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - 10Web - WordPress网站托管管理平台 - 特色图片
10Web - WordPress网站托管管理一站式解决方案,轻松构建和管理网站
AI工具与服务推荐 - 像素蛋糕 - AI修图软件 - 特色图片
像素蛋糕 - 强大AI修图软件,一键Raw转档,智能磨皮,轻松美化
AI工具与服务推荐 - iFlyCode - 智能编程助手 - 特色图片
iFlyCode - 智能编程助手,代码补全优化,赋能开发提效
AI工具与服务推荐 - SlidesGPT - AI PowerPoint生成工具 - 特色图片
SlidesGPT - 三步轻松生成PPT,AI助力演示更出彩
AI工具与服务推荐 - 豆包 - 免费AI对话工具 - 特色图片
豆包 - 字节跳动AI对话工具,助力写作学习,丰富日常生活
AI工具与服务推荐 - 万兴播爆 - AIGC视频制作工具 - 特色图片
Wondershare Virbo - 利用AI技术,一站式创建真人营销视频
Canva Post
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片
Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择?
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
Smm Post
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片
YouTube运营全攻略:从零到一打造你的油管频道
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片
从零到一!创建YouTube频道并上传视频的全流程
AI工具 分类筛选
AI Main Category checkbox