Pocketのシェア件数が増加傾向にあるのでソーシャルボタンリストへの追加作業を行う
Pocket Buttonの非同期呼び出しについても書く
旧称Read it Later(Pocket)というソーシャルブックマークサービスで本ブログの記事がシェアされることがある。
そのため、ブログのソーシャルボタンリストにPocket Buttonを追加することにした。
設置方法
ベーシックなボタンの貼り付け方法は公式サイトで解説されているので、その情報をベースにするのがおすすめ。
http://getpocket.com/publisher/button
本ブログの場合には、
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="http://dim5.net/wordpress/boilerplate-plugin.html"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
上の形式で貼り付けることになった。aタグの属性として設定してある
data-save-url
に各個別ページのURLを指定することになる。data-save-urlをページ毎に手動で設定する方法だと効率が悪いので、変数にURLを設定してその変数をdata-save-urlに指定したコードが下のコードになる。
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="{$permalink}"></a>
$permalinkという変数を指定した例になる。
WordPressの場合は、各記事のURLを取得する関数があるので、それを利用して$permalinkを事前に設定する。
$permalink = the_permalink();
各ページで動的にURLが設定されたPocket Buttonを設置することが可能。
非同期呼び出しで表示を高速化
本ブログのソーシャルボタンリストは非同期呼び出しを行っており、ページのレンダリングを妨げないようにしている。Pocket Buttonも表示にfacebookのいいねボタンなどと同様にjavascriptを利用しているので、コードを貼り付けただけだとページの読み込みと同期的に処理される。
ソーシャルボタンの非同期処理については、
に具体的な方法を書いてあるので参考にして頂きたい。
上の記事の方法では、
- いいねボタン
- google+
- はてなブックマーク
それぞれのボタンを非同期で表示するノウハウが書いてある。そのため、Pocket Buttonは表示されないため、その追加方法だけを書いてみる。
追加するためには、
functions.php内のload_social_button_callback関数
で出力するHTMLを生成するコードを格納した変数($html)に以下のliを追加すればPocket Buttonも非同期で表示される。
<li>
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="{$permalink}"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
liタグの中身は本記事で冒頭載せた純粋なPocket Buttonの貼り付けコードであることが確認できる。
Pocket Buttonを貼り付けるだけでなく、非同期化まで行えばより良い感じになるので、興味がある方はチャレンジしてみてほしい。