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

支援

如果您在 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