jQuery のプラグインなどで twitter のツイートボタンを追加したけど、なんか右側に余計な余白がある。と言ったことはありませんか？

どうやら twitter の公式ボタンは以前のバージョンと現在のバージョンでは余白の大きさが違うらしく、特に設定をしなければ結構目立つ余白が空いてしまいます。

そんな邪魔でしかない余白を消す方法と、最適なサイズを案内してくれているサイトがありましたのでご紹介します。

新しくなった公式 Twitter ボタンの余白スペースをカット – Eiji

ちょっと仕事で使う機会があったのでメモ。

ここ最近ではごくごく当たり前になってきている、Web ページに facebook の「いいね！」ボタンや twitter のツイートボタンを簡単に設置することが出来る jQuery プラグインです。
Google+1/Twitter/facebookいいね/facebook Share/mixiチェック/mixiイイネ/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社

設置方法は Web サイトや js ファイルにしっかり書いてあるので割愛しますが、設置の際の注意点がいくつかあります。

サンプルでもあるように各ボタンを横に並べるデザインにする場合、twitter のボタンは横幅が少し大きめに取られてしまうようで、ツイート数表示の吹出しの横には結構な余白が空いてしまいます。どうもこれは twitter 側に設置しているスクリプト（？）のせいらしく、こちらでこの幅を制御することは出来ません。

また吹出しの表示は InternetExplorer6 では他のブラウザよりも大きく右側の余白を取るようで、これも結構大きな余白が空いてしまうことと、他のブラウザと同じように綺麗に並べることはほぼ不可能と思っても良いでしょう。

とまあこんな感じで多少制約はあるものの、このプラグインを使うことで面倒な設定をしなくて良いと言うメリットはとても大きいと思います。デザイン的な制約の部分はデザイナーさんに上手く考えてもらいましょう。

Twitter でツイートを公開設定にしている場合、そのユーザのツイートを取得することは比較的簡単です。（）

ただ非公開設定にしている場合は同じ方法でツイートを取得することは出来ません。

非公開設定にしている場合、ユーザのツイートを取得するアプリケーションを作成して OAuth で認証した上で取得する、という手続きが必要になります。OAuth を使うということで一気にハードルが上がってしまうのですが、これらの作業の流れをわかりやすく説明してくれているサイトがあったのでご紹介します。
PHP+OAuthでTwitter – SDN Project

この方法は bot などを作ったり、Twitter 上では表示したくないけど、自分のサイトなどでツイートを表示したいと言うような時に利用できます。Twitter クライアントなどを作るのはまた別の方法が必要なのでご注意下さい。

ちなみに上記サイトでタイムラインを取得する際に XML 形式で取得していますが、JSON 形式で取得することも可能です。その際は拡張子を .json にするだけで良いので、これまでずっと JSON でやってたよ〜と言う人は拡張子を変えて下さいね。

自分の Web サイトなどに twitter のツイートを表示する場合、公式のウィジェットが配布されています。しかしオリジナルのデザインで表示したい場合は JavaScript や PHP などを使って自分でスクリプトを書く必要があるので、その方法を調べてみました。

[jQuery(JavaScript) で取得する方法]
Twitterの色んな値をJSONで取得する方法 | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介

[PHP で取得する方法]
JSON の取得する URL は次のとおりです。

http://api.twitter.com/1/statuses/user_timeline/アカウント名.json?callback=取得件数

PHPでJSONを取得 – billboardtop100.net

twitter が返してくる JSON から ID や ツイート内容を抜き出すのは次のサイトを参考にしてください。
PHPでTwitterの自分のタイムラインを取得するスクリプト – hirokan55の日記

また、twitter が返す JSON に記述されているツイートの時間はそのままでは使いにくいので変換をするほうが良いと思います。
Twitter create_at 変換 – mmj

その他のフィールドについては
Take a Rest Twitter JSONで取得した各フィールドの意味

• 過去のブログ記事: Macでアプリを削除するなら必須！AppCleaner http://t.co/qR2T42PX 13:40:04, 2011-11-21
• 全面ヒーターのフラットこたつなんてあるのか。でもそれじゃスコープ鶴崎を倒せない。 12:04:49, 2011-11-21
• 下半身が寒いっ 12:03:52, 2011-11-21
• 更新したよ！: まずはWebで情報収集。スマホ向けサイト作成に役立つWebサイトを集めてみました。 http://t.co/zT038f5f 12:02:15, 2011-11-21
• あり？これは塚口停まらんのか。平和だ。 08:25:05, 2011-11-21
• 朝の阪急は時間調整が難しい！ 08:22:42, 2011-11-21