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 基础教程 30 - 阅读更多小工具的设置和使用方法 - 特色图片
Elementor 基础教程 30 - 阅读更多小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 2 - Post小工具的设置和使用方法 样式标签篇 - 特色图片
Elementor 通用教程 3 - 小工具样式标签的通用设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 20 - 标签小工具的设置和使用方法 - 特色图片
Elementor 基础教程 20 - 标签小工具的设置和使用方法
Wordpress插件与设计 - WP教程 23 - 使用媒体区块,创建出色的多媒体页面!以提高网站的互动性 - 特色图片
WP教程 23 - 使用媒体区块,创建出色的多媒体页面!以提高网站的互动性
Wordpress插件与设计 - Elementor 基础教程 21 - 手风琴小工具的设置和使用方法 - 特色图片
Elementor 基础教程 21 - 手风琴小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法 - 特色图片
Elementor 专业教程 25 - Facebook Page小工具的设置和使用方法
Wordpress插件与设计 - WP教程 4 - WordPress古腾堡编辑器!新手也能轻松驾驭的排版神器 - 特色图片
WP教程 4 - WordPress古腾堡编辑器!新手也能轻松驾驭的排版神器
Wordpress插件与设计 - Elementor 基础教程 24 - 警告小工具的设置和使用方法 - 特色图片
Elementor 基础教程 24 - 警告小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 31 - Text Path小工具的设置和使用方法 - 特色图片
Elementor 基础教程 31 - Text Path小工具的设置和使用方法
Wordpress插件与设计 - WP教程 29 - 掌握WP用户权限设置,轻松打造安全的多人协作平台! - 特色图片
WP教程 29 - 掌握WP用户权限设置,轻松打造安全的多人协作平台!
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - 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工具与服务推荐 - Checkfirst - 集成工具套件 - 特色图片
Checkfirst.ai - AI驱动验证巡检,轻松收集可靠现场数据
AI工具与服务推荐 - Transiyzi - AI本地化管理软件 - 特色图片
Transiyzi - AI驱动的本地化管理软件,助力产品加速全球化进程
AI工具与服务推荐 - Nolibox - AI设计创意公司 - 特色图片
Nolibox - AI赋能设计生产力,让创意触手可及
AI工具与服务推荐 - Paperpal - AI学术写作辅助工具 - 特色图片
Paperpal - AI赋能的学术写作辅导平台,显著提高论文发表机会
AI工具与服务推荐 - Civitai - AI图像生成与分享平台 - 特色图片
Civitai - 开放平台分享AI艺术,探索精彩作品,推动艺术创新
AI工具与服务推荐 - super.AI智能文档处理(IDP) - AI文档处理平台 - 特色图片
super.AI - 复杂文档处理“超人”,端到端自动化流程
Canva Post
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 7 - 掌握Canva Mockup功能!轻松打造完美合成图像 - 特色图片
Canva新手指南7 - 掌握Canva Mockup功能!轻松打造完美合成图像
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Smm Post
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片
从零到一!创建YouTube频道并上传视频的全流程
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片
YouTube Shorts!解析短视频创作和收益的秘密
社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片
将爱好转为事业!通过YouTube频道赚钱的秘诀
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片
一文读懂YouTube Premium会员权益!让你不再犹豫
社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片
如何正确选择一款适合自己的视频编辑软件?
AI工具 分类筛选
AI Main Category checkbox