[wordpress] 個別記事でbitly短縮URLを自動取得する

Posted on by jiro

Bitly_product
技術ネタです。
昨日に続き唐突ですが、また畑違いの記事を書いてみます。

こんな仕事もやってます、という紹介として、折りを見て書いていこうかと思っておりますので、興味ない方は飛ばしちゃってください。実際、こういうバラけた内容はそれぞれ別サイトにしたほうがマーケティング効果は高いのですが、自分の興味がバラけてる上になかなか書けていないので当面は仕方ないかなー。

今回はBitlyの短縮URLを自動取得してみます。

SNSシェア用に、自動で短縮URLを準備したい

世の中にはいろいろなSNSがあります。それぞれシェアするときにURLを書く場合が多いですね。そのURL、日本語サイトでSEOに配慮すると、日本語が含まれる場合が多くなります。例えばこのブログは記事タイトルをそのままURLに使っているので、これをURLエンコードすると、「http://dkbl.jp/blog/%E3%82%B3%E3%83%AA%E3%81%A8%E7%97%9B%E3%81%BF%E3%81%A8%E3%82%B9%E3%83%88%E3%83%AC%E3%83%83%E3%83%81%E3%80%81%E9%80%86%E8%BB%A2%E3%81%AE%E7%99%BA%E8%A6%8B/」
みたいに、めちゃめちゃ長くなるわけです。

具体的にシェアボタンでこの長いURLを意識するのはTwitterくらいで、そのTwitterでは投稿時に自動でt.coアドレスに変換されますので絶対必要かといえばそうでもないのですが、「短い方が投稿ポップアップの見栄えがよい」という適当な動機で、自動短縮を実装しました。

実装方法

いろいろなURL短縮サービスがありますが、自分はbitlyを使ってますので、bitly api1を使って、個別ページへのアクセス時に短縮URLを取得する単純な方法で実装してみました。

手順は

  1. bitlyアクセストークン取得
  2. function.phpに短縮URL取得関数を記述
  3. 使用するページのテンプレート・ファイルに関数実行部分を記述

です。

access tokenはbitlyにログインしてトークン発行ページにアクセスしてください。再度パスワードを入力すると、自分のアカウントの証明となるトークンが発行されますので、下記で使用します。

theme内のfunctions.phpに下記を追加します。


function bitly_shorten_url($url)　{
	$accssTkn = '【使いたいアカウントのaccess_tokenをbitly公式サイトから取得してください】';
	$bitly = 'https://api-ssl.bit.ly/shorten?access_token='.$accssTkn.'&longUrl='.$url;
	$response = file_get_contents($bitly);
	$json = json_decode($response,true);
	return $json['results'][urldecode($url)]['shortUrl'];
}

短縮URL取得に必要なのはaccess tokenとページのURLです。以前のバージョンではエンコードなども操作が必要でしたが、現在はget_permalink()で取得したURLそのまま受け渡して大丈夫。返ってくるのはJSONデータです。

続いて、関数呼び出し。挿入するテンプレート・ファイルはお使いのtheme次第で変わりますが、そこまでいじっていないthemeであればsingle.php、page.phpなどが一般的でしょうか2。


<?php $url = get_permalink(); ?>
<?php $title_encode=urlencode(get_the_title()); ?>
<?php $shorten = bitly_shorten_url($url); ?>
<ul class="share">
	<li class="twitter">
		<a href="http://twitter.com/intent/tweet?url=&lt;?php echo $shorten ?&gt;&amp;text=&lt;?php echo $title_encode ?&gt;%20%7C%20dkbl%0a&amp;via=drkbleu&amp;tw_p=tweetbutton">
			<i class="fa fa-twitter"></i>
			Twitter
		</a>
	</li>
	<!-- そのほかシェアボタンが続く -->
</ul>

これだけ。
簡単ですね。あくまで最低限のことしかしていませんし。

まずページヘのアクセスがあるたびにbitly apiを呼んでいるので、カスタム・フィールドを作ってページ読み込みではなくsave_postフックで短縮URLを保存する形に改修予定です。その場合は各SNSごとにrefererを追加して、複数の短縮URLを取得したほうがログ確認には便利かもしれません3。また、meta要素に短縮URLを記入する場合は、head内でその処理を済ませた方がよいでしょうし、カテゴリなどでいろいろなテンプレートを使っていれば、インクルード・ファイルにするとよいでしょう。

ちなみにこういったことを一括でまとめてくれているプラグイン“WP Bitly”がすでにありますので、ご面倒な方はそちらをご利用ください（笑）。

一応CC表記。
クリエイティブ・コモンズ・ライセンス

  1. 記事執筆時のBitly APIバージョンは3.0、wordpressはバージョン4.3.1です。
  2. SNSロゴ表示のためにfont awesomeを使用しています。
  3. これを上記の「アクセス時に毎回取得する」形式のままでやってみたところ、体感でページの表示速度が下がりました。apiを呼びに行く回数がそれだけ増えるので、当然といえば当然。ですので、save_postでのトリガー時に取得した方が表示速度的に良いのは間違いないと思います。
jiro