AMP教學-amp-facebook-page元件

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 圖片示範
<amp-facebook-page width="340"
height="130"
layout="responsive"
data-href="https://www.facebook.com/migulu"></amp-facebook-page>
上述的 寬與高度設定同樣可以視為是一種比例
layout="responsive" 為響應式之意
data-href="粉絲專頁網址" 在這當中輸入粉絲專頁網址


希望出現動態時報的語法
amp-fb粉絲專頁
<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-fb崁入網頁示意圖
<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-fb崁入網頁示意圖
<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說明文件

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播