AMP HTMLのSNSシェアボタンを実装しました

AMP HTMLのSNSシェアボタンを実装しました

昨日の記事に続きまして、AMPページに各種SNSのシェアボタンを設置しました。
リンクを設置したというわけではなく、拡張機能として設置しました。

拡張機能に関する本家の記事は以下のページでご確認下さい。

Menus, sharing, and dynamic CSS classes in AMP

また、AMPの拡張機能については以下のページでご確認下さい。

AMP by Example

また、当コラムのAMPページのフッターあたりにSNSのシェアボタンを実装しましたので、実装内容はAMPページをご確認下さい。

AMP HTMLのSNSシェアボタンを実装しましたのAMPページ

上記のAMPの拡張一覧ページから「amp-social-share」をたどっていくと、本拡張機能の参考ソースを見ることが出来ます。
当サイトでは、「Twitter」「Facebook」「Google+」のシェアボタンを設置しました。

「Twitter」と「Google+」は参考そのままですぐに実装出来ました。
注意すべき点があるとすれば、「Google+」を明示する値は「gplus」にしなければいけないというところでしょうか。
「google」や「google+」ではエラーが出ました。
「gplus」にすると正常に動作しました。

そして、「facebook」です。

最初に「Twitter」と同じような形式で入力したんですが、エラーが返ってきました。
次に参考ソースのようにパラメーターを入力したんですが、またまたエラーが返ってきました。

別にエラーが返ってきたこと自体は驚かないんですが、問題は、返ってきたエラーに「app_id」があったというところなんですね（汗）
これ、参考ソースには掲載されていませんでした。

ということで、凡そ色々なことを想像して以下のソースを書いたら正常に動作しました。

<mp-social-share type="facebook" width="44" height="44"
	data-param-app_id="FacebookのApp ID"
	data-param-text="投稿したい文章"
	data-param-href="投稿するリンク"
>
</amp-social-share>

さすがにちょっと勘弁して下さい・・・と思いました（笑）

以下のSNSのシェアボタンを設置することが出来るようです。

• Twitter
• Facebook
• Google+
• pinterest
• linkedin

サンプルを見る限り、他に見当たりませんでした。
他にもひょっとするとシェア出来るSNSがあるかもしれません。

ということで、無事にAMPページにシェアボタンの設置が完了しました。
参考ソースを見て頂くとお分かり頂けると思いますが、記述出来るパラメーターは幾種類かあるようです。
ですので、細かい指定が必要な方はいくつかパラメーターを試して頂くと面白いかもしれません。

と、ここまで対応しておいて言うのもアレですが、AMP HTMLはまだブログ記事やニュース記事限定的な感じなんですよね。
通常のWEBサイトや拡張的に設置しているAMP HTMLはまだ対応されていないようです。
実に惜しいところだと思っています（笑）

ただでもこうやって色々知ることは悪いことではないと思っています。
まだ関係のないことと思わず色々試してみると、思わぬところで幅が広がるものだと思います。
ということで、気になる方は是非とも設置してみて下さい。

執筆 : 清水 隼斗

AMP HTMLのSNSシェアボタンを実装しましたの通常ページ