WordPressで作成しているブログにTwitterのタイムラインを埋め込み表示させたい！という場合の方法を解説いたします。
Twitterは特にその人となりが出るSNSです。
ブログを書いている人がどんな人か分かったり、店舗のブログであればお得情報やお店の裏側などが見えて面白いですよね。
もちろんブログ⇔Twitter間で集客手段としても使えます。
簡単に導入ができますので是非試してみてください。
埋め込み用コードを作成する
以前はTwitter側で承認作業を行う必要がありましたが、現在は
こちらのサイトから簡単に埋め込み用コードを作成し、WordPressに表示させる事が可能です。
試しにTwitter Devのツイートを表示させる為の埋め込み用コードを作成してみましょう。
埋め込みたいタイムラインのURLを記述する
Twitter Publishにアクセスし、「What would you like to embed?」と書かれているフォームに表示したいタイムラインのURLを記述します。
https://twitter.com/ユーザー名（@以降）と記述する事でそのユーザーのツイートを表示させることができます。
今回はTwitter Devのタイムラインを表示させたいので、ここに入れるURLは「https://twitter.com/TwitterDev」ですね。
分からなければTwitterで表示させたいタイムラインを開き、アドレスバーに表示されているURLをコピペしてきましょう。
表示形式を選ぶ
URLを入れたら、次は表示形式を選択します。
・Embedded Tweet
・Embedded Timeline
・Twitter Buttons
の3つから表示の方法を選択できます。
1つずつ解説していきます。
Embedded Tweet
個別のツイートを埋め込む場合はこちらを使うのが良いようです。
誰々がつぶやいているこのツイートだけを表示させたい！という場合にはこちらを使います。
Embedded Timeline
特定ユーザーのつぶやきをタイムライン表示させたい場合はこちらを選択します。
普段Twitterで見るタイムラインのような形でツイートを表示させることができます。
Twitter Buttons
フォローやシェア、メッセージの送信などを行えるアクションボタンを作成する事ができます。
今回はタイムラインを表示させるので、「Embedded Timeline」を選択しましょう。
そうすると、
このように埋め込み用コードが書かれた欄が表示されるかと思います。
「Copy Code」をクリックすると埋め込み用コードをコピーする事ができます。
ブログにコードを追加する
コードがコピー出来たらブログの任意の箇所に先ほどのコードを貼り付けてみましょう。
試しに今回はサイドバーにタイムラインを表示させてみます。
「外観」→「ウィジェット」と進み、サイドバーのエリアに「カスタムHTML」を追加します。
カスタムHTMLの入力欄に先ほどのコードを貼り付けて保存、ブログを確認してみましょう。
長くね？
見た目を調整しよう
コードをブログに張り付ければタイムラインは表示されるのですが、そのまま使ってしまうと先の画像のように際限なくタイムラインの高さが取られてしまいます。かなり下の方まで伸びてしまっていて見辛い事この上ないですね。
なのでサイズを指定してあげる必要があります。
先ほどTeitterPublishで表示されたコードの上に、「set customization options」というリンクがあるかと思います。
ここをクリックすると
このようにタイムラインが表示される領域の「サイズ」と「色」、「表示言語」を設定できる項目が現れます。
「サイズ」のHeight(px)でタイムラインが表示される領域の高さ、Width(px)で横幅を。
「色」では表示されるタイムラインの背景色とリンクの文字色を。
「表示言語」では言葉の通り、何語で表示するかをそれぞれ選択できます。
Height（高さ）を任意の高さに設定して「Update」をクリックすると、先ほどのコードに高さの指定が追加されます。400～500pxぐらいの高さがツイートが見やすく、その他のコンテンツを見る邪魔にもならない高さかと思いますので参考に設定してみてください。
それでは高さを「500px」に指定したコードを先ほどと同様にサイドバーに入れてみます。
良さそうですね！
※注意 鍵アカウントは表示できません
もちろんのことですが、鍵付きのアカウントに関しては表示させることができません。
上手く表示されずにテキストリンクのみになってしまう！という場合、表示させようとしているアカウントに表示制限がかかっている可能性がありますので注意してください。
ブログへのタイムライン表示のまとめ
いかがでしたでしょうか？
ブログにタイムラインを表示させるのは意外と簡単だったのではないでしょうか？
ブログより簡単に情報発信ができるTwitterはトレンドを追ったり新しい技術情報を素早く手に入れたりと非常に便利に使えます。
是非活用してみてください。
