【WordPress】ツイートURLを自動でbitly短縮する方法
日本語ドメインや日本語URLのページは、
検索エンジンで上位表示させやすい(らしい?)という
メリットはありますが、
twitterで共有しようとすると、
上図左側のように、やたらと長くなってしまって、
心理的に、少々共有されにくくなるというデメリットがあります。
(日本語URLだとURLがエンコードされてしまうため)
でも心配無用。
このデメリットは、この記事で紹介する
「ツイートボタンを押したときに、自動でURLを短縮する方法」
で、解決できます。
目次
概要
サムネイル画像のように、
ツイートボタンを押したときに、ツイートされるURLを
自動的にURL短縮サービス「bit.ly」で短縮するようにします。
そのために、bit.lyのAPIを
WordPressのツイートボタンで使用できるようにする必要があります。
大まかな手順は以下の通りです。
- 短縮URLサービス「bit.ly」のアカウントを取得する
- function.phpにbit.lyでURLを短縮するコードを追加する
- twitterボタンのコードを修正する
手順1:「bit.ly」のAPIキーを取得
まずは「bit.ly」に登録して、APIキーを取得します。
bit.lyにアクセスしたら、
sign upをクリックして、新規アカウントを作成します。
APIキーを取得するために、
bitlyアカウントを新規作成して、ログインします。
twitter、facebookを使ってもサインインできますが、
メールアドレスの登録も必要になるので、
最初からメールアドレス入力して登録した方が良いかもしれません。
ログインしたら、settings画面を開きます。
Settings画面に入ったら、
ADVANCEDメニューを開きます。
ページ下部の Show Legacy API Key をクリックすると、
下記画像のように、ログインIDとAPIキーが表示されます。
この2つの文字列を次の手順で使います。
bitly APIキーは、bitlyにログインした状態で
Bitly. The power of the link. にアクセスしても見ることができます。
※このADVANCED画面のShort Domain の項目で
短縮URLの表記を bit.ly から j.mp に変更することもできます。
手順2: function.phpにbit.lyにコードを追加する
以下のphpコードを、Wordpressテーマのfunctions.phpに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function bitly($originalURL){ $url = "http://api.bit.ly/v3/shorten?" . "login=「ログインID」" . "&apiKey=「APIキー」" . "&longUrl=".urlencode($originalURL) . "&format=xml"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); $data = curl_exec($ch); curl_close($ch); $data_obj = simplexml_load_string($data); return (string)$data_obj->data->url; } |
3.4行目の「ログインID」「APIキー」の部分に、
手順1で各自取得したログインIDとAPIキーを記述します。
以下の例のように書き換えます↓
|
1 2 |
"login=ceya001". "&apiKey=R_1234567890abcdef1234567890abcdef". |
functions.php 編集時の注意
functions.phpは、Wordpress管理画面の
外観 → テーマ編集 より編集できます。
しかし、phpファイルの編集時は、少しでも記述を間違えると、
文法エラーで、ブログに何も表示されなくなって、
管理画面すら入れなくなってしまう危険性があります。
たとえば、ダブルクォーテーション(“)、セミコロン(;)、ドット(.)などを
間違って一つ消してしまうだけで、
ブログが真っ白になって何も表示されなくなることがあります。
phpファイルの編集前には、
最悪の事態を回避するために、FFFTP,FilezillaなどのFTPソフトで、
functions.phpをPCにバックアップしておくことをおすすめします。
プログラミングに慣れてきても、結構間違えたりするので…
以下の記事も参考に読んでおくこともおすすめします。
・超安全にWordPressのfunctions.phpをカスタマイズする方法 | Zafiel
技術的解説と参考にした記事
この関数は、URLを引数として、
bitly APIによって短縮したURLを返す関数です。
bitly API v3 を利用しています。
例外処理は省略しています。
以下の記事を参考にさせていただきました。
・ソーシャルボタンを短縮URL「Bit.ly」と連携させる | WEBデザイン日和。
・PHPで、「Bit.ly」のAPIを使ってURLを短縮する。 – FlatLabs
手順3: twitterボタンのコードを修正する
最後に、ツイートボタンのコードを修正します。
ツイートボタンの仕組みと変更するところ
ツイートボタンのコードには、
data-counturl=”「カウントするURL」”
のような、URLを指定するパラメータがあります。
ツイートボタンの data-url パラメータを
functions.phpに追加記述したbitly関数によって出力される短縮URLにして、
data-counturl パラメータを、短縮する前の本来のURLにします。
また、data-counturl パラメータを設定しないと、
なぜかツイートボタンの数字がカウントされなくなるので注意です。
以下のように、ツイートボタンのコードを修正するとOKです。
ポイントは3行目の data-url と data-counturl の部分です。
|
1 2 3 4 5 6 7 |
<a href="https://twitter.com/share" data-lang="ja" data-count="vertical" data-url="<?php echo bitly(get_permalink($post->ID)); ?>" data-counturl="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" >Tweet</a> <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> |
テンプレート「stinger3」の場合は、
sns.php と sns02.php にあるツイートボタンのコードを
上記コードのように、data-url, data-counturl パラメータを
指定すればOKです。
参考
・新ツイートボタンの設置＆カスタマイズ方法まとめ – Foobar Box
・ソーシャルボタンについて: ツイートボタン
プラグイン → プラグインの編集 より
sharebar/sharebar.php の 162行目～167行目あたりにある
sharebar_filter 関数を編集します。
「sharebar_filter(」と検索するとすぐ見つかります。
function sharebar_filter($input){ ～ } と、
括弧で区切った一つのまとまりになっています。
以下の初期状態のコードを
|
1 2 3 4 5 6 |
function sharebar_filter($input){ global $post; $code = array('[title]','[url]','[author]','[twitter]'); $values = array($post->post_title,get_permalink(),get_the_author(),get_option('sharebar_twitter_username')); return str_replace($code,$values,$input); } |
以下のように変更します。
|
1 2 3 4 5 6 |
function sharebar_filter($input){ global $post; $code = array('[title]','[url]','[author]','[twitter]','[bitly]'); $values = array($post->post_title,get_permalink(),get_the_author(),get_option('sharebar_twitter_username'),bitly(get_permalink())); return str_replace($code,$values,$input); } |
これで、プラグインの設定画面で[bitly]と記述したときに、
bitly関数からURLを呼び出せるようになります。
そして、設定→ Sharebar より、
Sharebarの設定画面を開いて、
ツイートボタンの編集画面に入ります。
ここのEditボタンをクリックして、
こういう編集画面に移動します。
Big Button、Small Button の欄のコードを
以下のようにします。
Big Button
|
1 2 3 4 5 6 7 |
<a href="http://twitter.com/share" data-count="vertical" data-via="[twitter]" data-url="[bitly]" data-counturl="[url]"> Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
Small Button
|
1 2 3 4 5 6 7 |
<a href="http://twitter.com/share" data-count="horizontal" data-via="[twitter]" data-url="[bitly]" data-counturl="[url]"> Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
data-url=”[bitly]” という記述が、sharebar/sharebar.php で設定した、
bitlyで短縮URLを取得する関数を呼び出すショートコードです。
data-counturl=”[url]” という記述で、
ツイート数が正常にカウントされるようにしています。
wp-social-bookmarking-light/modules/services.php の
128 ～ 141行目あたりの、twitter 関数 を変更します。
「twitter() 」と検索すると見つかります。
function twitter(){ ～ } と、
括弧で区切った一つのまとまりになっています。
初期状態では以下のようになっているコードを
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function twitter(){ $options = wp_social_bookmarking_light_options(); $twitter = $options['twitter']; return $this->link_raw(' <iframe allowtransparency="true" frameborder="0" scrolling="no"' .' src="//platform.twitter.com/widgets/tweet_button.html' .'?url='.$this->encode_url .'&text='.$this->encode_title .($twitter['via'] != '' ? '&via='.$twitter['via'] : '') .'&lang='.$twitter['lang'] .'&count='.$twitter['count'] .'" style="width:130px; height:20px;">' .'</iframe>'); } |
以下のように変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function twitter() { $options = wp_social_bookmarking_light_options(); $twitter = $options['twitter']; return $this->link_raw( '<iframe allowtransparency="true" frameborder="0" scrolling="no"' . ' src="http://platform.twitter.com/widgets/tweet_button.html' . '?url=’.bitly(get_permalink($post->ID)) . '&counturl='.$this->encode_url . '&text='.$this->encode_title . ($twitter['via'] != '' ? '&via='.$twitter['via'] : '') . '&lang='.$twitter['lang'] . '&count='.$twitter['count'] . '" style="width:130px; height:20px;">' . '</iframe>'); } |
ポイントは7,8行目の url= ~ 、counturl= ~ の部分です。
javaScript版ツイートボタンの場合
賢威テンプレートで最初から付いているツイートボタンなどは、
javaScriptファイルからphpを呼び出せるように修正する必要があって、
なかなかややこしいので割愛します…
元々のツイートボタンを削除して、
social bookmarking light などのブラグインを導入した方が、
簡単に実装できるかと思います。
補足
このブログでは、URLを全て半角英数字にしているので
この短縮URLは使ってませんが、他に運用している
日本語ドメインのブログでは実際に使ってます。
こちらのテスト用ブログで実装してあるので、
ツイートボタン押して試してみてください。
→ せーや WP実験場
ちなみに、Twitter Cardsを設定していれば、
短縮URLでツイートした時でも、概要はちゃんと表示されます。
2014年2月現在は、このコードは正常に動作しますが
今後、もしbitlyのAPIの仕様が変更された場合、
コードを少し変更する必要が出てくるかもしれません。
(主に手順2のbitly関数のあたり)
「同じように設定したけど動かないよ！」
「もっといい実装方法があるぜよ！」
って方は、遠慮なくコメント等で指摘おねがいしますm(_ _)m
こちらの記事を現在参考にさせていただいております。
貴重な情報ありがとうございます。
’?url=’.bitly(get_permalink($post->ID)) . の行で
unexpected ”=” と表示されエラーになってしまいます。
どのような原因が考えられるでしょうか？
function bitly は functions.phpに入力済みです。
藤井さん、コメントありがとうございます。
再確認してみたところ、この記事に記載しているコードのクォーテーションマーク（ ‘ ） が、なぜか( ’ ) に変わっていたために、PHP文法エラーが発生していたようです。
コードを修正しましたので、ご確認ください
サンプルサイトの方でも確かめてみたところ、
プラグインのアップデートをしていたため、機能しなくなっていたため、修正しました。
すいません、上記は
social bookmarking light のコードについてです。
はじめまして。
こちらの記事を参考に、短縮ＵＲＬを導入させていただきました。
ありがとうございます。
social bookmarking lightのサンプルコードですが、こちらの７行目に全角の「’」が含まれており、最初はこれが原因でエラーが帰って来てしまいました。
‘?url=’.bitly(get_permalink($post->ID)) .
とサンプル上ではなっていましたが、これを
‘?url=’.bitly(get_permalink($post->ID)) .
と直したところ、正常に動きましたので、念のためご報告申し上げます。
すみません。記事上では「’」は強制的に全角にされてしまうようですね；
コード上では「’」を半角に直させて頂きました。
ぱんださん、補足ありがとうございます。
記載しているコードも、全角を半角に直しておきました。
WordPressの仕様で、勝手に全角に変換されちゃうのかもしれないですね・・・；
こんばんは。
大変ためになる記事をありがとうございます。
最近プラグインをSimple Share Buttons Adderというものに変え導入したのですが、こちらの記事を参考にさせていただき、色々試してみたのですが、どうにも上手くいきません。
もしよろしければ、このプラグインの場合の変更点もアドバイスいただけると嬉しいです。