ブログにTwitterのタイムラインを埋め込む方法を画像付き解説

2019年7月21日

ブログ運営をされていて、SNSの投稿を埋め込みたいと思った方はぜひ本記事を参考にしてください。

前回の記事見たけどTwitterのタイムラインを埋め込みたい
Aさん
そもそもTwitterのタイムラインを埋め込むってどういう事?
女性
とし
そんな方に今回はタイムラインを埋め込むとは何か
とし
Twitterのタイムラインをブログに埋め込む方法を紹介するよ!

という事で

今回はTwitterのタイムラインを埋め込むとはどういう事かTwitterのタイムラインを埋め込む方法を紹介していきます!

Twitterのタイムラインとは

以前、こちらの記事で書いた内容はTwitterのツイートをそのまま埋め込むという内容でした。

つまり、こういう事です。

これに比べてTwitterのタイムラインを埋め込んだ場合はどうなるのかと言うと

このようにTwitterで表示されるタイムライン(自分の過去の投稿)を埋め込んでスクロールできます。2番目の方法で埋め込むば、自分の投稿がリアルタイムで表示されます。

この2つの違いが理解できたでしょうか?

2つのそれぞれの埋め込みは、メリット・デメリットがほぼ一緒ですがタイムラインを埋め込む場合は基本的に、ツイートを埋め込むより重いので1記事に1つまでにしておきましょう。

それ以上に使用してしまうと、サイトの読み込みに時間が掛かってSEO的に良くないです。

僕の場合は、ブログのフッター部分(1番下)に埋め込むだけにしています。

<2021年4月 追記>

現在はフッター部分は消しました。

Twitterのタイムラインを埋め込む方法

step.1 Twitterでツイートの右上の「>」みたいな所をクリック

step.2 「</>ツイートを埋め込む」をクリック

step.3 自分のTwitterのURLに変える

step.4 カスタマイズする

step.5 コードをコピーして貼り付け

(説明に使用している画像は、僕の以前のTwitterアカウントです。)

1. Twitterでツイートの右上の「>」みたいな所をクリック

自分のツイートの何でもいいので、右上の「>」みたいな所をクリック

2. 「</>ツイートを埋め込む」をクリック

上から2番目の「</>ツイートを埋め込む」をクリック

3. 自分のTwitterのURLに変える

「</>ツイートを埋め込む」をクリックするとこのような画面が上の方にあります。

そこで、表示されているURLを自分のTwitterのURLに書き換えてクリック

4. カスタマイズする

①左側の Embedded Timeline をクリック

②青い文字のset customization optionsをクリック

③サイズを変更する

例)この記事に埋め込んだタイムラインの大きさは縦700、横500です。

必ずサイズ設定をしてください。そうしないと全投稿を一覧として表示させる状態になるので、記事の長さが膨大になってしまいます。

④Updateをクリック

5. コードをコピーして貼り付け

Copy Codeをクリック

②ワードプレスをテキストモードにする

③先程コピーしたコードを貼り付ける

完成!

今の手順でTwitterのタイムラインを埋め込む事が出来ます!

埋め込んだ後は、どのように表示されているか確認することをオススメします!

読者のブラウザによっては、表示のされ方が違う場合があります。

タイムライン(過去の全投稿)・指定した投稿に限らず、念のために以下のようにTwitterの埋め込み+自分で文章を書くことで、全ての読者が読めるはずです。

新規客ばかり増やそうとしても、成約率を上げないとさらなる結果は出にくい。
母数が少なくても成約率が高いと売上はある程度でるし購入者が増えれば、評価やリピーターのデータ収集がしやすくなる。

より多くのデータが集まることで、サービス向上と売上UPになる

こんな感じにしておくとブラウザによって制限されていた場合でも、下側の文章を読めるので、問題ありません。

これは有名ブロガーのマナブさんもやっているので、間違いないと考えてOKです。

まとめ

今回は、ブログにTwitterのタイムラインを埋め込む方法を紹介しました!

Twitterを埋め込むには、下記2つの使い方があります。

  1. 指定した投稿を埋め込む
  2. タイムライン(過去の全投稿)を埋め込む

説明した通り、タイムラインの埋め込みは、膨大なデータを取り込む必要があります。そのため記事の読み込みスピードが遅くなる可能性があります。

なるべく1記事に1つ程度にしておきましょう。参考になれば幸いです。

  • B!