Blog

Published on

RSS

オリジナルはてなブックマークボタン&ツイートボタン

今回のリニューアルでこのブログにも流行のはてブボタンとツイートボタンが付きましたが、案の定凝り性なので自分で色々弄ってます。

せっかく作ったのでここに弄り方をまとめときます。

公式のSNSボタン
当サイトのカスタマイズSNSボタン

まぁ一番簡単なのは、それぞれのサービスが提供しているタグセットなのですが、それだとあまりに味気ないというかデザイン上の自由度がほぼ皆無。やはり自分の好きな画像を使ったり、ブックマークがある時だけブックマーク数を表示したり、色々臨機応変にやりたい。しかもそうやって条件分岐させるならJavaScriptで後から書き換えではなく、そもそもPHP上でページ生成時にやっちゃった方が楽というものです。JavaScript使えない環境にもやさしいもんね。

これからの解説は、JavaScriptではなくPHPでカウント数を取得,ボタンリンクを生成するための方法です。外部サービスは利用せず、Twitter/はてなの各公式サイトのAPIのみを使用しています。

ということで解説。


必要となるデータ

ボタンとはいえ基本はリンクです。まず、ポイントとなるのは、

  • エントリー先(リンク先)のURL
  • エントリー元URLとタイトルの渡し方
  • カウントの拾い方

の3点でしょう。この3つがあればあとはPHPやらCSSやらでごにょごにょやってオリジナルのSNSボタンが作れます。それぞれのサービスでの取得方法を書きます。

Twitter

Twitterの方が癖がないです。

ツイート数取得

ツイート数はjsonで拾えます。

ツイート数取得関数 (PHP)
function _getTwitterCount($url) {
    $count = false;
    $json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.urlencode($url));
    if ($json !== false) {
        $data  = json_decode($json, true);
        $count = (int)$data['count'];
    }
    return $count;
}

なんとなく関数で。このまま使えると思います。引数の$urlがそのエントリー元のURLになります。ちなみにこうするとerror_reporting(E_ALL)でもエラーが吐かれず、且つタイムアウトなんかで蹴られたときには確実に false が返ってくるので、その後のスタイリングに色々便利だと思います。(int)のとこはなくてもまぁいいのですが、確実性を高めるおまじないに。ツイート数が0件なら「0」が、データが拾えない時は「false」が入ります。

さらにfile_get_contentsの頭には@を付けてます。コレをやるとタイムアウトのときにエラーメッセージが出ない。タイムアウトはこっちの事情なのでね、エラーメッセージがずらずら出たらカッコ悪いもんね。これでTwitterサーバが落ちてても安心です。

後は拾ったツイート数を煮るなり焼くなり好きにして下さい。

エントリー先URLとデータの渡し方

次にボタンのリンク先。エントリー先のURLは

エントリー先URL
http://twitter.com/share

になります。そしてそのままこのURLにGETでエントリー元のURLとタイトルを渡します。

エントリーURL
http://twitter.com/share?url=アドレス&text=タイトル

タイトル/アドレス(以下"アドレス"はエントリー元URLを指す)urlencode()をしておくとスマートですね。アドレスはhttp://から書きましょう。このURLでリンクを張ればツイート画面に行きます。

ちなみに via を追加で渡すとツイートされたのが分かって便利。自意識が強い人用。

http://twitter.com/share?url=アドレス&text=タイトル&via=自分のアカウント名
ポップアップウィンドウでの表示

さらにこのリンク先をJavaScriptでポップアップの別窓表示にするとよりそれっぽいと思います。

ちなみに公式ツイートボタンではカウント部分をクリックするとエントリー元アドレスで検索になり、そのアドレス(短縮URLも含む)を含むツイートが一覧されます。そのときのURLはこれ。

アドレスを含むツイート表示URL
http://twitter.com/search?q=アドレス

だけど本当に最近の発言しか検索されないので個人的にはあんまり好きじゃない(うちのサイトでは使ってない

はてなブックマーク

次ははてブです。

ブックマーク数取得

はてなブックマークは直接ブックマーク数を返してくれる便利なAPIがあります。ありがたく使いましょう。

はてなブックマーク数取得関数 (PHP)
function _getHatenaCount($url) {
    $count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url='.urlencode($url));
    if ($count!==false) $count = (int)$count;

    return $count;
}

同じくタイムアウト時にはfalseが返ってきます。

エントリー先URLとデータの渡し方

エントリー先は以下のURLです。元アドレスは直接続けます。

エントリーURL
http://b.hatena.ne.jp/entry/アドレス
はてな公式の疑似ウィンドウ

ただ単純に「エントリーをはてなブックマークに追加☆」なだけならこれで用は足りるのですが、これだとあまりカッコ良くない。リンクをクリックした瞬間はてなのサイトに飛んでそのままビジターはさよならです。今はてなが配布してるはてなブックマークボタンだと、その場でJavaScript製の疑似ウィンドウが出てコメントなんかも書き加えられます。こうスマートにいきたいですよね。しかもオリジナルのボタンで。

じゃあこの配布されてるタグを活用しましょう。このタグ、一見JavaScriptで強制的にオリジナルボタンに書き換えられるような気がしますが(いや、実際そうなのですが)、「シンプル」タイプの場合のみ、実はa要素の中身はそのまま残ります。あのアイコンはaの内容のimgが直接呼んでるだけです。流石シンプルですね。なのでシンプルタイプのタグを利用してオリジナルボタンをくくりましょう。

オリジナルのシンプルタイプ用タグ (読みづらかったのでこちらで適当にインデントしてます)
<a href="http://b.hatena.ne.jp/entry/アドレス" 
   class="hatena-bookmark-button"
   data-hatena-bookmark-title="タイトル"
   data-hatena-bookmark-layout="simple"
   title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
     alt="このエントリーをはてなブックマークに追加"
     width="20" 
     height="20" 
     style="border: none;" />
 </a>
 <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
改変版
<a href="http://b.hatena.ne.jp/entry/アドレス" 
   class="hatena-bookmark-button"
   data-hatena-bookmark-title="タイトル"
   data-hatena-bookmark-layout="simple"
   title="このエントリーをはてなブックマークに追加">
        オリジナルボタン
 </a>

JavaScriptは毎回入れるとカッコ悪いのでヘッダにでも突っ込んどいてください。同一ページ内にボタンが何個あろうともheadで1回呼び出せば事足ります。HTML5ならこれで十分。

別途JavaScriptを呼び出す
<script src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script>

これでデザインは意のまま、リンクをクリックするとJavaScript製の例のウィンドウが開きます。

はてなブックマークの場合はタイトルは data-hatena-bookmark-titleという拡張属性で渡します。というかこう指定しておくとJavaScriptが拾ってくれます。また、ヤツはclassを見て書き換え先を探し、data-hatena-bookmark-layoutを見て書き換え方法を決定しています。この2つは削らないようにしましょう。独自拡張属性ですが、data-から始まるのでHTML5でも安心です。

仕上げ

あとは適当にこれらを組み合わせて好きなデザインを作って下さい。思う存分自由にできると思います。なんならカウント数だけ表示してボタンは付けない、なんてストイックなこともできます。

注意点としてはPHPでカウントを取得しているので、当然ですがブックマークしたからといってリアルタイムにページ上のブックマーク数は増えません。そこは潔く諦めるか、諦めきれないなら素直にJavaScriptに頼りましょう。

また、PHPでカウントを読み込んでるので読み込みが終わるまでページが生成されません。平常時ならちょっとひっかかるくらいですが、相手先のサーバがハングしていたりすると巻き添えを食らう可能性があります。一応蹴られた時の処理はしていますが、iniでそもそものタイムアウト時間をある程度短く設定することをお勧めします。

元々このサイト用に書いたコードなので(少なくてもこのBlog執筆時点では)当Blogのボタンでも全く同じ手法を使っています。結果サンプルとしてお試し下さい。ボタンをクリックしただけならツイートもブックマークされないので安心して。また、このページのHTMLソースを覗くとどんな感じでPHPが書き出してるのかわかると思います。あわせて活用下さい。

表示速度の関係で、当サイトでは現在はツイート数&ブックマーク数部分についてはJavaScriptで非同期取得しています。ただやはりPHPだけの方が楽なので、気にならないなら需要はあるはず。

Comment

この記事へのコメント受付は終了しました。