親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

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

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

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

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

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

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

syncer.jp

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

Email、Facebook、LinkedIn、PinterestGoogle+TumblrTwitter、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://ikujip.jp/column/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の変数を展開すれば問題ありません。

<div th:utext="${hatena}"></div>

ここもThymeleafをご存知ない方のための補足ですが、th:utextで変数を展開すれば、変数にタグが含まれている場合でも自動的にエスケープされるため、タグが反映されることになります。

この実装を行なったページが以下になりますが、
https://ikujip.jp/column/1

ページごとに最後の数字が変わっていく構成です。

要素の検証ではてなブックマークのボタンを見てもらえれば、以下のようにURLが入力されていることがわかると思います。

<amp-social-share type="hatena_bookmark" layout="container" data-share-endpoint="http://b.hatena.ne.jp/entry/https://ikujip.jp/column/1/" class="i-amphtml-element i-amphtml-layout-container amp-social-share-hatena_bookmark i-amphtml-layout" role="button" tabindex="0">B!</amp-social-share>

テンプレートの変数を使えない時点で諦めてしまう人もいるかと思いますが、タグごと突っ込んでしまえば万事解決です!
ちょっと変数が長くなって不恰好ですがw

AMPで色々やっている人はぜひお試しください。

WordPress AMP対応 モダンWeb制作 レッスンブック

WordPress AMP対応 モダンWeb制作 レッスンブック