嵌入 Facebook 粉丝团
Facebook 是目前世界上最有名的社群网站之一，这篇教学会介绍如何透过 HTML 的实作，在网页里面加入 Facebook 粉丝团的功能。
取得 Facebook 粉丝团嵌入程序码
前往 Facebook 开发者的“粉丝专页插件”页面，下拉找到并点击“取得程序码”按钮。
打开程序码后，分别有 JavaScript SDK 和 iFrame 两种方式，都可以将粉丝团嵌入到网页中，如下图所示，画红线的位置要替换成粉丝团的网址。
嵌入 Facebook 粉丝团
如果是使用 JavaScript SDK，将第一段程序码放在 <body> 的最上方，第二段程序码放在想要嵌入的位置，替换粉丝团的网址后，网页中就会嵌入粉丝团。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v15.0"
nonce="uIPxPvhR"></script>
<div class="fb-page"
data-href="https://www.facebook.com/steam.oxxostudio.tw"
data-tabs="timeline"
data-width=""
data-height=""
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<blockquote cite="https://www.facebook.com/steam.oxxostudio.tw"
class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/steam.oxxostudio.tw">Facebook</a>
</blockquote>
</div>
如果是使用 iFrame，只要将程序码放在想要嵌入的位置，替换粉丝团的网址后，就会嵌入粉丝团。
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsteam.oxxostudio.tw&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
width="340"
height="500"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
嵌入 Facebook 粉丝团属性设定
嵌入的 Facebook 粉丝团可以透过属性的设定，修改嵌入时的样貌，相关属性设定如下 ( 如果是 iFrame 的方式，需要修改网址，并移除“data-”)：
| 属性 | 说明 |
|---|---|
| data-href | Facebook 粉丝专页的网址。 |
| data-width | 插件宽度，单位像素。下限为 180，上限为 500，默认 340。 |
| data-height | 插件高度，单位像素。下限为 70，默认 500。 |
| data-tabs | 要显示的页签，可设定 timeline ( 默认 )、events、messages。如需加入多个页签，使用逗号分隔。 |
| data-hide-cover | 在标头隐藏封面相片，默认 false。 |
| data-show-facepile | 当朋友按赞时显示大头贴照，默认 true。 |
| data-hide-cta | 隐藏自订的行动呼吁按钮 ( 如果有 )，默认 false。 |
| data-small-header | 改为使用小标头，默认 false。 |
| data-adapt-container-width | 配合容器宽度，默认 true。 |
| data-lazy | 延迟加载，如果尚未浏览到该区域则不加载，默认 false。 |
以下方的 HTML 搭配 JavaScript SDK 为例，嵌入的粉丝团会改成“小标头 + 三个页签”的方式呈现。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v15.0"
nonce="uIPxPvhR"></script>
<div class="fb-page"
data-href="https://www.facebook.com/steam.oxxostudio.tw"
data-tabs="timeline,events,messages"
data-width=""
data-height=""
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<blockquote cite="https://www.facebook.com/steam.oxxostudio.tw"
class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/steam.oxxostudio.tw">Facebook</a>
</blockquote>
</div>
如果是使用 iFrame 则是要修改网址，并移除 data-，修改方式如下：
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsteam.oxxostudio.tw&tabs=timeline,events,messages&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
width="340"
height="500"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
参考数据
微信扫码关注
抖音扫码关注