WordPress

WordPressのサイドバーにTwitterのタイムラインを埋め込みする方法を図解で解説!!

ビジネスでお金を生み出す日下部です。(^^)
ブログで、あなたの稼ぎになる情報を発信しています。

 

WordPressのサイドバーにTwitterのタイムラインを埋め込むことで、あなたのツイートがリアルタイムで表示されるようになります。

ブログは、よく「人気」をつくるようにした方が、読者が安心すると言われます。

 

この人気と言われるものの中には、定期的な更新があげられます。

手軽で簡単に更新できるTwitterを埋め込み表示することで、ブログ記事を書くよりも楽に人気の演出が可能になります。

※Twitterの更新をすることが前提

 

この記事では、ワードプレスのサイドバーにTwitterのタイムラインを簡単に埋め込む方法を、図解で解説していきます。

ツイッターを埋め込み表示

 

Twitterの埋め込みは思っているよりも簡単だ・・・ムキッ!

 

Twitterの埋め込みタイムラインの設定は、とてもカンタンに設置をすることが可能です。

埋め込む他にも、タイムラインの長さを変更したり、フォローボタンも付ける方法についてもご紹介します。

 

設置の流れとしては、以下の3つだけ・・・

  1. Twitterサイトで自分のアカウントにログイン
  2. Twitterの埋め込みコードの作成(※作成は自動)
  3. WordPressのウィジェットにコードを貼り付ける

以下の手順通りにやれば5分~10分程度で設定が可能です。

 

この記事では、Twitterのアカウントを取得している前提で解説を進めていきます。

まだTwitterアカウントを取得されていない方は、先にアカウントの取得をしておきましょう。

 

■ Twitter

https://twitter.com/

Twitterタイムラインの埋め込みコードの取得

ここでは、サイドバーにタイムラインを表示させるためのコードを取得します。

アカウントの取得後にTwitterにログインしてください。

 

ログイン後、ホーム画面右上のプロフィール画像をクリックします。

 

クリックするとメニュー項目、その中にある「設定とプライバシー」をクリック。

 

ユーザー情報画面に移動したら、左下の赤枠部分にあるウィジェットを選択して下さい。

 

ウィジェットに移動後、新規作成をクリックします。

新規作成をクリックすると以下の項目が表示されます。

  • プロフィール
  • いいね
  • リスト
  • コレクション
  • 検索

この中からプロフィールを選択して下さい。

プロフィールを選択すると、以下の画面に切り替わります。

英語で表示されますが、ポイントがわかれば進められますので、安心してください。

まずは真ん中の検索窓に、ご自身で設定したTwitterのユーザーIDを入力して、検索窓の右側にある「→」をクリック。

 

Twitter IDを入力する@の部分は付けるようにして下さいね。

それと、スペルの入力間違いがあると、正しく検索されないので注意しましょう。

 

矢印をクリックして、上記画面にスライドしたら正解です。

左側のEmbedded Timelineを選択して下さい。

 

画面下部に、自分のタイムラインが表示されると思います。

※何もツイートしていなければ表示されません。

 

That’s all we need,unless・・・という英語表記の下に枠があります。

その中にある、「<a class=”Twitter・・・・」が、Twitterの埋め込みコードになりますので、右脇にある「Copy Code」をクリックしてコードをコピーしましょう。

 

埋め込みコードの取得はこれで終わりです。

次は、ワードプレスのサイドバーにコードを貼り付ける作業に移ります。

ツイッターをサイドバーに表示させる

Twitterの埋め込みコードを取得したら、次はWordPress側の設定になります。

 

WordPressにログインをして下さい。

ダッシュボード左側の外観→ウィジェットを選択します。

ウィジェットが表示されたら、右側にサブコンテンツが表示されています。

この部分が、現在ブログに表示されているサイドバーの項目です。

※サブコンテンツは設定している項目が人により違います。

 

利用できるウィジェットの中から、「テキスト」というウィジェットを探してください。

見つけることができたら、テキストウィジェットをサブコンテンツの場所にドラッグ&ドロップ(マウスで引っ張る)して追加をします。

サブコンテンツにテキストが追加をされたら、先ほどTwitterで作成した埋め込みコードを、赤丸の部分に貼り付けをして保存します。

これだけで、Twitterのタイムライン設置は完了となります。

念のため、きちんと設置ができているかを確認してみましょう。

以上のように、タイムラインが設置されていれば完了です。

タイムラインの長さの調整をする方法

Twitterの埋め込みコードをコピーしてWordPressにそのまま貼り付けをしてしまうと、タイムラインが長くなることがあります。

このままだと、あまり見た目が良くないですよね?

そこでタイムラインの長さを調整する方法をご紹介します。

 

先程の、Twitter設定画面より”set customization options.”をクリック

 

すると、タイムラインの表示サイズの設定ができるようになります。

長さの他にも幅や背景色なども、ここで調整することが可能です。

サイトのイメージに合わせて調整しましょう。

 

・高さ→ タイムラインの長さの調整。ちなみに、このブログのサイズは600です。

・幅→ 横幅の設定です。このブログは、空白で設定してあります。

・背景色→ Twitter埋め込みタイムラインの背景色。ホワイトかブラックの2種類選択できます。

・ユーザーIDの表示色→ユーザーID部分のカラーの選択です。

 

選択色の中から、好みのカラーが見つからないとは、カラーコードでの設定も可能です。

 

・言語→ 表示言語設定。こちらは、Automaticで特に問題ありません。

・Opt-out of tailoring Twitter→

Twitterのホーム画面を確認すると、オススメのユーザーというのが自動で検出されます。

Twitter側がフォローを推奨してくれる機能ですが、そこに表示させたくない場合はチェックを入れてください。

 

以上、すべての設定が完了したらUpdateをクリックして完了です。

クリックすると、新しくTwitter埋め込みコードが作成されますので、コードをコピーしてウィジェットに貼り付けましょう。

まとめ

ワードプレスのサイドバーに、Twitterのタイムラインを埋め込みする方法について解説しました。

大まかな流れとしては、

  1. Twitterのアカウント取得
  2. タイムラインの埋め込みコードを取得
  3. ワードプレスのウィジェットに貼り付け
  4. サイズの調整

・・・シンプルにするとこんな感じです。

 

登録手順は意外と簡単でしたよね?

ブログは、人の画像が使われていたり、動く画像を使ってみたりして、人がいる雰囲気を演出するとユーザーが安心すると言われています。

 

その点、Twitterはブログ記事を更新するよりも手軽にできるため、人がいる雰囲気を作り出すツールとしては最適です。

記事をしっかりと書いて更新するのは時間が必要になりますが、Twitterを埋め込みしていれば、「このブログは動いているな」っとユーザーに安心感を与えることができます。

 

10分程度の作業で設置することができるので、ぜひ試してみてください!

ABOUT ME
Qusakabe
趣味:筋トレ、ゴルフ、麻雀、ネット、息子(2)・娘(0)と遊ぶこと。 12時間以上拘束されるのに残業代も一切でない超どブラック会社を2社経験。 「会社ってこんなものなのか・・?」っと疑問を抱き、「これだけ頑張れるなら自分で起業してもそこそこやっていけるだろう」と感じたことから起業を決意。 現在は、法人7期目の代表取締役を継続中。 ウェブで稼ぐための情報を発信しています。