上の画像のようなTwitterのタイムラインが表示されているサイトを見たことはありませんか？難しそうにみえるかもしれませんが、特別な知識がなくても簡単に表示させることができます。
この記事では、WordPressで作られているブログサイトにTwitterのタイムラインを埋め込み表示させる方法について3ステップで説明します。
3ステップ、Twitterのタイムラインを表示させる方法
Twitterのタイムラインを表示させるためには、コード（プログラミング言語で書かれたもの）が必要になります。
プログラミングのことが分からなくても大丈夫。手順に沿って進めていけば、コピペするだけOKですよ。
さっそく、やってみよう！
ステップ1 Twitterのタイムラインを表示させるコードを手に入れる
自分のTwitterアカウントの「プロフィールページ」を表示します。
プロフィールページのURLをコピーします。
Publish.twitter.comへ移動してコピーしたプロフィールページのURLを入力します。このページで必要なコードを作成することができます。
「Here are your display options」の「Embedded Timeline」（タイムライン）をクリックします。
これで、あなたのTwitterタイムラインのコードが作り出されました。
ステップ2 表示させるタイムラインのデザインをカスタマイズ
自分のブログサイトに合わせてデザインを変更したい場合は、表示させるタイムラインをカスタマイズすることもできますよ。
「set customization options」（カスタマイズのオプション）をクリックします。
表示させるタイムラインの「高さ」と「幅」、「テーマ」、「言語」をカスタマイズすることができます。ここでは高さを「500」(px)、テーマを「Light」（明るい）、言語を「Japanese」（日本語）としておきましょう。
カスタマイズが終わったら、「Update」をクリックします。下側にプレビューが表示されるので、お好みのデザインに変更したい場合はカスタマイズしてみてくださいね。
カスタマイズされたコードに変更ができました。「Copy Code」をクリックしてコピーしましょう。
ステップ3 WordPressのサイドバーにコードをコピペする
ステップ2でコピーしたTwitterタイムラインのコードをWordPressに追加していきましょう。ダッシュボード（管理画面）をひらいて、「外観」の「ウィジェット」をクリックします。
利用できるウィジェットの中から「カスタムHTML」を選び、「サイドバー」の中にドラッグします。
カスタムHTMLの「内容」にステップ2でコピーした「Twitterタイムラインのコード」を貼りつけます。「タイトル」には「Twitter」と入れておきましょう。
「保存」をクリックして完了します。
お疲れさまでした、これで作業完了です。サイドバーに表示されているか確認してみましょう。
Twitterが表示されない？間違いやすいポイント
Twitterのタイムラインを表示させるためのコードはプログラミング言語です。ウィジェットの「ビジュアルテキスト」に貼りつけてもTwitterのタイムラインは表示されませんので、注意しましょう。
上の画像のように、そのままのコードが表示されてしまいます。ウィジェットの「カスタムHTML」を選んで貼りつけましょう。
タイムラインと同じ方法でTwitterボタンを作れる
ここまでTwitterのタイムラインを表示させる方法を説明してきました。実は、同じ方法を使ってTwitterボタンを作ることもできます。
タイムラインのコードを手に入れる時は、ステップ1で「Here are your display options」の左側にある「Embedded Timeline」（タイムライン）を選びましたよね。
Twitterボタンを作る場合は、右側の「Twitter Buttons」（ツイッターボタン）をクリックします。
Follow Buttonをクリックします。
これで、Twitterボタンを表示させるコードができました。
記事の中に入れる場合は「HTMLの挿入」または「テキストエディター」に貼りつければ、下のようなTwitterボタンができます。
Twitterボタンもサイズや言語をカスタマイズできるよ。タイムラインと同じで、ビジュアルエディターにコピペするとコードがそのまま表示されてしまうので気を付けよう。
サイドバーにTwitterのタイムラインを表示させてみよう
Twitterとブログサイトをつなげれば、Twitterを使ってブログ記事のお知らせをしたり、ブログの読者を増やすチャンスができたりと、とても便利です。ぜひあなたのサイトにもTwitterのタイムラインを表示してみてくださいね。
コメント