この記事では、ブログに「Twitterのタイムライン」を表示させる方法を解説します。
言葉で伝えるSNS「Twitter」と「ブログ」の相性はとてもよいです。ブログに「Twitterのタイムライン」を埋め込むことによって、ブログの読者さんへアピールできます。一見難しそうにみえますが、じつは簡単に表示できるんですよ。
「Twitterとブログどちらもやっています!」という方は、ぜひ続きを読んでみてくださいね。
「Twitterのタイムライン」をブログに表示させる方法:3ステップ
それでは、「Twitterのタイムライン」をブログに表示させる方法を解説します。3ステップでできます!
「Twitterのタイムライン」を表示させるためには、コード(プログラミング言語で書かれたもの)が必要になります。プログラミングのことが分からなくても大丈夫。手順に沿って進めていけば、コピペするだけOKですよ。
ステップ1 Twitterタイムラインのコードを手に入れる
まずは、ご自身のTwitterアカウントへ移動して、「プロフィールページ」を表示します。
![](https://trigger-blog.com/wp-content/uploads/322936f86dbbe39fd844d97102cfc34e.png)
すると、プロフィールページのURLが出てきました。URLをコピーしましょう。
![](https://trigger-blog.com/wp-content/uploads/1b257766a1c122cc11582e10cc2a0a5e.png)
Publish.twitter.comへ移動します。このページでタイムラインを表示するために、必要なコードを作成することができます。検索窓に、先ほどコピーしたプロフィールページのURLを入力してください。
![](https://trigger-blog.com/wp-content/uploads/7ec024ed18a2254d5fad695ace8fe088.png)
「Here are your display options」の下に、「Embedded Timeline」(タイムライン)と「Twitter Buttons」(ツイッターボタン)のふたつが出てきました。
ここでは、タイムラインを作成したいので「Embedded Timeline」をクリックします。ライムラインを表示させるためのコードが作り出されます。
![](https://trigger-blog.com/wp-content/uploads/20744f5146db5618d11d86e7e8dbc806.png)
これで、あなたのTwitterタイムラインのコードが作り出されました。「Copy Code」をクリックして、コピーしておきましょう。
![](https://trigger-blog.com/wp-content/uploads/d9f8e076ed029afad4cfcb8100e74791.png)
ステップ2 タイムラインのデザイン変更
さきほどのTwitterタイムラインのコードは、デフォルト表示のデザインです。デザイン変更したい場合は、表示させるタイムラインをカスタマイズすることもできますよ。
デフォルト表示のままでいいよ!という方はステップ3まで進んでください。
「set customization options」(カスタマイズのオプション)をクリックします。
![](https://trigger-blog.com/wp-content/uploads/c60e4cee3df566ee98d59aad087f7156.png)
表示させるタイムラインの「高さ」「幅」「テーマ」「言語」をカスタマイズすることができます。ここでは高さを「500」、テーマを「Light」(明るい)、言語を「Japanese」(日本語)としておきましょう。
![](https://trigger-blog.com/wp-content/uploads/30016ebf45d6f5993f88799b745d7f73.png)
カスタマイズが終わったら、「Update」をクリックします。下側にプレビューが表示されるので、確認してみてくださいね。
![](https://trigger-blog.com/wp-content/uploads/d54de3fa25268e854e631349c35aea51.png)
カスタマイズされたデザインのコード作成できました。「Copy Code」をクリックしてコピーしましょう。
![](https://trigger-blog.com/wp-content/uploads/283297ba5612686b7c4421cb09239b42.png)
ステップ3 WordPressの「カスタムHTML」へコードを追加する
![](https://trigger-blog.com/wp-content/uploads/7966bae78213db11914ad7af893f8431.png)
ステップ1(カスタマイズした場合はステップ2)でコピーしたTwitterタイムラインのコードを、WordPressに追加していきましょう。ダッシュボード(管理画面)をひらいて、「外観」の「ウィジェット」をクリックします。
![](https://trigger-blog.com/wp-content/uploads/284ed1d84762b889c2090963792560d4.png)
利用できるウィジェットの中から「カスタムHTML」を選び、「サイドバー」の中にドラッグします。
![](https://trigger-blog.com/wp-content/uploads/0574646663936d96dfbfcbddfd41bcd7.png)
カスタムHTMLの「内容」にステップ1(ステップ2)でコピーした「Twitterタイムラインのコード」を貼りつけます。「タイトル」には「Twitter」と入れておきましょう。
![](https://trigger-blog.com/wp-content/uploads/a005fe6eaacb61d09e4df0ee95392f8e.png)
「保存」をクリックして完了します。
![](https://trigger-blog.com/wp-content/uploads/88ebb2c55f0bbbffac4fa59cd5531a81.png)
サイドバーを見て、Twitterのタイムラインが表示されているか確認しておきましょう。
![](https://trigger-blog.com/wp-content/uploads/826ae2e2973ebfcacee06356215191a7.png)
![](https://trigger-blog.com/wp-content/uploads/6-1.png)
お疲れさまでした!これで作業完了です!
Twitterが表示されない?間違いやすいポイント
Twitterタイムラインを表示させるための「コード」はプログラミング言語です。ウィジェットの「ビジュアルテキスト」にそのまま貼りつけても、Twitterのタイムラインは表示されませんので注意しましょう。
![](https://trigger-blog.com/wp-content/uploads/56e11283451fbc1e0e6c42efb7a8ff46-e1589527669638.png)
![](https://trigger-blog.com/wp-content/uploads/56e11283451fbc1e0e6c42efb7a8ff46-e1589527669638.png)
上の画像のように、そのままのコードが表示されてしまいます。ウィジェットの「カスタムHTML」を選んで貼りつけましょう。
「Twitterボタン」も作ることができます!
ここまでTwitterのタイムラインを表示させる方法を説明してきました。実は、同じ方法を使ってTwitterボタンを作ることもできます。
タイムラインのコードを手に入れる時は、ステップ1で「Here are your display options」の左側にある「Embedded Timeline」(タイムライン)を選びましたよね。
![](https://trigger-blog.com/wp-content/uploads/20744f5146db5618d11d86e7e8dbc806.png)
![](https://trigger-blog.com/wp-content/uploads/20744f5146db5618d11d86e7e8dbc806.png)
Twitterボタンを作る場合は、右側の「Twitter Buttons」(ツイッターボタン)をクリックします。
![](https://trigger-blog.com/wp-content/uploads/cfc1d183112631765453675d0287902a.png)
![](https://trigger-blog.com/wp-content/uploads/cfc1d183112631765453675d0287902a.png)
「Follow Button」をクリックします。
![](https://trigger-blog.com/wp-content/uploads/43af6642d4824ca06cd863ce285e1003.png)
![](https://trigger-blog.com/wp-content/uploads/43af6642d4824ca06cd863ce285e1003.png)
これで、Twitterボタンを表示させるコードができました。
![](https://trigger-blog.com/wp-content/uploads/43af6642d4824ca06cd863ce285e1003-1-e1589535124627.png)
![](https://trigger-blog.com/wp-content/uploads/43af6642d4824ca06cd863ce285e1003-1-e1589535124627.png)
記事の中に入れる場合は「HTMLの挿入」または「テキストエディター」に貼りつければ、下のようなTwitterボタンができます。
まとめ:サイドバーにTwitterのタイムラインを表示させてみよう
![twitter-timeline](https://trigger-blog.com/wp-content/uploads/claudio-schwarz-FMJAYeRwtDY-unsplash-1.jpg)
![twitter-timeline](https://trigger-blog.com/wp-content/uploads/claudio-schwarz-FMJAYeRwtDY-unsplash-1.jpg)
今回は、ブログにTwitterタイムラインを表示させる方法を解説しました。
「Twitterを使ってブログ記事のお知らせをする」「逆にブログからTwitterのフォロワーさんになってもらう」など、ブログとTwitterをつなげておくと、とても便利です。
ブログにTwitterタイムラインをのせておけば「Twitterもやっているんだ!」とブログ読者さんに知ってもらうことができます。ぜひ、あなたのブログにもTwitterのタイムラインを表示してみてくださいね。
コメント