WordPress(ワードプレス)にTwitter(ツイッター)を埋め込む方法

Twitterの更新情報を表示しているホームページを見かけることがしばしばあるでしょう。それほど複雑な設定ではないため、少々時間があれば誰にでもできます。簡単に申し上げると、Twitter埋め込み用のコードを発行し、WordPressに設定するという流れです。

(1)ユーザー名を確認する

Twitterの左メニューの「もっと見る」をクリックし、「設定とプライバシー」をクリックします。すると「設定」に画面が切り替わります。この「設定」の文字の下にある@以下の文字列をコピーしておいてください。

4_twitterpublish_1.png

(2)Twitter URLを入力する

埋め込みコードを発行するためのURLhttps://publish.Twitter.com/# )にアクセスし、「 https://Twitter.com/ 」のあとに先ほどコピーした、ユーザー名の@以下の文字列を入力します。

4_twitterpublish_2.png

(3)Embedded Timelineを選択する

タイムラインの表示である「Embedded Timeline」を選択します。

4_twitterpublish_3.png

(4)コードをコピーする

タイムラインの表示イメージが表示されますので、「Copy Code」をクリックして、埋め込み用のコードを取得します。
もし、高さや幅のサイズ、リンクの色などの設定を変更したい場合は「set customization option」をクリックし設定してください。

4_twitterpublish_4.png

(5)コピーしたコードを設置してタイムラインを表示する

コピー済みの埋め込みコードをWordPressのウィジェットなどに貼り付けることで、タイムラインの表示を行うことができます。

4_twitterpublish_5.png

WordPress(ワードプレス)の投稿を自動的にTwitter(ツイッター)にも投稿

次に、WordPressに投稿した内容をTwitterで配信する方法をご紹介します。WordPressブログを更新した後、同じ内容をTwitterでも配信するといった二重労力がかからないので便利です。連携にあたっては、WordPressプラグインを利用します。TwitterなどのSNSとWordPressを連携できるプラグインには色々な種類がありますが、今回は「WP to Twitter」をピックアップしました。

プラグイン「WP to Twitter」に利用にあたり、Twitterの開発者アカウントを登録する必要があります。英語のページで手続きを行います。

(1)WP to Twitterをインストールする

まず、「WP to Twitter」をWordPressにインストールし有効化します。そして、左側のメニューから「WP to Twitter」を選択します。ページには設定について書いていますが、入力に必要なAPI KEYなどの情報を準備する必要があります。

4_WPtoTwitter_1.png

(2)Twitterの開発者アカウントの登録ページを表示する

開発者アカウントの登録ページhttps://developer.Twitter.com )にアクセスします。Twitterにログインしていない場合は、右上の「Sign In」からログインしてください。ログイン後は「Apply」をクリックします。

4_WPtoTwitter_2.png

(3)開発者アカウントの申請ボタンを押す

「Apply for developer account」というボタンをクリックしてください。

4_WPtoTwitter_3.png

(4)ツール開発をする理由を選択する

必要に応じて申請理由を選択します。今回は個人的な用途のものとしてパーソナルプロジェクトに該当する中の「Building tools for Twitter users」を選択しておきました。

4_WPtoTwitter_4.png

(5)ユーザーネーム等の設定を行う

居住している国名と呼び名を設定します。一番下には、今後Twitter APIに関する案内を送ってよいか聞かれているので必要に応じてチェックをいれます。

4_WPtoTwitter_5.png

(6)申請に関する質問に回答する

ここからは英語で質問に回答しなければいけません。回答に必要な最低文字数をクリアして入力する必要があります。英語で回答するとはいえ、Google翻訳などを利用しても無理に難しい表現をせずにシンプルに書けば可能でしょう。また、「NO」を回答する場合は、文字の入力をせず、「YES / NO」の切り替えボタンを操作するだけです。

(1つ目の質問)
In English, please describe how you plan to use Twitter data and/or APIs. The more detailed the response, the easier it is to review and approve.

→データやAPIの使用目的を聞かれています。ブログ投稿を行うとTwitterも投稿を行う旨を記載します。

4_WPtoTwitter_6.png

(2つ目の質問)
Please describe how you will analyze Twitter data including any analysis of Tweets or Twitter users.

→ツイートやユーザーの分析を含め、Twitterデータをどのように分析するのか、説明を求められています。分析をしない場合は「NO」にします。

4_WPtoTwitter_7.png

(3つ目の質問)
Will your app use Tweet, Retweet, like, follow, or Direct Message functionality?
Please describe your planned use of these features.

アプリはツイート、リツイート、お気に入り、フォロー、またはダイレクトメッセージ機能を使用するか、これらの機能の使用予定を説明します。今回の場合は、ツイートのみを行う旨を記載します。

4_WPtoTwitter_8.png

(4つ目の質問)
Do you plan to display Tweets or aggregate data about Twitter content outside of Twitter? Please describe how and where Tweets and/or data about Twitter content will be displayed outside of Twitter.

Twitter以外のTwitterコンテンツに関するツイートを表示したり、集計データを表示したりするか。コンテンツに関するツイートやデータがTwitterの外部に表示される方法と場所を説明します。タイムラインにツイートを表示することを記述します。

4_WPtoTwitter_9.png

(5つ目の質問)
Will your product, service or analysis make Twitter content or derived information available to a government entity?In general, schools, colleges, and universities do not fall under this category.

Twitterコンテンツまたは派生情報を、学校、大学などを含まない政府機関で利用するか回答します。今回は「NO」です。

4_WPtoTwitter_10.png

入力後、確認画面が表示され、「Looks Good」をクリックします。

(7)規約に同意する

次に規約が表示されますので、確認の上、「Accept」をクリックしてください。

4_WPtoTwitter_11.png

(8)申請完了

以下の画面が表示されたら、申請は完了です。申請が完了し、審査中だという旨のメールが届いているはずです。審査が完了するまで時間がかかりますので、連絡がくるまで待ちましょう。

4_WPtoTwitter_12.png

(9)アプリ開発を開始する

今回は、24時間ほど経って承認のメールが届きました。承認メールに記載されていたリンクから開発者向けページにアクセスします。ページを少しスクロールすると、「Create an app」をクリックします。

4_WPtoTwitter_13.png

すると以下の画面になりますので、右上の「Create an app」を押しアプリ開発をスタートします。

4_WPtoTwitter_14.png

(10)アプリについての情報を登録する
アプリについていくつかの質問に回答しなければいけません。入力が必要な部分だけ以下にピックアップしました。他の項目は空間でも大丈夫です。

App name
アプリの名称を決めます。

4_WPtoTwitter_15.png

Application description
アプリの内容について説明します。

4_WPtoTwitter_16.png

Website URLとCallback URLs
→両方とも同じURLです。Twitterと連動させるホームページURLを記載します(WP to Twitterの設定ページに表示しているURL)。

4_WPtoTwitter_17.png

Tell us how this too will be used
→何ができるアプリなのかを説明します。WP to Twitterの設定ページに記入文を掲載しているので、それを記述してもよいです。

4_WPtoTwitter_18.png

(11)規約に同意する

開発規約を読み「Create」をクリックする。

4_WPtoTwitter_19.png

(12)アプリの詳細が表示される

内容が正しいか確認して、「keys and token」をクリックします。

4_WPtoTwitter_20.png

(13)APIキーとトークンをコピーする

ついにAPIキーとトークンを表示するところまできました。API KeyとAPI secret keyをコピーします。Access tokenとAccess token secretは、「Create」をクリックすると表示しますので、これらもコピーします。

4_WPtoTwitter_21.png

(14)WordPressにAPIキーとトークンを設定する

WordPressのWP to Twitterの設定ページに、先ほどコピーしたAPIとアクセストークン情報を登録します。「Connect to Twitter」をクリックして設定完了です。

4_WPtoTwitter_22.png