ブログ記事などで、Twitterのツイートやタイムラインが組み込まれているのを見たことはないでしょうか?

これはTwitter公式の機能で、ブロガーやサイト運営者であれば簡単に使用可能。特定のツイートをピックアップしたり、お気に入りのアカウントを紹介したりするときにとても便利です。記事内に使うのはもちろん、サイドバーやフッターに設置するのもおすすめ。

本記事ではTwitterを埋め込む基本のやり方をご紹介。なお埋め込みはスマホからは行なえません。パソコンのブラウザを使って解説していきます。

このページはアフィリエイト広告を利用していますが、記載されている情報は一切その影響は受けておりません。

▲埋め込みの一例。サイト上でTwitterが見られる。

あわせて読みたい
Twitter(ツイッター)使い方&便利ツールまとめ 基本から応用まで

ツイートを埋め込む方法

ツイート単体を埋め込むやり方です。

1.埋め込みたいツイート右上「v」をクリック

2.「ツイートをサイトに埋め込む」をクリック

3.表示されたコードをコピー

このツイートに画像や動画が含まれている場合は、埋め込み時に表示するかどうか選択可能です。表示したい場合は「メディアを含める」にチェックを入れてください。

また別のツイートへの返信だった場合は、元のツイートを表示するかの選択もできます。元ツイートも同時に埋め込む場合は「元のツイートを含める」にチェックを入れましょう。

4.ブログやウェブサイトにコードをペースト(貼り付け)する

これで埋め込み完了です。

サイト上では以下のように表示されます。

メディア(画像・動画・リンク)付き

メディアなし

元のツイートを含む返信

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

ツイートを集めたもの、いわゆる「タイムライン」も埋め込めます。作成できるタイムラインは以下の5種類。

・プロフィール
特定のアカウントのツイート一覧を表示。

・いいね
特定のアカウントがいいねしたツイート一覧を表示。

・リスト
自分が作成、もしくは保存した公開リストを表示。

・モーメント
公開されているモーメントのツイートを表示。

・コレクション
ツイートをまとめて管理する「コレクション」機能で集めたツイートを表示。
※Twitter公式アプリやブラウザ版Twitterなどでは作成できません。機能はモーメントと同じようなもの。

やり方は以下の通りです。

1.「https://publish.twitter.com/」にアクセス

埋め込みコード発行するための専用サイト「https://publish.twitter.com」に移動します。

2.埋め込みたいタイムライン、リスト、モーメントなどのURLを入力

埋め込みたいタイムラインのURLをコピーし、1で開いたサイトのフォームに入力します。

3.「Embedded Timeline」をクリック (プロフィールを埋め込む時のみ)

プロフィールを埋め込むときは、この選択肢が出てきます。左の「Embedded Timeline」を選んでください。

なお「Twitter Buttons」を選ぶと、フォローボタンの埋め込みコードが発行されます。

4.高さ・幅、テーマ、色、言語を選んでカスタマイズして、「Update」をクリック

見た目を細かく設定可能です。

設定可能項目

■What size would you like your timeline to be?(高さ・幅)
pxで指定してください。高さが空欄のままだと、とても縦長のウィジェットができて埋め込みづらいので注意。

■How would you like this to look?(カラーリング)
テーマとリンクの色を決められます。テーマはLight(白)とDark(黒)の2種類。リンク色は用意されているものの他、カラーコードでしても可。

■What language would you like to display this in?(言語)
ウィジェットに表示される言語を決めます。

5.コードをコピーして、ブログやサイトにペースト

コードが発行されるので、それを好きなところに入力すれば完了です。

実際に埋め込んだイメージがこちら。

プロフィール

▲テーマ Dark、リンク 黄色、縦600px。

いいね

▲テーマ Light、リンク 赤、縦600px。

リスト

▲テーマ Light、リンク 緑、縦400px、横300px。

X

X Corp.

iPhone無料
Android無料
App Storeを見る
Google Playを見る

Xに関する記事

X/Twitter 自分のアカウントURLをシェアする方法【iPhone/Android/PC】
「X(旧Twitter)」誕生日の設定ガイド 非公開・変更・削除方法解説
「X/Twitter」が乗っ取られたときの対処法・乗っ取り対策になるアプリ連携解除方法
【2024更新】X/TwitterでQRコードが表示されない理由と代わりの作成方法
「X/Twitter」検索コマンド19選 日付や動画の検索方法・検索できないときの対処法
X/TwitterにGIFを投稿できないなら圧縮とリサイズ!『EZGIF』の使い方解説
X(旧Twitter)アイコンをおしゃれに作る方法&おすすめアプリ5選
おしゃれなTwitterヘッダー画像の作り方とおすすめアプリ5選
「X/Twitter」機種変更でアカウントを引き継ぐ方法【iPhone/Android】
「X/Twitter」の翻訳機能の使い方・翻訳できない時の対処法【2023更新】
「X/Twitter」ツイートの削除・一括削除方法 仕様変更で各ツールが利用不可に
「X/Twitter」トレンドの見方・検索方法 リアルタイムランキングが見られるサイトも