AMP教學-amp-facebook-page元件

常常在網頁中可以看到FB粉絲專頁的資訊區塊、按讚、fb回覆留言區塊等等...雖然AMP裡面有iframe元件可以使用，但是無法適用於fb這些功能，同樣也必須使用專屬的語法，這次就來介紹常用的幾個FB專頁崁入網頁的效果吧。

載入js檔案 

<script async custom-element="amp-facebook-page" src="https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"></script>

在html中貼上語法
出現粉絲專頁頭部的語法

<amp-facebook-page width="340"
 height="130"
 layout="responsive"
 data-href="https://www.facebook.com/migulu"></amp-facebook-page>

上述的 寬與高度設定同樣可以視為是一種比例
layout="responsive" 為響應式之意
data-href="粉絲專頁網址" 在這當中輸入粉絲專頁網址


希望出現動態時報的語法

<amp-facebook-page width="552"
 height="310"
 layout="responsive"
 data-tabs="timeline, events"
 data-href="https://www.facebook.com/migulu/"></amp-facebook-page>

data-tabs代表 要出現的項目，timeline為動態時報、events為活動


不希望出現粉絲專頁頭部照片

<amp-facebook-page width="552"
 height="310"
 layout="responsive"
 data-hide-cover="true"
 data-href="https://www.facebook.com/migulu/"></amp-facebook-page>

可以增加 data-hide-cover="true" 就不會出現粉絲專頁頭部照片，


希望變成高度較小的頭部

<amp-facebook-page width="500"
 height="70"
 layout="responsive"
 data-small-header="true"
 data-href="https://www.facebook.com/migulu/">
</amp-facebook-page>

增加使用data-small-header="true"


粉絲專頁語法統整

語法	作用
data-href="粉絲專頁網址"	指定粉絲專頁
data-tabs="timeline, events"	頭部下方要出現的項目，可以變成tab，timeline為動態時報、events為活動
data-hide-cover="true"	會出現粉絲專頁頭部照片
data-small-header="true"	高度較小的頭部
data-show-facepile="false"	加朋友按過此粉專的區塊(需要登入fb才看得到)

範例：amp-facebook-page範例
參考：amp-facebook-page說明文件