3ステップ!ブログサイトのサイドバーへTwitterを表示させる方法【WordPress】

上の画像のような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のタイムラインを表示してみてくださいね。

WordPress
スポンサーリンク
シェアする
アナログ子をフォローする
TRIGGER BLOG

コメント

アナログ子

こんにちは、アナログ子です。「アナログな自分から変わりたい」ブログ、HTML、CSS、WordPressなど勉強中。自分が困ったこと、気になったことを記事に書いています。好物は「焼きいも」

アナログ子をフォローする
タイトルとURLをコピーしました