【メルマガ限定プレゼント】オンライン起業で時間とお金から自由になる方法

TwitterのタイムラインをWordPressブログ のサイドバーに表示させる方法

色んなブログを見ていると、サイドバーにTwitterのタイムライン(その人のツイート一覧)が表示されているのを目にすることがあると思います。

ちなみに当サイトでも、このようにサイドバーに僕のタイムラインを載せていますが、

Wordpressブログのサイドバーに載せたツイッターのタイムライン

 

最初はどうやって表示させるのか全くわからなかったんですよね…!

そこで今回は、Wordpressで作ったブログのサイドバーに、自分のTwitterのタイムラインを表示させる方法をご紹介していきます。

ちなみに当サイトのテーマはSANGOを使用していますが、Wordpressであれば、どのテーマをお使いの場合でも大丈夫です。

1.TwitterのプロフィールページのURLをコピーする

まずはブログに表示させたいTwitterアカウントにPCでログインし、プロフィールを開きます。

自分のプロフィール画像orユーザー名をクリックするか、サイドバーの「プロフィール」をクリックすると、プロフィール画面が表示できます。

Twitterのプロフィール画像

プロフィールの表示ができたら、プロフィールページのURLをコピーします。

Twitterのプロフィール画面

2.Twitterのタイムラインのコードを発行する

次にTwitterのタイムラインを埋め込む際に使うコードの発行ページを開きます。

https://publish.twitter.com/#

Twitterの埋め込みコード発行画面

「Enter a Twitter URL」のところに、先ほどコピーした、自分のTwitterのプロフィールページのURLを貼り付けます。(僕の場合は「https://twitter.com/nozzie10」です)

エンターを押すと、2つの選択肢が提示されます。

左側の「Embedded Timeline」はタイムラインの発行を、右側の「Twitter Buttons」はツイートボタンの発行をすることができます。

今回はタイムラインを発行したいので、左側の「Embedded Timeline」をクリックしましょう。

Twitter埋め込みコード発行画面の選択肢

すると、このような画面が表示されますね。

Twitterのタイムラインのコード埋め込み画面

ここに表示されているコードをコピーすれば、好きな場所にコードを貼り付けることでタイムラインを表示させることができるのですが、「set cusomization options」をクリックすれば、サイズや色合いなどを自由に変更することができます。

Twitterのタイムラインの変更画面

なお、変更後のデザインはすぐ下で表示されるデモデザインにリアルタイムで反映されるので、そちらを見ながら調整していきましょう。

またコード取得後に「やっぱり高さをもっと出したいな」と思ったり、どこかを変更したくなったとしても、自由に修正することもできますのでご安心を。

「Update」をクリックしたら、修正後のコードが表示されますので、そちらをコピーしましょう。

Twitterの埋め込みコード生成画面

これでコードの生成は終わりです。

3.Wordpressのサイドバーに埋め込みコードを設置する

Twitterのタイムラインを埋め込みたいブログの管理画面に移り、「外観>ウィジェット」と移動しましょう。

ウィジェットの一覧の中に「カスタムHTML」という項目があるので、それを「サイドバー」の中に移動させ、タイムラインを表示させたいところに並び替えます。

wordpressのウィジェット編集画面

次は移動させた「カスタムHTML」の中に先ほど取得したコードを貼り付けて、「保存」をクリックします。

実際にサイトを見てみると…、

ちゃんと表示されていますね!

番外編:やっぱりサイズなどを直したい時は…

サイトに埋め込むタイムラインのサイズはコード取得時に事前に設定しましたが、実際にサイドバーに表示されたツイートを見て「もっと幅を狭くしたい」とか「もっと縦長にしてたくさんのツイートを表示させたい」と思うこともあるかもしれません。

そんな時は、ウィジェット内のサイドバーに設置した「カスタムHTML」内のコードを編集することで、超簡単に変更することができます。

こちらですが、

  • data-width:横幅
  • data-height:縦幅(高さ)
  • data-theme:lightで明るいもの、darkで暗いもの

という風に修正ができます。

サイトに実装されたタイムラインを見て、直したいところがあれば、ここの数字などを書き換えてみてください。