AMPページではてなブックマークのシェアボタンを動的に設置

AMPページではシェアボタンを置きたくなることが多い
AMPページではSNSのシェアボタンを簡単に設置できる。
はてなブックマークのシェアボタンも非公式ではあるがAMPに対応している
AMPページでのはてなブックマークボタンの実装方法

AMPページではシェアボタンを置きたくなることが多い

もはやwebページでは必ずと言ってもいいくらいシェアボタンを設置しますよね。
影響力のあるユーザに拡散してもらえれば一気にPV数を増やすことができます。

特にAMP対応のページを作る場合、SEOを意識したコンテンツになるため、シェアボタンによりがんがん拡散してもらいたいですよね。

AMPページではSNSのシェアボタンを簡単に設置できる。

AMPを使わないページでも比較的設置は簡単なSNSのシェアボタンですが、AMPページではもっと簡単に設定ができます。
「amp-social-share」タグを使うことで簡単にシェアボタンを設置できるのです。

syncer.jp

のページが対応方法などが非常にわかりやすいですが、

Email、Facebook、LinkedIn、Pinterest、Google+、Tumblr、Twitter、Whatsapp

は公式に対応しているため、何の苦労もなくtypeやURLを入れ込むだけで設置できます。

はてなブックマークのシェアボタンも非公式ではあるがAMPに対応している

上記のSNSに加えて、はてなブックマークのシェアボタンもAMPに対応しているようです。
なかなかブックマークされずらくなったはてブですが、新着エントリーに掲載された時のPV数の増加は未だに爆発力があります。
webサイトを作る場合にとりあえず設置しておきたいと思う人も多いですよね。

はてなブックマークも「amp-social-share」を使えばAMPページで設置可能なのですが、シェアするURL(エンドポイントのURL)を含めなければいけないのでそこがちょっと厄介です。
コードとしては以下のようになります。

<amp-social-share
	type="hatena_bookmark"
	layout="container"
	data-share-endpoint="http://b.hatena.ne.jp/entry/(httpまたはhttpsから始まるURLを入れる)">
B!
</amp-social-share>

(httpまたはhttpsから始まるURLを入れる)の箇所にシェアするURL(エンドポイントのURL)を入れるわけですが、静的ページであれば以下の例のように直接打ち込めば済む話なので何の問題もありません。

<amp-social-share
	type="hatena_bookmark"
	layout="container"
	data-share-endpoint="http://b.hatena.ne.jp/entry/http://example.com">
B!
</amp-social-share>

ところが、自分でCMSを作成するなど、動的にURLを設定したい場合に困ります。

以下のようにURLの箇所に変数を入れ込めばいいのでは？と第一感は思いますよね。

<amp-social-share
	type="hatena_bookmark"
	layout="container"
	data-share-endpoint="http://b.hatena.ne.jp/entry/$URLが代入されている変数">
B!
</amp-social-share>

しかし、この方法では上手くいきません。

AMPページでのはてなブックマークボタンの実装方法

前置きが長くなりましたが、動的にURLの値を設定したい場合の実装方法を説明します。
今回はサーバサイドはSpring BootでThymeleafのテンプレートを使用して説明しますが、他のフレームワークを使用した場合でも実装方法は変わらないはずです。

結論としては、サーバサイド側（Spring Bootの方）で、URLの変数だけではなく、URLを含めたタグを変数に入れてしまい、それをテンプレート側（Thymeleafの方）で展開すれば良いのです。

まずサーバサイド側（Spring Bootの方）です。

// わかりやすくURL全体を固定で入れていますが、実際は最後の「1」の部分だけが動的に変わるパターンが多いと思います。
String url = "https://test.com/article/1";

model.addAttribute("hatena", "<amp-social-share type='hatena_bookmark' layout='container' data-share-endpoint='http://b.hatena.ne.jp/entry/" + url + "'/'>B!</amp-social-share>");

Spring Bootをご存知ない方も多いと思うので簡単に補足しますと、「hatena」という変数にカンマの後ろのダブルコーテーションで囲まれたタグを値として入れているようなものです。

あとはThymeleafでhatenaの変数を展開すれば問題ありません。