色んなブログを見ていると、サイドバーにTwitterのタイムライン（その人のツイート一覧）が表示されているのを目にすることがあると思います。
ちなみに当サイトでも、このようにサイドバーに僕のタイムラインを載せていますが、
最初はどうやって表示させるのか全くわからなかったんですよね…！
そこで今回は、Wordpressで作ったブログのサイドバーに、自分のTwitterのタイムラインを表示させる方法をご紹介していきます。
ちなみに当サイトのテーマはSANGOを使用していますが、Wordpressであれば、どのテーマをお使いの場合でも大丈夫です。
1.TwitterのプロフィールページのURLをコピーする
まずはブログに表示させたいTwitterアカウントにPCでログインし、プロフィールを開きます。
自分のプロフィール画像orユーザー名をクリックするか、サイドバーの「プロフィール」をクリックすると、プロフィール画面が表示できます。
プロフィールの表示ができたら、プロフィールページのURLをコピーします。
2.Twitterのタイムラインのコードを発行する
次にTwitterのタイムラインを埋め込む際に使うコードの発行ページを開きます。
「Enter a Twitter URL」のところに、先ほどコピーした、自分のTwitterのプロフィールページのURLを貼り付けます。（僕の場合は「https://twitter.com/nozzie10」です）
エンターを押すと、2つの選択肢が提示されます。
左側の「Embedded Timeline」はタイムラインの発行を、右側の「Twitter Buttons」はツイートボタンの発行をすることができます。
今回はタイムラインを発行したいので、左側の「Embedded Timeline」をクリックしましょう。
すると、このような画面が表示されますね。
ここに表示されているコードをコピーすれば、好きな場所にコードを貼り付けることでタイムラインを表示させることができるのですが、「set cusomization options」をクリックすれば、サイズや色合いなどを自由に変更することができます。
なお、変更後のデザインはすぐ下で表示されるデモデザインにリアルタイムで反映されるので、そちらを見ながら調整していきましょう。
またコード取得後に「やっぱり高さをもっと出したいな」と思ったり、どこかを変更したくなったとしても、自由に修正することもできますのでご安心を。
「Update」をクリックしたら、修正後のコードが表示されますので、そちらをコピーしましょう。
これでコードの生成は終わりです。
3.Wordpressのサイドバーに埋め込みコードを設置する
Twitterのタイムラインを埋め込みたいブログの管理画面に移り、「外観＞ウィジェット」と移動しましょう。
ウィジェットの一覧の中に「カスタムHTML」という項目があるので、それを「サイドバー」の中に移動させ、タイムラインを表示させたいところに並び替えます。
次は移動させた「カスタムHTML」の中に先ほど取得したコードを貼り付けて、「保存」をクリックします。
実際にサイトを見てみると…、
ちゃんと表示されていますね！
番外編：やっぱりサイズなどを直したい時は…
サイトに埋め込むタイムラインのサイズはコード取得時に事前に設定しましたが、実際にサイドバーに表示されたツイートを見て「もっと幅を狭くしたい」とか「もっと縦長にしてたくさんのツイートを表示させたい」と思うこともあるかもしれません。
そんな時は、ウィジェット内のサイドバーに設置した「カスタムHTML」内のコードを編集することで、超簡単に変更することができます。
こちらですが、
- data-width：横幅
- data-height：縦幅（高さ）
- data-theme：lightで明るいもの、darkで暗いもの
という風に修正ができます。
サイトに実装されたタイムラインを見て、直したいところがあれば、ここの数字などを書き換えてみてください。
