ブログやWordPressで作成したサイトなどへプラグインや特別な機能を使用せず簡単にTwitterのツイートやタイムライン他を表示する方法

 Wordpressでなくてもできる方法ですが、何でもプラグインでやろうと思っている方にこんな方法がいいよ~という提案も兼ねて紹介します。

WordPressは無料のプラグインがたくさんあって、何をするにでもまずプラグイン探し(プラグイン病?)となってしまいますが、できることはプラグイン使わずに行ったほうがサーバーの負担や表示の遅延を避けることができて、訪問してくれた方にやさしいサイトができます。

さて、Twitter記事などをプラグインなしで表示する方法ですが、もともとTwitterには表示ウィジェットを作る機能があり、それをブログやWordpressのサイドバー・本文などに貼るだけでTwitterのタイムラインなどを簡単に表示することができます。

このウィジェットは自身のTwitterアカウントだけでなく、他の人のタイムラインなどもウィジェットとして作成し、Wordpressに限らずブログや通常のホームページへ挿入することができます。

ではツイッターのログインした状態から、前準備として、目的のアカウントのホーム画面(左の「ニックネーム」の部分をクリック)を出し、アドレスバーに表示されているURLをコピーしておきます。
その上で

  1. アイキャッチ画像(画面右上)にマウスポインタを合わせると、「プロフィールと設定」というのが出てくるのでクリックして、「設定」をクリックします。
  2. 「ユーザー情報・・・」となっているメニューの中に「ウィジェット」という項目があるのでクリックします
  3. 出てきた右画面の「新規作成」をクリックすると設定画面が出てくるので、プレビューを見ながら設定して完了とどのウィジェットを作るかの選択画面が出るので「リスト」をクリック
  4. ※Twitterの仕様変更により、以前と手順が変更になりました

  5. 別画面に移動するので、「What would you like to embed?」と書かれたところの白い窓へ自身のTwitterURLを入力してキーボードの「Enter」キーを押すか、→マークをクリックします
  6. 画面が少し下に移動しますので「埋め込みタイムライン」をクリックします
  7. 再び画面が少し下に移動し、コードが書かれた窓が出ますので、中身のコードをコピーします
  8. ブログやWordpressの投稿・固定ページなどの本文へそのまま貼りつけます
  9. サイドバーなどウィジェット領域であれば、Wordpressの場合、管理画面から「外観」→「ウィジェット」を選択して、「テキスト」を足し、そこにコードを貼り付ければ完成!!

これで簡単に本文やサイドバーウィジェットへTwitterのタイムラインが挿入できます。

作成できるTwitterウィジェットはタイムラインの他、プロフィールや検索結果を作ることができます。作成するウィジェットに制限はありませんので、参考になる方のタイムラインやプロフィールを表示したり、気になるキーワードの検索結果を表示したりといろいろと使い道があります。

スポンサーリンク

番外編 個別のツイートを挿入する方法

これまではリストやプロフィールなどをウィジェットを作成して挿入する方法を紹介しましたが、個別のツイートを埋め込む方法を紹介しておきます。これはウィジェットよりも断然簡単で

  1. 目的のツイートの「・・・」をクリックして「ツイートをサイトに埋めこむ」をクリックする
  2. 表示されたコードを本文へ挿入する

だけです。
<blockquote class=”twitter-tweet” data-lang=”ja”>

というタグの中に
align=””(””の中はcenter,left,right)でそれぞれ中央・左・右に寄せて表示させることができます
width=””(””の中は数字+px(ピクセル)または%(割合))で、幅の調整ができます
何も指定しないと幅は550ピクセルで段落として左寄せで挿入されますが、2つの値を入れることで、幅を調整してから左(右)に寄せ、余白に文章が表示されるといったレイアウトができます。
※幅に関しては、最大値が550ピクセルですのでそれ以上の値を設定しても何も変化しません(Twitterの仕様のようです)
※blockquoteタグが使用されますので検索エンジンからは「引用」として扱われます。通常引用はコンテンツ内の文字などとは認識されませんので個別ツイートだけを本文へ挿入した記事を作成した場合ページの評価としては空ページとなることがありますから注意が必要です。

コードを挿入しても表示されないときは

 
Javaスクリプトで動作するようになっているのですが、環境によっては外部のスクリプトが読み込めないことがあります。そのような場合には

Twitterの埋め込みについて手順と仕様が変わったため、サイトの環境によってはjavaがうまく動いていないのかもしれません。Twitterの公式デベロッパーツールの中に手動でJavaを動作させるためのコードが掲載されていました。

を参考に埋め込みを行ってください。

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

メニューを表示できません

ページ先頭へ