AMP

重要事項:此文件不適用於您目前選取的格式 電子郵件

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 服務條款取得所有必要的終端使用者同意和授權,並為提供從終端使用者收集的 AddThis 資料給 Oracle 提供任何必要的通知。

支援

如果您在 AMP 上實作 AddThis 時有任何疑問或需要任何協助,請提交服務單 由此處 聯絡我們優秀的支援團隊,或寄送電子郵件至 help@addthis.com

屬性

data-pub-id

在登入後於 AddThis 儀表板 的 URL 中找到的 AddThis 發佈商 ID。例如,在 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