【ワードプレス】Twitterのタイムランをサイドバー&ブログ記事内に表示させる方法

SEO

こんにちは。

今日は、サイドバーにTwitterを埋め込む方法と、ブログ記事内にTwitterの投稿を表示させる方法をご紹介します。

先日に、Twitterの埋め込み作業を行いましたよ(^^)

 

 

今回はサイドバーに、ツイッターのタイムランを埋め込みました。

ワードプレスであれば、埋め込む作業はものの3分くらいです。

これでブログサイトに来てくれた方も、ツイッターを発見しやすくなったかな?

 

このTwitterを埋め込むことで、ブログからTwitterをチェックすることが出来るようになりました!

 

Twitterをワードプレスのサイドバーに表示させるためのコード設定

 

インターネットを調べていると、Twitterを埋め込む方法は色々あるようです。

プラグインなんかも導入している方もいますが、今回はプラグイン不要で、私が実際に行った方法をご紹介しますね!

 

細かい設定から行っていきます。

まず、下記へアクセスします。

ここをクリックしてサイトへとびます。

 

 

すると、上記のようなサイトへ飛びます。

「What would you like to embed?(何を埋め込みたいですか?)」という意味です。

ここに、TwitterのURL「https://twitter.com/ユーザ名」を入力します。

 

 

ユーザー名はTwitterの、自分のユーザー名を入力してください。

入力したら、「→」をクリックします。

 

 

「Here are your display options(表示オプションは次のとおりです)」が表示されます。

左側の「Embedded Timeline(タイムラインの埋め込み)」を選択します。

 

 

すると、下の方に、大体のサイズの見本が表示されます。

このままだと、さすがに大きすぎて、スマホで見た時にうまく表示がされなかったりするので、カスタマイズをしていきます。

 

 

赤枠で囲っている「set customization options」をクリックして、カスタマイズをしていきましょう!

 

 

変更する所は1カ所です。

「Height(高さ)」と表示されている所に、「350」と入力します。

ここは、800までの数字を入力するのが○。

 

他も色々いじって設定することが可能ですが、サイドバーにタイムランを表示させるのであれば、この1カ所を設定するだけでOKです。

設定したら、「Update」をクリックします。

 

 

設定が終わったら「Copy Code」をクリックして、コードをコピーします。

これをワードプレスのサイドバーに、貼り付けることでTwitterを表示させることが出来ます。

 



【ワードプレス】Twitterのタイムランをサイドバーに表示させる方法

 

コードをゲットしたら、後はワードプレスのサイドバーに、貼り付ける作業だけです!

ワードプレス➪「外観」➪「ウィジェット」➪「テキスト」

サイドバーエリアに、テキストを挿入して、コードを貼り付けます。

 

 

そして、最後に「保存」をクリックすれば完了です。

 

 

サイドバーに埋め込めれば、上記のような感じになります。

以上が、Twitterをサイドバーに埋め込む方法です。

 

Twitterをワードプレスの記事内に表示させるためのコード設定

 

ブログ記事内に、自分が呟いたTwitterの記事を載せたい!

Twitterをやっていると、こんなことも思っちゃいますよね(^^)

やり方は、サイドバーに表示させる方法と、記事内に挿入させる方法はさほど違いはありません。

 

まずTwitterにログインします。

 

 

自分が記事内に、埋め込みたい呟きを選択します。

すると、右上に下向きの矢印があるのでクリックします。

 

 

  • プロフィールに固定する
  • ツイートを埋め込む
  • この会話をミュート
  • ツイートアクティビティを表示
  • 非表示の返信を表示

 

いくつか項目が出てきますのが、この中の「ツイートを埋め込む」を選択します。

 

 

サイドバーの時のように、「What would you like to embed?(何を埋め込みたいですか?)」が表示されます。

今回は、すでにURLが入力されているので、このまま「→」をクリックします。

 

 

「set customization options」をクリックして、設定を確認していきます。

 

 

ここでは、特に設定をしなくても問題ありません。

色なんかも変えられるので、細かく設定したい方は色々いじってみてください。

問題なければ、「Update」をクリックします。

 

 

「Copy Code」をクリックして、コードをコピーします。

あとは、これを記事内に貼り付けるだけです。

 



【ワードプレス】ブログ記事内にTwitterを表示させる方法

 

記事内に入れたいTwitterのコードをコピーしたら、後はワードプレスに貼り付けるだけです。

いつものように、投稿画面を表示させて、コードを入れていきます。

 

 

通常であれば、「ビジュアル」編集画面にて、記事を書いていくと思います。

ですが、コードを貼り付ける際は、その横にある「テキスト」を選択します。

テキストに、コードをそのまま貼り付けるだけです。

 

貼り付けた後は、「ビジュアル」を選択し、入力されていたらOKです。

 

ここで1つ注意点があります。

 

それは、投稿編集画面と「プレビュー」画面が、全く違うということを覚えておいてください。

テキストにて、コードを貼り付けた後は、ビジュアルだけでなくプレビュー画面でも、確認をする必要があります。

 

プレビュー画面にて、Twitterが表示されていたら完了です。

 

【まとめ】Twitterをブログサイト内にて表示させることで閲覧者が増える可能性が広がる

 

いかがでしたか?

思っていた以上に、サイドバーやら記事内にTwitterを表示させることは、とても簡単です。

 

そこまでTwitterで呟いたり、活発に活動していない方であれば、Twitterを埋め込む必要はありません。

しかし、毎日1回は呟いている!という方は、ブログ内にTwitterを埋め込むことをお勧めします。

 

『ブログサイト』➪『Twitter』

『Twitter』➪『ブログサイト』

 

なな
こんな感じで、どちらも見てくれる可能性が広がります。個人的には、Twitterで色々呟いているので、見てもらえたらいいなぁ~くらいですけどね(^0^;)

 

どちらにしても、Twitterでフォローしてもらえれば、ブログ記事の更新だったり、お知らせだったりと、情報をキャッチしてくれる可能性があります。

 

それほど手間もかからないので、Twitterを埋め込みたいという方は、ぜひ参考にしてみてください(^^)

最新情報をチェックしよう!