iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
Modern Web

AMP系列 第 15

AMP(Lession 15) - Facebook Like

Facebook Like

基本 code

<amp-facebook-like width=90 height=20
    layout="fixed"
    data-layout="button_count"
    data-href="https://www.facebook.com/testesmegadivertidos/">
</amp-facebook-like>

完成後會如下圖所示

https://ithelp.ithome.com.tw/upload/images/20181004/20078336zkqQlCbrgw.png

Required Script

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

Attributes

  • data-href (必填) - Facebook Like 的絕對路徑。例如: https://www.facebook.com/testesmegadivertidos/

  • data-locale (非必填) - 預設為 user 的系統語言;也可自定義呈現的語言。

  • data-action (非必填) - 預設為 like (讚) , 也可設 recommend (推薦) 。決定按鈕上顯示的文字。

  • data-colorscheme (非必填) - 預設為 light ,也可設 dark 。外掛程式針對按鈕本身以外的文字所採用的色彩配置。

  • data-kd_site (非必填) - 預設為 false 。如果有未滿 13 歲的兒童會看到或使用您的網站、網路服務,或是部分服務,請務必啟用這項設定

  • data-layout (非必填) - 預設為 standard ,共有 standardbutton_countbuttonbox_count 這幾項。可以有不同的版面配置。

版面配置 預設尺寸
standard 寬度下限:225 像素。
預設寬度:450 像素。
高度:不含相片為 35 像素;含相片為 80 像素。
box_count 寬度下限:55 像素。
預設寬度:55 像素。
高度:65 像素。
button_count 寬度下限:90 像素。
預設寬度:90 像素。
高度:20 像素。
button 寬度下限:47 像素。
預設寬度:47 像素。
高度:20 像素。
  • data-ref (非必填) - Tracking referrals 次數時所使用的標籤。一定要少於 50 字元;可包含英數字元和部分標點符號(目前僅限 +/=-.:_ )。

    • 如何 Tracking referrals ? user 點擊時, data-ref 設定會造成 2 個參數加入轉介人網址:
      • fb_ref - ref 參數;例: fb_ref=top_left
      • fb_source - 讚/分享:由發生點擊的,下面 2 者參數以底線串連而成;例: fb_source=profile_oneline
        • 串流類型(「home」(首頁)、「profile」(個人檔案)、「search」(搜尋)、「ticker」(即時動態)、「tickerdialog」(即時動態對話方塊)或「other」(其他))
        • 動態類型(「oneline」(單行)或「multiline」(多行))。
    • 例如: http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline
  • data-share (非必填) - 預設為 false 。是否要在「讚」按鈕旁邊加入「分享」按鈕。這項設定僅適用於 XFBML 版本。

  • data-show_faces (非必填) - 預設為 false 。指明是否要在按鈕下方顯示大頭貼照(僅適用於 standard layout )。請勿在兒童導向的網站啟用這項設定。

  • data-size (非必填) - 預設為 small ,可使用的值有 largesmall 。用以決定按鈕的尺寸。

  • common attributes - 詳參


參考來源:


上一篇
AMP(Lession 14) - Facebook 的粉絲專頁外掛程式
下一篇
AMP(Lession 16) - Facebook Comment 嵌入留言
系列文
AMP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言