<amp-reddit> - redditのコンテンツを埋め込み表示する
公開日:
AMPのamp-redditは、redditのコンテンツを埋め込み表示するための要素です。
概要
- 名前
- amp-reddit
- 可用性
- Stable (安定)
- サポートするレイアウト
- fill,fixed,fixed-height,flex-item,responsive
- 必要なスクリプト
<script async custom-element="amp-reddit" src="https://cdn.ampproject.org/v0/amp-reddit-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-reddit/0.1/validator-amp-reddit.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/components/amp-reddit
属性
data-embedcreated
コンテンツの作成日時。data-embedtype属性がcomment
の場合に必須。
data-embedlive
指定例: true
コメントが編集された場合に編集後のコメントへのリンクを表示するかを、true
、またはfalse
で指定する。data-embedtype属性がcomment
の場合に指定可。
data-embedparent
指定例: true
コメントが返信の場合に、返信先のコメントを含めて表示するかを、true
、またはfalse
で指定する。data-embedtype属性がcomment
の場合に指定可。
data-embedtype
指定例: post
ウィジェットの種類をキーワードで指定する。
- post
- 投稿。
- comment
- コメント。
data-src
コンテンツのURL。
data-uuid
UUID。data-embedtype属性がcomment
の場合に必須。
height
指定例: 150
高さ。
width
指定例: 200
横幅。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-redditを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-reddit" src="https://cdn.ampproject.org/v0/amp-reddit-0.1.js"></script>
投稿
投稿を埋め込むには、data-embedtype属性にpost
を指定します。data-src属性に指定するURLは、埋め込み用コードから見つけられます。
埋め込み用コード
<blockquote class="reddit-card" data-card-created="1486208745"><a href="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/?ref=share&ref_source=embed">Google Maps JavaScript API (Japanese)</a> from <a href="http://www.reddit.com/r/programming">programming</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>
HTML
<amp-reddit
layout="fixed-height"
height="200"
data-embedtype="post"
data-src="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/?ref=share&ref_source=embed">
</amp-reddit>
コメント
コメントを埋め込むには、data-embedtype属性にcomment
を指定します。また、data-src属性、data-uuid属性、data-embedcreated属性の指定が必須です。それぞれの情報は、埋め込み用コードから探すことができます。
埋め込み用コード
<div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="true" data-embed-uuid="9d589d68-9c4c-4ca6-b9d5-1099afeb796b" data-embed-created="2017-02-04T21:57:50.350Z"><a href="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/ddc3qkb/">Comment</a> from discussion <a href="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/">Google Maps JavaScript API (Japanese)</a>.</div><script async src="https://www.redditstatic.com/comment-embed.js"></script>
HTML
<amp-reddit
layout="responsive"
width="400"
height="400"
data-embedtype="comment"
data-src="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/ddbh39l/"
data-uuid="fb97214d-9a32-48b3-9399-f18ffc775b0f"
data-embedcreated="2017-02-04T11:51:25.810Z"
data-embedparent="true"
data-embedlive="true">
</amp-reddit>
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-reddit> - redditのコンテンツを埋め込み表示する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-reddit/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-reddit" src="https://cdn.ampproject.org/v0/amp-reddit-0.1.js"></script>
<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 src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h2>post</h2>
<amp-reddit
layout="fixed-height"
height="200"
data-embedtype="post"
data-src="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/?ref=share&ref_source=embed">
</amp-reddit>
<h2>comment</h2>
<amp-reddit
layout="responsive"
width="400"
height="400"
data-embedtype="comment"
data-src="https://www.reddit.com/r/programming/comments/5s046z/google_maps_javascript_api_japanese/ddbh39l/"
data-uuid="fb97214d-9a32-48b3-9399-f18ffc775b0f"
data-embedcreated="2017-02-04T11:51:25.810Z"
data-embedparent="true"
data-embedlive="true">
</amp-reddit>
</body>
</html>