AMP Social i Codepen

amp-social-i-codepen.markdown

AMP Social i Codepen

A Pen by Per Lindsø Larsen on CodePen.

License.

index.html

<amp-list height="200"
 src= "https://gist.githubusercontent.com/lindsoe/0cb6d1c2ab82171c5b88aea576d0463c/raw/script.js">
  <template type="amp-mustache">
   <amp-social-share class="rounded" 
       type="{{type}}" width="50" height="50">
  </template>
</amp-list>

script.js

{
	"items": [
		{
					"type": "email",
					"id": "",
					"param": ""
		},
		{
					"type": "facebook",
					"id": "254325784911610",
					"param": ""
        },
		{
					"type": "gplus",
					"id": "",
					"param": ""
        },
		{
					"type": "linkedin",
					"id": "",
					"param": ""
        },
		{
					"type": "pinterest",
					"id": "",
					"param": "https://ampbyexample.com/img/amp.jpg"
        },
		{
					"type": "tumblr",
					"id": "",
					"param": ""
        },
		{
					"type": "twitter",
					"id": "",
					"param": ""
        },
		{
					"type": "whatsapp",
					"id": "",
					"param": ""
        }
	]
}

scripts

<script src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

style.scss

amp-social-share.rounded {
      border-radius: 50%;
      background-size: 70%;
      margin:5px;
    }