【WordPress】ツイートURLを自動でbitly短縮する方法

  • button only@2x 【Wordpress】ツイートURLを自動でbitly短縮する方法

tansyuku ba1 【Wordpress】ツイートURLを自動でbitly短縮する方法

日本語ドメイン日本語URLのページは、
検索エンジンで上位表示させやすい(らしい?)という
メリットはありますが、

twitterで共有しようとすると、
上図左側のように、やたらと長くなってしまって
心理的に、少々共有されにくくなるというデメリットがあります。
(日本語URLだとURLがエンコードされてしまうため)

でも心配無用。

このデメリットは、この記事で紹介する
「ツイートボタンを押したときに、自動でURLを短縮する方法」
で、解決できます。

概要

サムネイル画像のように、
ツイートボタンを押したときに、ツイートされるURLを
自動的にURL短縮サービス「bit.ly」で短縮するようにします。

そのために、bit.lyのAPIを
WordPressのツイートボタンで使用できるようにする必要があります。

大まかな手順は以下の通りです。

  1. 短縮URLサービス「bit.ly」のアカウントを取得する
  2. function.phpにbit.lyでURLを短縮するコードを追加する
  3. twitterボタンのコードを修正する

手順1:「bit.ly」のAPIキーを取得

まずは「bit.ly」に登録して、APIキーを取得します。

01 【Wordpress】ツイートURLを自動でbitly短縮する方法

bit.lyにアクセスしたら、
sign upをクリックして、新規アカウントを作成します。

02 【Wordpress】ツイートURLを自動でbitly短縮する方法

APIキーを取得するために、
bitlyアカウントを新規作成して、ログインします。

twitter、facebookを使ってもサインインできますが、
メールアドレスの登録も必要になるので、
最初からメールアドレス入力して登録した方が良いかもしれません。

03 【Wordpress】ツイートURLを自動でbitly短縮する方法

ログインしたら、settings画面を開きます。

04 【Wordpress】ツイートURLを自動でbitly短縮する方法

Settings画面に入ったら、
ADVANCEDメニューを開きます。

05 【Wordpress】ツイートURLを自動でbitly短縮する方法

ページ下部の Show Legacy API Key をクリックすると、
下記画像のように、ログインIDAPIキーが表示されます。

この2つの文字列を次の手順で使います。

bitly scrn 【Wordpress】ツイートURLを自動でbitly短縮する方法

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に追加します。

3.4行目の「ログインID」「APIキー」の部分に、
手順1で各自取得したログインIDAPIキーを記述します。

以下の例のように書き換えます↓

 

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-url=”「リンク先URL」”
data-counturl=”「カウントするURL」”

のような、URLを指定するパラメータがあります。

ツイートボタンの data-url パラメータを
functions.phpに追加記述したbitly関数によって出力される短縮URLにして、
data-counturl パラメータを、短縮する前の本来のURLにします。

また、data-counturl パラメータを設定しないと、
なぜかツイートボタンの数字がカウントされなくなるので注意です。

以下のように、ツイートボタンのコードを修正するとOKです。
ポイントは3行目の data-url と data-counturl の部分です。

テンプレート「stinger3」の場合は、
sns.php と sns02.php にあるツイートボタンのコードを
上記コードのように、data-url, data-counturl パラメータを
指定すればOKです。

参考
新ツイートボタンの設置&カスタマイズ方法まとめ – Foobar Box
ソーシャルボタンについて: ツイートボタン

プラグイン Sharebar を使用している場合

プラグイン → プラグインの編集 より
sharebar/sharebar.php の 162行目~167行目あたりにある
sharebar_filter 関数を編集します。

「sharebar_filter(」と検索するとすぐ見つかります。

function sharebar_filter($input){ ~ } と、
括弧で区切った一つのまとまりになっています。

以下の初期状態のコードを

以下のように変更します。

これで、プラグインの設定画面で[bitly]と記述したときに、
bitly関数からURLを呼び出せるようになります。

そして、設定→ Sharebar より、
Sharebarの設定画面を開いて、
ツイートボタンの編集画面に入ります。

sharebar 【Wordpress】ツイートURLを自動でbitly短縮する方法
ここのEditボタンをクリックして、

sharebar twitter edit 【Wordpress】ツイートURLを自動でbitly短縮する方法
こういう編集画面に移動します。

Big Button、Small Button の欄のコードを
以下のようにします。

Big Button

Small Button

data-url=”[bitly]” という記述が、sharebar/sharebar.php で設定した、
bitlyで短縮URLを取得する関数を呼び出すショートコードです。

data-counturl=”[url]” という記述で、
ツイート数が正常にカウントされるようにしています。

プラグイン social bookmarking light を使用している場合

wp-social-bookmarking-light/modules/services.php
128 ~ 141行目あたりの、twitter 関数 を変更します。

「twitter() 」と検索すると見つかります。

function twitter(){ ~ } と、
括弧で区切った一つのまとまりになっています。

初期状態では以下のようになっているコードを

以下のように変更します。

ポイントは7,8行目の url= ~ 、counturl= ~ の部分です。

javaScript版ツイートボタンの場合

賢威テンプレートで最初から付いているツイートボタンなどは、
javaScriptファイルからphpを呼び出せるように修正する必要があって、
なかなかややこしいので割愛します…

元々のツイートボタンを削除して、
social bookmarking light などのブラグインを導入した方が、
簡単に実装できるかと思います。

補足

このブログでは、URLを全て半角英数字にしているので
この短縮URLは使ってませんが、他に運用している
日本語ドメインのブログでは実際に使ってます。

こちらのテスト用ブログで実装してあるので、
ツイートボタン押して試してみてください。
→ せーや WP実験場

ちなみに、Twitter Cardsを設定していれば、
短縮URLでツイートした時でも、概要はちゃんと表示されます。

2014年2月現在は、このコードは正常に動作しますが
今後、もしbitlyのAPIの仕様が変更された場合、
コードを少し変更する必要が出てくるかもしれません。
(主に手順2のbitly関数のあたり)

「同じように設定したけど動かないよ!」
「もっといい実装方法があるぜよ!」

って方は、遠慮なくコメント等で指摘おねがいしますm(_ _)m

「いいね!」「フォロー」「RSS購読」で最新情報をチェック!
応援していただけるとブログ更新の励みになります。


follow us in feedly
このボタンについて
にほんブログ村 ライフスタイルブログ 自由人へ
  ↑応援ポチもよろしくです↑

“【WordPress】ツイートURLを自動でbitly短縮する方法” への11件のフィードバック

  1. 藤井 より:

    こちらの記事を現在参考にさせていただいております。
    貴重な情報ありがとうございます。

    ’?url=’.bitly(get_permalink($post->ID)) . の行で
    unexpected ”=” と表示されエラーになってしまいます。

    どのような原因が考えられるでしょうか?

    function bitly は functions.phpに入力済みです。

    • せーや より:

      藤井さん、コメントありがとうございます。

      再確認してみたところ、この記事に記載しているコードのクォーテーションマーク( ‘ ) が、なぜか( ’ ) に変わっていたために、PHP文法エラーが発生していたようです。

      コードを修正しましたので、ご確認ください

      サンプルサイトの方でも確かめてみたところ、
      プラグインのアップデートをしていたため、機能しなくなっていたため、修正しました。

    • Destiny より:

      Furrealz? That’s masluvoerly good to know.

    • Wowza is all I can say! It was absolutely fantastic to see all our “old” Lions and to meet our newest Lions! I am looking forward to the best year EVER!

    • all his cds are … all his cds are amazing even just too chill to. if your a goal setter or just want a lifestyle change i recommend them big time… Was this answer helpful?

    • Great — and informative post! I’m curious as to what the measure is in terms of determining “bilingual”, “trilingual”. Presumably the data are based on self-reporting. If this is the case, then an immediate question I have is: What percentage of Dutch, Germans, Danes, etc. consider their best second/foreign language to be a language other than English?Probably should take a close look at the report myself — and I will soon

  2. 藤井 より:

    すいません、上記は
    social bookmarking light のコードについてです。

  3. ぱんだ より:

    はじめまして。
    こちらの記事を参考に、短縮URLを導入させていただきました。
    ありがとうございます。

    social bookmarking lightのサンプルコードですが、こちらの7行目に全角の「’」が含まれており、最初はこれが原因でエラーが帰って来てしまいました。

    ‘?url=’.bitly(get_permalink($post->ID)) .

    とサンプル上ではなっていましたが、これを

    ‘?url=’.bitly(get_permalink($post->ID)) .

    と直したところ、正常に動きましたので、念のためご報告申し上げます。

    • ぱんだ より:

      すみません。記事上では「’」は強制的に全角にされてしまうようですね;
      コード上では「’」を半角に直させて頂きました。

      • せーや より:

        ぱんださん、補足ありがとうございます。

        記載しているコードも、全角を半角に直しておきました。

        WordPressの仕様で、勝手に全角に変換されちゃうのかもしれないですね・・・;

  4. K より:

    こんばんは。

    大変ためになる記事をありがとうございます。
    最近プラグインをSimple Share Buttons Adderというものに変え導入したのですが、こちらの記事を参考にさせていただき、色々試してみたのですが、どうにも上手くいきません。

    もしよろしければ、このプラグインの場合の変更点もアドバイスいただけると嬉しいです。

ぱんだ にコメントする

このページの先頭へ