Google AMP amp-addthis用法及代碼示例

有時，作為一名Web開發人員，我們想共享我們的社交媒體鏈接，為此，我們必須顯示社交媒體按鈕，並且amp-addthis專門用於此目的。 amp-addthis組件集成了AddThis浮點數欄和內聯共享按鈕。

設置：

您必須在標頭中導入amp-addthis組件才能使用此標記。

HTML

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

轉到此網站https://www.addthis.com/register，然後創建您的自定義窗口小部件，這絕對是免費的。填寫詳細信息並創建自定義窗口小部件後，您將被定向到包含代碼的頁麵。複製它並將其粘貼到您的程序代碼中。

屬性：

data-pub-id：它是所使用的窗口小部件的發布者的發布者ID。
data-widget-id：它是正在使用的窗口小部件的窗口小部件ID。
data-widget-type：此屬性從浮點數和內聯描述小部件的類型。
data-title：它是一個可選屬性，用於設置工具的標題。如果不存在，則會采用文檔中存在的那個。
data-url：它是一個可選屬性，用於設置要共享的URL。如果不存在，則會采用文檔中存在的那個。
data-media：它是可選屬性，用於定義要共享的媒體的URL。如果不存在，則未定義。
data-description：它是可選屬性，用於設置頁麵描述。如果不存在，則未定義。

例：

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
      
    <script async custom-element="amp-accordion" 
src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> 
    </script> 
      
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-addthis/index.html"> 
      
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
      
    <title>Google AMP amp-addthis</title> 
  
    <style amp-boilerplate> 
        body { 
            -webkit-animation:-amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -moz-animation:-amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -ms-animation:-amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            animation:-amp-start 8s  
                steps(1, end) 0s 1 normal both; 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility:hidden 
            } 
  
            to { 
                visibility:visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility:hidden 
            } 
  
            to { 
                visibility:visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility:hidden 
            } 
  
            to { 
                visibility:visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility:hidden 
            } 
  
            to { 
                visibility:visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility:hidden 
            } 
  
            to { 
                visibility:visible 
            } 
        } 
    </style> 
  
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation:none; 
                -moz-animation:none; 
                -ms-animation:none; 
                animation:none 
            } 
        </style> 
    </noscript> 
  
    <script async custom-element="amp-addthis" 
src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"> 
    </script> 
  
    <style amp-custom> 
        h1 { 
            color:green; 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        Geeks For Geeks 
    </h1> 
      
    <amp-addthis width="320" height="92" 
        data-pub-id="ra-5c191331410932ff" 
        data-widget-id="mv93"
        data-widget-type="inline"> 
    </amp-addthis> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自aditya_taparia大神的英文原創作品 Google AMP amp-addthis。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。