iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

AMP系列 第 12

AMP(Lession 12) - Facebook 的 發文、影片、留言〈基礎篇〉

Facebook 的 貼文、影片、留言〈基礎篇〉

不知不覺間, Facebook 成為了不少大眾的入口社群網站,隨之而來,也有不少的網站內容用到 Facebook 的服務。接下來的的5篇文章,就讓我們大聊聊 AMP 中如何使用 Facebook 功能。

Required Script

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

基本範例

發文(POST)

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</amp-facebook>

https://ithelp.ithome.com.tw/upload/images/20180930/20078336SQwuJ3hI76.png

視頻(VIDEO)

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

https://ithelp.ithome.com.tw/upload/images/20180930/20078336pYdyI44pA3.png

留言(COMMENT)

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-type="comment"
    data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

https://ithelp.ithome.com.tw/upload/images/20180930/20078336ss1hGtT9vc.png

Attributes

  • data-href (必填) - 留言網址

  • data-embed-as - 其 value 可為 post (貼文,預設) 、 video (影片) 、 comment (留言)。postvideo,都可做為貼文來嵌入。

    • data-embed-as="video" - 會嵌入 Facebook 影片播放器,並附上它的明信片
    • data-embed-as="post" - 會忽略標題卡,這是為確保我們可以對視頻做正確的縮放
    • Facebook 官方文件:內嵌貼文內嵌影片內嵌留言
  • data-include-comment-parent - value 為 truefalse (預設)

    • 當內嵌留言回覆時,可包含其父留言的回覆
  • data-align-center - value 為 truefalse (預設)

    • 貼文和影片是否會在其容器中對齊置中
  • data-locale - 預設的語言環境設置是隨 user 的系統語言,用此 attribute 可以自做指定

  • common attributes


參考來源:


上一篇
AMP(Lession 11) - 時間轉換 timeago
下一篇
AMP(Lession 13) - Facebook 的 發文、影片、留言〈資料 href 篇〉
系列文
AMP30

尚未有邦友留言

立即登入留言