Home
AMP
Component

구글 AMP – 소셜 위젯

Amp는 외부 라이브러리를 로드하지 않고도 페이지에 소셜 위젯을 표시할 수 있도록 지원합니다. 이 글에서는 몇 가지 인기있는 소셜 위젯에 대해 설명합니다.

  • 구글 AMP - 페이스북
  • 구글 AMP - 트위터
  • 구글 AMP - 핀터레스트

구글 AMP - 페이스북

amp-facebook 구성 요소를 사용하여 페이스북에 연결하여 amp 페이지에 게시물, 동영상, 댓글을 표시할 수 있습니다.

amp-facebook을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다.

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

Amp-facebook 태그 형식

<amp-facebook width="552" height="310"
              layout="responsive"
              data-href="https://www.facebook.com/tutorialspoint/posts/1784197988358159">
</amp-facebook>

amp-facebook의 작동 예제는 다음과 같습니다.

예제 : 페이스북 게시물 표시

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Facebook</h3> 
<h2>Learn Python webscrapping</h2>
<amp-facebook width="552" height="310"
              layout="responsive"
              data-href="https://www.facebook.com/tutorialspoint/posts/1784197988358159">
</amp-facebook>
</body>
</html>

결과

예제 : 페이스북 비디오 표시

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook Video</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Facebook Video</h3> 
<h2>Learn Python</h2>
<amp-facebook width="476" height="316"
              layout="responsive"
              data-embed-as="video"
              data-href="https://www.facebook.com/thetutorialkings/videos/701545820223256">
</amp-facebook>
</body>
</html>

결과

예제 : 페이스북 게시물에 대한 댓글 표시

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook comment for post</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Facebook comment for post</h3> 
<h2>Learn Microprocessor</h2>
<amp-facebook width="552" height="500"
              layout="responsive"
              data-embed-type="comment"
              data-href="https://www.facebook.com/tutorialspoint/posts/1744145745696717?comment_id=1744179789026646&include_parent=false">
</amp-facebook>
</body>
</html>

결과

amp-facebook에서 사용할 수 있는 속성은 다음과 같습니다.

  • data-href (mandatory): 여기에 페이 북 URL을 지정해야 합니다.
  • data-embed-as: 사용 가능한 옵션은 post, video 및 comment입니다. 기본값은 post입니다.
  • data-locale (optional): 로케일 언어로 표시되며, 원하는대로 변경할 수 있습니다.
  • data-include-comment-parent: true 또는 false 값을 사용합니다. 기본값은 false입니다. data-embed-as 옵션을 댓글로 사용하는 경우 댓글에 대한 상위 응답이 필요한 경우 이 옵션을 true로 설정할 수 있습니다.

지금까지 앰프 페이지에 게시물, 비디오 및 댓글을 추가하는 방법을 살펴보았습니다. 페이스북 페이지를 추가해야 하는 경우 amp에는 amp-facebook-page라는 구성 요소가 있습니다.

Amp Facebook Page 플러그인

amp-facebook-page 구성 요소는 원하는 페이스북 페이지 세부 정보를 제공합니다. amp-facebook-page로 작업하려면 다음 스크립트를 추가해야 합니다. 

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

amp-facebook-page를 사용한 실제 예제는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook Page</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook-page" src="https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Facebook Page</h3> 
<h3>Welcome to Tutorialspoint Facebook Page</h3>
<amp-facebook-page width="340" height="130"
                   layout="responsive" 
                   data-href="https://www.facebook.com/tutorialspoint/">
</amp-facebook-page>
</body>
</html>

결과

Amp-facebook-like

페이스북 버튼 플러그인을 삽입하기 위해 amp-facebook-like 구성 요소를 사용할 수 있습니다. amp-facebook-like로 작업하려면 다음 스크립트를 추가해야 합니다. 

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

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook Likes</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
  <style amp-custom>
    amp-facebook-like {
      margin: 1rem
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Facebook Likes</h3> 
<h3>Welcome to Tutorialspoint Facebook Likes</h3>
<amp-facebook-like width="110"
                   height="20"
                   layout="fixed"
                   data-layout="button_count"
                   data-href="https://www.facebook.com/tutorialspoint/">
</amp-facebook-like>
</body>
</html>

결과

Amp-facebook-comments 플러그인

Amp-facebook-comments 구성 요소는 주어진 페이지의 댓글을 제공합니다.

amp-facebook-comments로 작업하려면 다음 스크립트를 추가해야 합니다.

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

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Facebook Likes</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
  <style amp-custom>
    amp-facebook-like {
      margin: 1rem
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Facebook Likes</h3> 
<amp-facebook-comments width="486" height="657"
                       layout="responsive"
                       data-numposts="2"
                       data-href="https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>
</body>
</html>

결과

data-numposts 속성는 화면에 표시할 댓글 수를 결정합니다. 모든 댓글을 얻으려면 속성을 제거할 수 있습니다.

구글 AMP - 핀터레스트

Amp는 amp-pinterest 구성 요소를 사용하여 핀터레스트 위젯을 제공합니다. 이 구성 요소를 사용하여 핀터레스트 위젯, 핀터레스트 저장 버튼 및 핀터레스트 팔로우 버튼을 표시할 수 있습니다.

amp-pinterest 작업을 시작하려면 다음 스크립트를 추가해야 합니다.

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

Amp-pinterest 태그

<amp-pinterest width="300" 
               height="450" 
               data-do="embedPin"
               data-url="https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>

핀터레스트 위젯

예제

핀터레스트 위젯을 표시하려면 data-do="embedPin" 속성을 사용해야 합니다. 동일한 작업 예가 여기에 표시됩니다. 

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Pinterest Widget</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Pinterest Widget</h3>
<amp-pinterest width="300"
               height="450"
               data-do="embedPin"
               data-url="https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>
</body>
</html>

결과

핀터레스트 저장 버튼

핀터레스트 대한 저장 버튼을 표시하려면 data-do="buttonPin" 속성을 사용해야 합니다. 다음은 핀터레스트 저장 버튼의 작동 예입니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Pinterest Save Button</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Pinterest Save Button</h3>
<h3>TutorialsPoint - ReactJS</h3>
<amp-img src="images/reactjs.png"
         width="100"
         height="100"
         alt="blockchain image">
</amp-img>
<amp-pinterest height="18"
               width="56"
               data-do="buttonPin"
               data-url="https://www.tutorialspoint.com/"
               data-media="https://www.tutorialspoint.com/images/tp-logo-diamond.png"
               data-description="amp-pinterest in action">
</amp-pinterest>
</body>
</html>

결과

핀터레스트 팔로우 버튼

핀터레스트 대한 팔로우 저장 버튼을 표시하려면 data-do="buttonFollow" 속성을 사용해야 합니다. 핀터레스트 저장 버튼의 작동 예는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Pinterest Follow Button</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Pinterest Follow Button</h3>
<amp-pinterest height="50"
               width="130"
               data-do="buttonFollow"
               data-href="https://in.pinterest.com/wedgehairstyles/"
               data-label="wedgehairstyles">
</amp-pinterest>
</body>
</html>

결과

구글 AMP - 트위터

Amp에는 amp-twitter를 사용하여 트위터 피드를 표시하는 구성 요소가 있습니다.

amp-twitter로 작업하려면 다음 스크립트를 추가해야 합니다.

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

Amp-twitter 태그

<amp-twitter width="375" height="472"
             layout="responsive" 
             data-tweetid="885634330868850689">
</amp-twitter>

트윗을 보여주는 실제 예제는 다음과 같습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Twitter</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-social-widget.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Twitter</h3>
<amp-twitter width="375"
             height="472"
             layout="responsive"
             data-tweetid="885634330868850689">
</amp-twitter>
</body>
</html>

결과
방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기