Twit ConnectはWordPressにtwitterでログイン、他にもいろいろ出来るプラグイン

WordPressにtwitterのoAuthを使ってログインしたい。他にも方法があるかもしれないが、シンプルかつ高機能にそれを実現するのがTwit Connectだ。杉並区おた助は、全く知らない人を執筆者として迎え入れるマルチユーザーサイトなので、ユーザーのアカウント作成・ログイン環境を簡略にする必要があった。Twit Connectはtwitterによる気軽なサンインンを可能にしたたけでなく、その他小粋なことも実現してくれた。

Twit Connectの5つの仕事

• oAuthを使ってtwitterでWordPressにログインする
• BuddyPressと連携する
• twitterのアバターがWordPressのアバターとなる
• WordPressでのコメントを同時にツイートできる
• @Anywhereを導入できる

oAuthを使ってtwitterでWordPressにログインする

Sign in with Twitterボタンを押せば、新しいウィンドウが開く。環境によりタブ、ポップアップだったりする。そこはもう見慣れたtwitterログイン画面。既にログインしていればこれは表示されず次の画面へ。

アプリケーションとtwitterアカウントの連携が初めての場合、許可するかどうかを尋ねる画面が出てくる。一度許可すれば出てくることは無い。つまり、Twit Connectを使ってWordPressにログインする際も、twitterからログアウトしていなければ、全て自動なのだ。twitterにログインかつアプリケーション（この場合はWorｄPress）にログインを許可している場合、

1. WordPressでTwit ConnectのSign in with Twitterボタンを押す
2. ポップアップなどが開きtwitterでの認証が始まるが何もする必要はない
3. ポップアップが閉じてWordPressがログイン状態でリロードされる

といった具合でとても簡単。

BuddyPressと連携する、twitterのアバターがWordPressのアバターとなる

Compatible with BuddyPress　と公式には書いてある。つまりTwit Connectで同時にBuddyPressにもログインできる。そして最大の特徴はアバターAvatarだろう。twitterのアバター画像がWPの、そしてBPのアバター画像になる。これは非常に便利で、ユーザーに新たなアップロードを要求しない点で人にやさしい仕組み。ありがたい。

WordPressでのコメントを同時にツイートできる

Display a checkbox that allows visitors to automatically tweet a link when they submit a comment　というのが設定の中にある。コメント欄にチェックボックスが現れ、チェックしてコメントすると同時にツイートできるというもの。

@Anywhereを導入できる

@Anywhereについては公式やこちらを。動作が重いのとメリットを感じなくなって杉並区おた助ではお別れしたがtwitter連携サイトには有用な機能が豊富。簡単に紹介すると、

• Hovercards：@machiikuなど書くと自動でリンクが生成され、マウスオーバーでアカウント情報が浮き出てくる。その場でフォローなど出来る
• Tweet：その場でツイートできる
• Connect to twitter：ちょっと不明

導入に必要なトークンだのなんだの難しい手間をTwit Connectが代行してくれる。しかし注意、Twit ConnectとConnect to twitterは別物で、Twit Connectでログインしたあと、その場でツイートなどを使うにはConnect to twitterで改めてログインする必要があった記憶がある。このあたり曖昧。

一番の特徴はHovercardsか。Topsyで実装されているのでご覧ください。

一番下にあるのがtwitterアバター。マウスオーバーでこのようなプロフィール画面が出てくるのだ。フォローボタンもある。

ちなみに、@anywhereは@machiikuを@machiikuへ自動変換し、その機能の一つとしてHovercardsがある。デフォルトの仕様としては、Hovercards対象はテキストだけだ。このように、アバターimgも対象にするにはひと手間あった。横道にそれるので書かないが、需要があれば思い出します。

twitterでのログインを実現するなら定番か

現時点でバージョン2.57。1年くらい使っているが度々アップデートを繰り返してきた。作者のShannon Whitleyさんはフレンドリーな方で、twitter上での突然の質問にも快く答えてくれた。

最近のアップデートでは、Sign in with Twitterボタンのカスタマイズが簡単になった。適切なフォルダに画像をアップロードするだけで選択肢になると。

作者ページを抄訳（かつ意訳かつ要約）してみる

Twit Connect provides your readers with the ability to quickly claim their comments through a Twitter-provided login. The method used by Twitter to enable this process is called oAuth. oAuth is an authentication standard that allows users to identify themselves using their Twitter user name without needing to provide their Twitter password.

Twit Connectはtwitterによるログインを通じて素早くコメントすることを可能にする。twitterによって使われるこの方法はoAuthと呼ばれる。oAuthはtwitterパスワードを必要とせずtwitterユーザー名で認識させる認証のスタンダードだ。

Twit Connect provides two different options for connecting to Twitter, hosted oAuth or self-hosted. Using the hosted method, your blog will connect to a Whitley Media server which will manage the oAuth exchange. In the self-hosted option, everything is handled on your blog, however you must register your blog with Twitter as a Twitter application. PHP 5 or greater is required to run the self-hosted option. The hosted option will run under PHP 4 or 5.These are the steps that are required for the self-hosted option:

Twit Connectはtwitterへの接続で2つの違った方法を提供する、ホストされたoAuthかセルフホストかだ。ホストされた方法では、あなたのブログはoAuth交換を管理するWhitley Media serverに接続される。セルフホストでは、全てはあなたのブログの中で行われるが、あなたのブログとtwitterに登録する必要がある。PHP5かそれ以上が、セルフホストでは必要とされる。ホストではPHP４か5以下でも動作するだろう。セルフホストにはこれらの必要なオプションがある：

Install the plugin.
Register your blog on Twitter.com and retrieve your Consumer Key and Consumer Secret.
Plug those items into Twit Connect’s configuration page and you will have a complete and independent oAuth application.
When your readers want to comment on a post, they’ll simply click on a button and provide their Twitter credentials to identify themselves. You’ll also see their Twitter avatar alongside the comments if you’ve setup avatar support on your blog.

プラグインをインストールする。twitter.comであなたのブログを登録し、Consumer KeyとConsumer Secretを受け取る。Twit Connectの設定ページにそれらを入れ込めば、完全で独立したoAuthアプリケーションとなる。あなたの読者が記事にコメントしたいときは、ボタンをクリックするだけで、彼らを認識するためのtwitterCredentialsが提供される。アバターをサポートしているなら、コメントの横にtwitterのアバターが表示される。

With the hosted option, simply enable the plugin. You do not need to register your blog with Twitter.Twit Connect sports a choice of two different buttons, the classic Twit Connect button or the “Signin with Twitter” button from Peter Denton.

ホストオプションは、ただプラグインを有効化するだけ。ブログをtwitterに登録する必要はない。ボタンにはいくつかバリエーションがある。

＊まちいく補足：画像を自分でimagesフォルダにアップロードすればボタンとして選択できるようになった。杉並区おた助では、画像の横にテキスト「参加する」を加えてbutton要素としている。511行目あたりで以下のようにすればよい。

button.innerHTML = "<img src=\''.$twc_btn_image.'\' alt=\'Signin with Twitter\' /><p>参加する</p>";

プラグイン配布ページに書いてあったインストールの大事なこと

1. Upload twitconnect.php and all included files to the /wp-content/plugins/directory.
2. Place <?php if(function_exists('twit_connect')){twit_connect();} ?> in your comment template or rely on the default <?php do_action('comment_form', $post->ID); ?> code.
3. Activate the plugin through the ‘Plugins’ menu in WordPress.
4. Modify plugin options through the Settings menu.

1. twitconnect.phpと全ての含んだファイルをwp-content/plugins/directoryにアップロード
2. デフォルトのコメントテンプレートなどにある<?php do_action(‘comment_form’, $post->ID); ?>を<?php if(function_exists('twit_connect')){twit_connect();} ?>に置き換える
3. プラグインを有効化する
4. 設定をいじる

2番を実施しないと意味がない。twitterを活用したコメントが機能しない。これ忘れちゃいかん。

設定ページを抄訳、解説してみる

このプラグインには日本語版がない。だから頑張って訳してみる。

Connection Type

上で説明した、twitteroAuthの設定のための画面だ。Check this box to use your own Consumer Key and Consumer Secret.にチェックしてConsumer KeyとConsumer Secretを入れるだけだ。KeyとSecretを入手する方法は他のサイトに譲りたい。簡単で、ここに行って項目を埋めるだけだ。後述の、コメントを自動的にツイートする機能を使うには、Read&Write（読み込み＆書きこみ）を選ぶ必要がある。

@anywhere

有効にするのもよいが、いろいろJSを読み込むのでけっこう重くなった記憶がある。目的に合わせてどうぞ。Add a Twitter tweet box below the comment form.にチェックを入れればコメントフォームの下にツイートボックスが現れる。WordPressからつぶやけるのだ。そして、どこからツイートしたというアプリケーション名は先ほどoAuthで登録した名前になる。

GeneralSettings

さぁ、来ました。一番ひっかかるところ。Twitter Login Suffix。Twit Connectで作成した新しいWPアカウントと、それ以外の通常作成アカウントを区別するため、Twit Connectのほうに接尾語をつけるというもの。ここで設定でき、一度設定すると変えられない。

一見便利だが、杉並区おた助ではアカウント名＝twitterIDとして様々な機能を実現する、twitter以外からの新規登録は受けないためにここは不要だった。しかし一度、Save settingsを押してしまうとここが変わらない。どうしようもないときは、twitconnect.phpの1244行あたりを：

$twc_user_login_suffix = '';

のようにシングルコーテーションシングルコーテーションとしておく。”じゃなく”。既にsuffixつきでアカウントが作成されてしまった場合はデータベースの世界に行くしかない。そんなに難しくないです。

Default E-mail Addressは勝手に生成されるE-mailアドレス。どうやらアカウント作成にはE-mailが必要、というのがWordPressの仕様っぽくて、これをむりやり生成しているようです。中身はなんでもよいです。杉並区おた助ではchangeme.%%username%%@gmail.comとしています。

他の設定は使ってません。

Comment Configration

Author Link。これまた大事。執筆者（Author)リンクにhttp://twitter.com/{username}を設定するかどうか。プロフィール欄に出てくるURL蘭に自動的にこのリンクを追加してくれます。杉並区おた助ではアバタークリックでプロフィールのURLを呼出しtwitterに飛ぶようにしていますがここで効いてきます。

Add to Comment Pageにチェックを入れることでコメントページにTwit Connectボタンが出現します。

Tweet This Commentにチェックを入れると、コメントを投稿したときに自動的にツイートすることができます。これ、結構すごいかも。この機能を使用するために、oAuthのRead & Writeアクセスが必要になります。

Login Configration

ログインページにボタンを表示させるかどうか。ボタン周囲のテキストも追加できます。ログイン後のリダイレクトをどこにするかもここで設定。あれ、ボタンってログインページとコメントページにしか置けないの？そんなことはありません。その方法については次を。

好きなところにボタンを置く

基本、上記のコメントテンプレートの書き換えによって、コメントページにボタンが現れます。またログインページに表示させることもできます。しかし他の場所に表示させたいときもあると思います。私はこれを実現するのに相当時間かけました。初心者ですから。

<?php if(function_exists('twit_connect')){twit_connect();} ?>

をボタンを置きたい位置に置きます。しかしログイン後コメントフォームなどが出てきちゃうので、それらを消さなくてはなりません。出てきたものをtwitconnect.php内で探して消しました。私はね。

最近のアップデートで、Multiple buttons on a single page. Change id=”twc_connect” to class=”twc_connect” for multiple buttons.という記述があり、ボタンを複数置くことが可能になった模様です。でもsingleだけかもしれません、未検証なので何も言えません。なお、杉並区おた助ではヘッダーに入れており、ログイン後は記事新規追加ページへのリンクに変わるようにしています。

Twit Connectって地味に凄いです

oAuthを使ってWPにログインするプラグインは多々あります。その中でTwit Connectが光るのは、

1. アバター連携
2. BuddyPress連携
3. @anywhere同梱

WordPressを、TwitterやFacebook、Googleなどのアカウントでログイン可能にするプラグイン・Make Your Site Socialなどもありますが、上の3点は抑えていないと思います。杉並区おた助がBPを使っていたときはTwit Connectしか選択肢がありませんでした。アバターの画像URLはhttps://twitter.com/#!/machiiku/avatar.jpgなんて単純なものでないため、自作は出来ません。きちんと画像を取りに行ってくれるTwit Connectが必要だったんです。他のプラグインでも出来るかもしれないけど、気に入っているので乗り換えることはたぶんないでしょう。

あなたも、Twit Connectでtwitter integrated siteを作りましょう！

Twit Connect2.57