※ 当サイトではアフィリエイト広告を利用しています

ブログにXのタイムラインを表示する方法

ブログにXのタイムラインを表示する方法 ブログ運営

こんにちは、ゆんつです。

ネットを見ていると、自身のXでのポストのタイムラインをサイドバーなどに表示しているブログを見かけることがあります。

そのように、ブログにXのタイムラインを表示したい場合。

表示したい場所にXのタイムラインのコードをコピペすることで表示することが可能となります。

Xのタイムラインの埋め込みはとっても簡単!

今日は

ブログにXのタイムラインを表示する方法

について書きたいと思います。

Xのタイムラインの埋め込み方法

まずタイムラインを表示したいツイッターのURLをコピーしておきます。

タイムラインを表示したいツイッターのURLをコピー

以下のサイトを開きます

タイムラインを表示したいツイッターのアドレスをペーストして、「→」をクリックするかEnterキーを押下

タイムラインを表示したいツイッターのアドレスをペーストしてEnterキーを押下

「Here are your display options」という画面になるので「Embedded Timeline」を選択。

「Embedded Timeline」を選択

すると、その下に「set customization options」という青文字が現れるのでクリック。

「set customization options」という青文字をクリック

埋め込んだXの表示サイズや、背景色、言語などの設定フォームが現れます。

埋め込んだXの表示サイズや、背景色、言語などを設定するフォーム

各項目の意味合いは以下の通り。

Height 埋め込んだタイムラインの表示高
Width 埋め込んだタイムラインの表示幅
How would you like this to look? タイムラインの背景色
LightかDarkが選べる
What language would you like to display this in? どの言語で表示するか
AutomaticでOK
Opt-out of tailoring Twitter Twitterに閲覧情報を送信するかどうか。
チェックを入れると送信しない、チェックを入れないと送信する

HeightとWidthを設定しない場合は成行(埋め込み先の大きさに合わされる)となるので、表示する大きさを限定したい場合は設定したほうがいいかもしれません。

各項目の設定が終わったら「Update」ボタンをクリック。

タイムラインを表示するためのタグが表示されるので「Copy Code」をクリック

コードがコピーされました。

コードがコピーされた

あとは、コピーしたコードをタイムラインを表示させたい場所(サイドバーウィジェットなど)に貼り付ければいいだけです

試しに、ここに僕のツイッターのタイムラインを貼り付けてみると、以下のような感じになります。

ゆんつ
ゆんつ

Heightを450px、背景色をDarkにして、カスタムHTMLで埋め込んでいます

まとめ

というわけで、Xのタイムラインをブログに埋め込む方法について説明しました。

手順をまとめると

  1. https://publish.twitter.com/にアクセスして、タイムラインを表示したいXのURLを貼付け
  2. 「Embedded Timeline」を選択
  3. 「set customization options」でタイムラインの表示をカスタマイズ
  4. 「Copy Code」をクリックしてコードをコピーし、タイムラインを表示したい場所に貼り付け

という感じになります。

もしコードをコピーしてもタイムラインが表示されない場合は、Ghoestryなどのアドオンでツイッターをブロックしていないかどうかを確認すると解決するかもしれません。

何かの参考になれば幸いです。

それでは、またー。

コメント