TopMovable Typeプラグインコメント > 2010年11月
2010年11月 1日

TwitterのOAuth認証でMovable Typeにコメント投稿できる「TwitComment」プラグイン

November 1,2010 1:55 AM
Tag:[, , ]
Permalink

Movable Typeで、TwitterのOAuth認証によるコメント投稿を実現する「TwitCommentプラグイン」を公開します。

コメント投稿でTwitterのOAuth認証

2010.11.01追記:Twitterのガイドラインに抵触しないよう、プラグイン名および使用画像を変更しました。

このプラグインは、「コメント投稿にTwitterのOAuth認証を導入」で紹介したものです。1項の2つめの機能追加を行ってから公開しようと思ってましたが、しばらく多忙だったため公開が遅れてしまいました。

1.機能

  • TwitterのOAuth認証でのコメント投稿が可能です。
  • TwitterのOAuth認証で投稿されたコメントに対応するコメンター画像が表示可能です(冒頭の画像)。

このプラグインはブログ/ウェブサイト単位に機能します。4項・5項の作業はブログ/ウェブサイト単位に行ってください。

2.プラグインのダウンロード

下記の TwitComment_x_xx.zip をクリックして、プラグインアーカイブをダウンロードします。

変更履歴

2010.11.01 初版
2010.11.03 v0.02 phpファイル変更
2010.11.07 v0.03 ウェブサイト/ブログ作成でエラーになる不具合を修正
2010.11.08 v0.021 Movable Type 4.x対応版公開
2010.11.25 v0.022 Movable Type 4.x対応版でプロフィール画像が表示されない不具合を修正
2010.12.01 v0.04/v0.023 セキュリティアップデート/画像ファイルアップロード処理の改善

動作確認バージョンは、Movable Type 4.27/Movable Type 5.03xです。

3.プラグインのインストール

プラグインアーカイブを展開し、pluginsディレクトリ直下にある TwitComment フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。また、mt-static/pluginsディレクトリ直下にある TwitComment フォルダごと、Movable Type のアプリケーションディレクトリの mt-static/plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「TwitComment~」が表示されればインストール完了です。

システム管理画面のプラグイン一覧

4.Twitterのアプリケーション登録

Twitterにログインして、「ユーザー名」→「設定」をクリック。

ログイン画面

「連携アプリ」をクリック。

設定画面

「開発者」の説明にある「こちら」をクリック。

連携アプリ画面

「新しいアプリケーションを追加」をクリック。

Twitterアプリケーション画面

表示されたページで次の設定を行います。

Application Details

  • アプリケーションのアイコン:(設定不要)
  • アプリケーション名:任意のアプリケーション名を入力
  • アプリケーションの説明:任意のアプリケーションの説明を入力。
  • アプリケーションのウェブサイトURL:任意のURLを入力(プラグインの動作とは関係ありません)
  • 所属会社/団体:(設定不要)
  • サイト:(設定不要)
  • アプリケーションの種類:「ブラウザアプリケーション」を選択
  • コールバックURL:以下のURLを設定(赤字のみ自サイトの内容に入れ替え)
    http://アプリケーションディレクトリまでのURL/mt-comments.cgi?__mode=oauth_verified&blog_id=xx&client=twitter
  • Default Access type:「Read-only」を選択
  • Twitterでログインする:チェックします

2つのCAPTCHAコードを半角スペースで区切ってテキストフィールドに入力し、保存すれば「Consumer key」と「Consumer secret」が表示されます。この2つの値は次の作業で使用します。

Twitterアプリケーション設定完了画面

設定内容は後で変更することができます。変更する場合は、この画面にある「Edit Application Settings」を、「Consumer key」と「Consumer secret」を変更したい場合は、「Reset Consumer Key/Secret」をクリックします。

Twitterアプリケーション設定完了画面

5.プラグインの設定

TwitCommentプラグインを使用したいブログまたはウェブサイトの「設定」→「登録/認証」をクリックして、「Twitter Commentプラグイン設定」のリンクをクリック。

登録/認証画面

プラグイン一覧画面に移動するので、「TwitComment」の設定タブを開き、4項で取得した、「Consumer key」と「Consumer secret」を設定して、「変更を保存」をクリックします。

TwitComment設定画面

「設定」→「登録/認証」画面に戻って、「Twitter」をチェックして「変更を保存」をクリックします。

「登録/認証」画面

これで設定完了です。

6.基本動作確認

任意の記事のコメント投稿フォームでサインインをクリックし、「Twitter」を選択。

サインイン画面

これで次のような画面に切り替わるので、Twitterのロゴをクリック。

サインイン画面

アカウントへの接続要求画面にリダイレクトするので、「許可する」をクリックします。

アカウントへの接続要求画面

利用しているブラウザでTwitterにログインしていない状態であれば、ユーザー名・パスワードを入力する画面が表示されます。

アカウントへの接続要求画面

これでサインインできました。

サインイン後のコメント投稿画面

投稿コメントにはTwitterのロゴやユーザー名が反映されます。リンクをクリックすれば、Twitterのユーザーページにジャンプします。

twitterのOAuth認証による投稿コメント

7.Twitterのアイコンを表示する

冒頭のようにTwitterのアイコンをコメント一覧に表示する方法ですが、コミュニティ機能を利用している場合、テンプレートの変更は不要です。コメントを投稿すれば冒頭のアイコンが表示されます。

プロフィール画像機能は、コミュニティ機能をもたないMTOSなどでも利用可能なはずです。「プロフィール画像」のテンプレートについては、次のページを参考にしてください。

プロフィール画像の表示を便利に行うテンプレートモジュール
Comments [24] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3