こん＊＊は、今年も葉桜の花見になりそうな@wine_and_webことhirok-kです。
昨年導入されたTwitter API 1.1により、それまではRSSで取得できたツイート一覧が取得できなくなりました。RSSで取得できれば、それを元にしてツイート表示を比較的楽にカスタマイズできたのですが、現在はそうもいかずに仕方なく標準のTwitterウィジェットでツイート表示をされている方も多いかと思います。それではブログのデザインにあわないなどの不満もでてきます。そんなときの不満の解決に役立つ情報をご紹介します。
標準のTwitterウィジェット（埋め込みタイムライン）以外を使用する際は、Twitte社の表示に関するガイドライン（英語）も参照ください。
目 次
使用するプラグイン
カスタマイズしたツイート表示を行うには、My Twitter Widgetというプラグインを使用します。
最新版は現在1.6.1となっていますが、この最新版ではカスタマイズがほぼ行えないため、敢えて旧バージョンである1.5を使用します。
プラグインのインストール
こちらのMy Twitter Widgetダウンロードページから、旧バージョンである1.5をダウンロードします。
プラグイン ＞ 新規追加 ＞ アップロードから先ほどダウンロードしたmy-twitter-widget.1.5.zipをアップロードし、有効化します。
インストールできなかったり、有効化できない場合はトラブルシューティングの項目をご覧ください。
ウィジェットの配置
My Twitter Widgetをインストールし有効化すると、外観 ＞ ウィジェットにあるウィジェット追加画面でMy Twitter Widgetというのがあるはずですので、追加したいサイドバーやフッターに配置します。
配置をすると次のような設定画面が表示されますが、その中にConsumer KeyやConsumer Secretなどという見慣れない入力項目があります。
これを取得するためには少々面倒ですが、Twitterアプリ登録を行う必要がありますので、次の項目で詳しくご紹介します。
Twitterアプリの登録方法
Twitterのアプリ登録は、こちらのアプリ登録ページで行います。
Twitterのユーザーネームとパスワードを入力し、ログインしましょう。
次の画面でCreate a new applicationをクリックして、新規アプリを作成します。
表示されている４つの入力項目をすべて入力し、Create your Twitter applicationボタンをクリック。
アプリ作成が成功すると、こちらの作成アプリ一覧ページに作成したアプリが登録されているので、さきほど新規に作成したアプリをクリックします。
タブにあるAPI Keysをクリックすると、ウィジェットの設定で必要な4つの入力値がみつけられるはずですので、それを別途コピーして保存しておきます。
なおConsumer keyはAPI Key、Consumer SecretはAPI Secretに名称が変更されているのでご注意ください。
ここでウィジェット追加画面にもどり、先ほど保存した
- Consumer Key （新API Key）
- Consumer Secret （新API Secret）
- Access Token
- Access Token Secret
をそれぞれ入力し、他の入力項目も記入し保存します。
この時点で最新ツイートが表示されているはずですが、これではやはり見栄えがよくないのでCSSでデザインを変えましょう。
CSSでデザインを行う
このウィジェットが吐き出すHTMLソースは、次のような構造になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="sub-widget widget_mytwitterwidget"> <h5>Latest Tweets</h5> <ul class="my_twitter_widget"> <li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:40">10分 ago</span></li> <li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:30">20分 ago</span></li> <li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:20">30分 ago</span></li> <li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:10">40分 ago</span></li> <li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:00">50分 ago</span></li> </ul> <div class="mtw_link_user"><a href="http://twitter.com/@fetishstyleinfo" >Follow Fetish-Style.info on Twitter</a></div> <br /> <center><div class="poweredby">By US: <a href="http://www.dallasprowebdesigners.com">Web Design Company</a></div></center> </div> |
これを見ていただくとお分かりいただけるかと思いますが、要所要所にclassが設定されているため、外観 ＞ テーマ編集からstyle.cssへCSSを追加することで思い通りのデザインが行えます。
例えばですが、次のようなCSSをこのブログでは使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*My Twitter Widget*/ .my_twitter_widget li { font-size:12px; margin-left: 0; margin-bottom: 10px; padding-left: 5px; padding-bottom: 5px; border-bottom: 1px solid #4b4b4b; } .my_twitter_widget li:before { font-family: 'genericons'; /*ツイートの前にアイコンフォントを使用しています*/ color: #e10707; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; padding-right: 5px; top: 4px; font-size: 14px; position: relative; line-height: 0px; content: '\f202'; } .my_twitter_widget a { text-decoration: underline; } .mtw_link_user { font-size:12px; float:right; } |
アイコンフォントGenericonについては、こちらのサイトを参照ください。
使用にあたってのトラブルシューティング
旧バージョンのインストールに失敗
WordPressの構成によっては、My Twitter Widgetの旧バージョンのインストールは行えても有効化できない場合があります。その際は、次の方法で回避が可能です。
- 一旦最新版である1.6.1をインストールし有効化
- FTPでプラグインディレクトリへアクセスし、my-twitter-widgetディレクトリ内のファイルを全て削除
- my-twitter-widget.1.5.zipを解凍し、その構成ファイルを空となったmy-twitter-widgetディレクトリ内にすべてアップロード
- WordPressのプラグイン管理画面をリロード
これで1.5がインストールされ有効化された状態になるはずです。
ツイートが表示されない、表示がおかしい
設定を行ったにも関わらずツイート表示が行われない場合は、次の２項目をチェックしましょう。
- 登録したアプリのチェック
- Consumer Key（新API Key）, Consumer Secret（新API Secret）, Access Token, Access Token Secretの値のチェック
それでもダメな場合は、Debug optionsのErase cached dataをONにする、またはForce UTF8 EncodeをONにすることで回避できる場合がありますので、お試しください。
Twitter API制限
Twitter API 1.1では使用制限がかかっています。ここでご紹介している方法を始めとしてAPIを使用する場合全般にかかる制限で、1時間あたり使用回数350回までと定められています。
そのため、アクセスの多いサイトではAPI切れと呼ばれるツイートが取得できない現象が発生する可能性があります。
これを回避するには
- 標準ウィジェットを使用する
- キャッシュプラグインを使用し、APIの使用回数を減らす
いずれかの方法がありますが、後者の場合ですとQuick Cache新旧版の選び方とその設定で紹介したQuick Cacheなどを使用することをおすすめします。
まとめ
いかがでしたでしょうか。以前は
RSS取得→ツイートを表示→CSSで整形
が可能だったのが新API導入により不可能となったため
Twitterアプリ登録→各種キーを取得→ツイート一覧を取得→ツイートを表示→CSSで整形
とかなり煩雑とはなりましたが、一応は可能ですのでご紹介しました。
お役に立てれば幸いです。
