圧倒的な使い心地!進化し続けるWordPressテーマ「SWELL」公式サイトをチェック!

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

この記事では、ブログに「Twitterのタイムライン」を表示させる方法を解説します。

言葉で伝えるSNS「Twitter」と「ブログ」の相性はとてもよいです。ブログに「Twitterのタイムライン」を埋め込むことによって、ブログの読者さんへアピールできます。一見難しそうにみえますが、じつは簡単に表示できるんですよ。

「Twitterとブログどちらもやっています!」という方は、ぜひ続きを読んでみてくださいね。

目次

「Twitterのタイムライン」をブログに表示させる方法:3ステップ

それでは、「Twitterのタイムライン」をブログに表示させる方法を解説します。3ステップでできます!

STEP
Twitterタイムラインの「コード」を手に入れる
STEP
タイムラインのデザイン変更
STEP
WordPressの「カスタムHTML」へコードを追加する

「Twitterのタイムライン」を表示させるためには、コードプログラミング言語で書かれたもの)が必要になります。プログラミングのことが分からなくても大丈夫。手順に沿って進めていけば、コピペするだけOKすよ。

ステップ1 Twitterタイムラインのコードを手に入れる

まずは、ご自身のTwitterアカウントへ移動して、「プロフィールページ」を表示します。

すると、プロフィールページのURLが出てきました。URLをコピーしましょう。

Publish.twitter.comへ移動します。このページでタイムラインを表示するために、必要なコードを作成することができます。検索窓に、先ほどコピーしたプロフィールページのURLを入力してください。

「Here are your display options」の下に、「Embedded Timeline」(タイムライン)と「Twitter Buttons」(ツイッターボタン)のふたつが出てきました。

ここでは、タイムラインを作成したいので「Embedded Timeline」をクリックします。ライムラインを表示させるためのコードが作り出されます。

これで、あなたのTwitterタイムラインのコードが作り出されました。「Copy Code」をクリックして、コピーしておきましょう。

ステップ2 タイムラインのデザイン変更

さきほどのTwitterタイムラインのコードは、デフォルト表示のデザインです。デザイン変更したい場合は、表示させるタイムラインをカスタマイズすることもできますよ。

デフォルト表示のままでいいよ!という方はステップ3まで進んでください。

「set customization options」(カスタマイズのオプション)をクリックします。

表示させるタイムラインの「高さ」幅」テーマ」言語」をカスタマイズすることができます。ここでは高さを「500」、テーマを「Light」(明るい)、言語を「Japanese」(日本語)としておきましょう。

カスタマイズが終わったら、「Update」をクリックします。下側にプレビューが表示されるので、確認してみてくださいね。

カスタマイズされたデザインのコード作成できました。「Copy Code」をクリックしてコピーしましょう。

ステップ3 WordPressの「カスタムHTML」へコードを追加する

ステップ1(カスタマイズした場合はステップ2)でコピーしたTwitterタイムラインのコードを、WordPressに追加していきましょう。ダッシュボード(管理画面)をひらいて、「外観」の「ウィジェット」をクリックします。

利用できるウィジェットの中から「カスタムHTML」を選び、「サイドバー」の中にドラッグします。

カスタムHTMLの「内容」にステップ1(ステップ2)でコピーした「Twitterタイムラインのコード」を貼りつけます。「タイトル」には「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-timeline
Photo by Claudio Schwarz on Unsplash

今回は、ブログにTwitterタイムラインを表示させる方法を解説しました。

「Twitterを使ってブログ記事のお知らせをする」「逆にブログからTwitterのフォロワーさんになってもらう」など、ブログとTwitterをつなげておくと、とても便利です。

ブログにTwitterタイムラインをのせておけば「Twitterもやっているんだ!」とブログ読者さんに知ってもらうことができます。ぜひ、あなたのブログにもTwitterのタイムラインを表示してみてくださいね。

アナログ子
「アナログな自分から変わりたい」アナログ子です。機械オンチで、よく物を壊します。ブログ、WordPress、ライティングなどの勉強中。

気になったこと、良かったことなどを記事にまとめています。好きな食べものは「焼いも」

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる