Twitterとの連携

目次

エントリーを公開し、Twitter へツイートするフォームを設置する

このマニュアルは、a-blog cms Ver.2.1.1.4をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2015年3月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。
ここでは、a-blog cms の非公開エントリーを公開に変更する時にTwitter へツイート(投稿)するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms の非公開エントリーを公開に変更する時にTwitter へツイート(投稿)するフォームは、以下のソースコードで実現できます。

<form action="" method="post" class="acms-inline-btn">
<input type="submit" name="ACMS_POST_Api_Twitter_Entry_Open" value="ツイートして公開" />&nbsp;<input type="text" name="tweet" value="更新しました: {status.title} ( {status.url} )" data-shorten="{status.url}" style="width:300px;" maxlength="140">
<input type="hidden" name="bid" value="{bid}" />
<input type="hidden" name="cid" value="{cid}" />
<input type="hidden" name="eid" value="{eid}" />
</form>

このフォームから公開することで、関連づけてあるTwitter アカウントにエントリーの公開情報が投稿されます。このフォーム自体は各エントリーの公開・非公開のボタンを表示する部分に設置することになります。

具体的には、 /themes/system/admin/entry/action.html を使用するテーマ内にコピーし、このファイル中の<!-- BEGIN open -->と<!-- END open -->の間に「公開」についての記述に上記のコードを追加することで、ログイン時の各種管理ボタンに「ツイートして公開」用フォームが追加されます。

利用方法

このフォーム自体は動作の性質上エントリーが非公開の場合にしか表示されません。「ツイートして公開」ボタンからエントリーの公開とTwitter への投稿が同時に行われます。 上記のコードを使用した場合は「更新しました(エントリーのタイトル)(エントリーのURL)」と投稿されます。
投稿先は、事前に設定したアカウントになります。

Twitter へのツイートフォームを設置する

このマニュアルは、a-blog cms Ver.2.1.1.4をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2015年3月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms からTwitter へツイート(投稿)するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms からTwitter へツイート(投稿)するフォームは、以下のソースコードで実現できます。

<form action="" method="post">
    <input type="text" name="tweet" value="" />
    <input type="hidden" name="twitter[]" value="tweet" />
    <input type="submit" name="ACMS_POST_Api_Twitter_Statuses_Update" value="ツイート" />
</form>

このフォームに入力・送信することで、関連づけてあるアカウントで投稿されますので、このフォーム自体はログイン後の画面に設置することになります。

具体的には、 /themes/system/admin/action.html を、使用するテーマ内にコピーし、この中に上記のコードを追加することで、ログイン時の各種管理ボタンにツイート用フォームが追加されます。


ツイートフォームを追加した状態

ツイートフォームを追加した状態

Twitter と連携する際の事前設定

このマニュアルは、a-blog cms Ver.2.6.1.4をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2016年11月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms とTwitter を連携させるための準備について説明します。

Twitter との連携によってできること

a-blog cms とTwitter を連携すると、以下の事ができるようになります。

  • 自分のタイムラインを表示
  • 自分のツイートを表示
  • リストのメンバーを表示
  • リストのタイムラインを表示
  • Twitter上の検索結果を表示
  • a-blog cms からツイート
  • a-blog cms からエントリー公開情報をツイートする

Twitter と連携するには、事前にa-blog cms, Twitter 両方の設定が必要になります。

Twitter 側の設定

Twitter のアプリケーション登録ページ( https://apps.twitter.com )から、申請を行う必要があります。
この時点でログインしているアカウントが表示や投稿に関連づけられます。
画面右側の「Create New App」から新しいアプリケーションの作成を行います。


アプリケーション登録ページ


アプリケーション登録画面



Name今回登録するtwitterのアプリ名。任意の名前で構いませんが、同じ名前のものを複数登録はできません。サイト(ブログ)名など、固有のものを使う事をおすすめします。
Descriptionこのアプリケーションの説明文です。どのサイトに使っているかなどの説明を残しておくと、アプリケーション一覧で確認できます。最低10字以上の説明文が必要です。
Websitea-blog cms をインストールしてるサイトのURLです。基本的には子ブログと共用はできませんので、必要に応じて実際にTwitter 連携を使用する場所のURLを入力してください。
Callback URL以下のように記述してください。 http://設置先URL/callback/twitter.html

コールバックURLの具体例


http://www.example.com/callback/twitter.html
http://www.example.com/blog/callback/twitter.html

ここまでの情報を登録したら、「Twitter Developer Agreement」を確認のうえ、「Yes, I agree」にチェックをして「Create your Twitter application」ボタンから新しいアプリケーションの作成を行います。



参考


twitter.html は /themes/system/callback/ 内にあります。

作成完了〜設定の変更と情報の取得


作成完了画面

作成完了画面


アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。
以下の内容を変更してください。


Application Settings内「Access level」


基本のアクセス形式です。「Read & Write」になっているか確認してください。


Access level

Access level


Keys and Access Tokens


Keys and Access Tokens

Keys and Access Tokens


a-blog cmsとの連携には、このタブで表示される「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が必要になりますのでメモをしておいてください。


a-blog cms側の設定(プロパティ設定)


コンフィグ>プロパティ設定

コンフィグ>プロパティ設定


Twitter との連携のために、a-blog cms の管理ページから設定をします。

Twitter 側の「Callback URL」で指定した設置URLの 管理ページ>コンフィグ>プロパティ設定 に「Twitter アプリケーション」入力欄があります。
Twitter アプリケーション登録で発行されたConsumer key とConsumer secretを入力してください。


key と secret を入力

key と secret を入力


a-blog cms側の設定(外部認証設定)


続いて、外部認証設定をします。これは コンフィグ >外部認証設定 から行います。
※この時点でプロパティ設定からConsumer key とConsumer secret が設定されていない場合には、外部認証設定ができません。


外部認証設定ページ

外部認証設定ページ

外部認証設定ページでは、OAuth認証を行うボタンが表示されます。このボタンをクリックすると、Twitter 側のアプリケーション認証画面へ移動します。この認証画面では表示に従い「アプリを認証」します。

認証が正常に完了すると「OAuth認証に成功しました」メッセージが表示されます。これでa-blog cms とTwitter の連携のための準備が完了しました。


Twitter側の認証画面

Twitter側の認証画面

認証成功

認証成功