AMP

重要事項:此文件不適用於您目前選擇的格式 stories

amp-addthis

描述

顯示 AddThis 可自訂的社群分享按鈕。

 

必要腳本

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

用法

amp-addthis 組件提供在 AMP 頁面中整合 AddThis 分享按鈕 的功能。網站訪客可以使用 AddThis 分享按鈕,將內容分享到超過 200 個社群管道,包括 Messenger、WhatsApp、Facebook、Twitter、Pinterest 等。

分享按鈕

浮動式

放置在頁面的側面、頂部或底部,隨著讀者捲動頁面而移動。這是一種推廣分享的好方法,而且不會太過突兀。

範例

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  height="92"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating"
>
</amp-addthis>

嵌入式

將分享按鈕整合到您的內容中,以獲得無縫的分享體驗。

範例

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline"
>
</amp-addthis>

實作文件

  1. 如果您尚未建立帳戶,則需要 建立 AddThis 帳戶。建立 AddThis 帳戶完全免費,讓您可以存取 AddThis 的完整網站工具套件,以及我們深入的分析報告,以更了解您網站的社群流量。
  2. 前往您的 儀表板 並自訂您的分享按鈕(AMP 目前僅支援浮動式和嵌入式分享按鈕)。
  3. 依照您的喜好自訂您的分享按鈕,然後點擊「啟動工具」。這會將您重新導向至我們的「取得程式碼」頁面。
  4. 最後但同樣重要的是,將嵌入式程式碼複製並貼到您頁面的 body 區段中,您希望分享按鈕顯示的位置。對於浮動式分享按鈕,您可以將此程式碼放置在 body 中的任何位置,因為它會自動顯示在螢幕的左側或右側,具體取決於您在工具設定中的設定。

這樣就完成了!您應該會在您的頁面上看到分享按鈕出現!

請查看我們的 YouTube 影片 以取得逐步說明

隱私權

AddThis 工具和 AddThis 工具列會從終端使用者用於與發布者網站互動的裝置,或工具列使用者用於與 AddThis 工具列互動的裝置收集資訊(「AddThis 資料」)。請閱讀完整的 AddThis 隱私權政策

AddThis 資料可能包含以下內容

  • 網際網路協定 (IP) 位址、行動廣告 ID (MAID)(允許行動應用程式開發人員識別誰在使用他們的行動應用程式)、行動應用程式 ID、瀏覽器類型、瀏覽器語言、作業系統類型,以及終端使用者造訪發布者網站或工具列的日期和時間
  • 使用者使用工具列;
  • 在發布者網站上的行為,例如終端使用者造訪發布者網站的時間長度、終端使用者在發布者網站上分享內容的行為,以及終端使用者在發布者網站上的捲動行為;
  • 參照 URL 和終端使用者用於尋找和導覽至發布者網站的網路搜尋;
  • 輸入到 AddThis 工具列搜尋功能中的關鍵字,以及工具列使用者何時下載、安裝或解除安裝 AddThis 工具列;
  • 關於終端使用者使用 AddThis 工具的頻率以及工具列使用者使用 AddThis 工具列的頻率的資訊;以及
  • 從終端使用者和工具列使用者的 IP 位址衍生的地理位置資料。

AddThis 資料將在適用法律要求的範圍內被視為個人資訊。發布者根據 AddThis 服務條款的要求,必須取得所有必要的終端使用者同意和授權,並針對向 Oracle 提供從終端使用者收集的 AddThis 資料,提供任何必要的通知。

支援

如果您有任何問題或在 AMP 上實作 AddThis 時需要任何協助,請透過提交客服單 這裡 或發送電子郵件至 help@addthis.com 聯絡我們出色的支援團隊。

屬性

data-pub-id

AddThis 發布者 ID 可以在登入後在 AddThis 儀表板 中的 URL 中找到。例如,在 URL https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff 中,ra-5c191331410932ff 是發布者 ID。

data-widget-id

要顯示的工具的 AddThis 小工具 ID,也可以在 AddThis 儀表板中找到。特定工具的小工具 ID 可以透過在 AddThis 儀表板中開啟該工具並複製 URL 的最後一部分來找到。例如,在 URL https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l 中,957l 是小工具 ID。

data-widget-type

描述小工具類型的屬性。

  • 浮動式:data-widget-type="floating"
  • 嵌入式:data-widget-type="inline"

data-title

選填。如果設定,這是當發生分享時,AddThis 工具將嘗試分享的標題。如果未設定,將使用包含 amp-addthis 標籤的文件標題。

data-url

選填。如果設定,這是當發生分享時,AddThis 工具將嘗試分享的 URL。如果未設定,將使用包含 amp-addthis 標籤的文件的 location.href 屬性。

data-media

選填。如果設定,這是媒體(例如,圖片或影片)的 URL,當發生分享時,AddThis 工具將嘗試分享。如果未設定,則保持未定義。

data-description

選填。如果設定,這是頁面的描述,當發生分享時,AddThis 工具將嘗試分享。如果未設定,則保持未定義。

驗證

請參閱 AMP 驗證器規格中的 amp-addthis 規則

需要更多協助嗎?

您已經閱讀這份文件十幾次,但它仍然沒有涵蓋您所有的問題嗎?也許其他人也有相同的感受:請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能嗎?

AMP 專案非常鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎針對您特別關注的問題提供一次性貢獻。

前往 GitHub