X(Twitter）を利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、Xのポスト（Twitterの投稿）とブログやウェブサイトの連携です。今回はこの連携の最初の一歩となる、X（Twitter）の各パーツ（ポストやシェアボタン）のブログやウェブサイトへの埋め込み方を解説します。
SNS埋め込みツールを使ってXのポストをウェブサイトに埋め込む方法は以下の通りです。
1. EmbedFeedのPROアカウントを作成する
2. X（旧Twitter）を収集元として選択する
3. Xアカウントを接続する
4. Xスライダーなど、レイアウトをテンプレートから選択する
5. ウィジェットを作成し、埋め込み用のコードをコピーする
6. ウェブサイト・ビルダーに移動し、コードをHTMLに貼り付ける
[重要]X(Twitter)からのアカウントポストの埋め込みは、EmbedFeedのPROプラン以上の有料プランをお申込みいただくと可能です。ハッシュタグポストの埋め込みは別途お見積りが必要になりますので、EmbedSocialJapanまでお問い合わせください。
SNS埋め込みツールEmbedFeedを使うと簡単にXのアカウントの投稿ををウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。
まずスタートする前に、無料のEmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、無料トライアルを申し込んでから、以下のステップに進んでください。
ログインすると、X（Twitter）をソースとして追加するためのソースセクションに移動します。
ソース（収集元）選択画面で、X（Twitter）を選びます。
X(Twitter）のアカウント名を入力します。
画面の指示に従いみなさんのX(Twitter)アカウントとEmbedSocialの接続を行います。
X(Twitter)をウェブサイトに埋め込むためのデザインテンプレートを選びます。このテンプレートを使うボタンをクリックして選んでください。
ウィジェット（Twitterの埋め込みパーツ）の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
注：コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。
ウェブページのコードを編集できるプラットフォームを使用している場合、Instagramウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
以上で設定は完了です。以下の様にウェブサイトにTwitterが表示されます。
X（ツイッター）は3つのパーツ、ツイート単体、ツイートボタン、タイムライン全体、をブログやウェブサイトに埋め込むことが出来ます。ツイート単体とは一つ一つの投稿のこと、ツイートボタンとはクリックしたりタップしたりするとツイートしたりフォローしたりできる小さなボタンのこと、タイムラインとは各アカウントが投稿したツイートが一覧できるパーツのことです。
各パーツを埋め込むには、ツイッター公式の機能を使う方法と、外部のツイッター埋め込みツールを使う方法があります。埋め込みたいツイート数が少ない場合は公式機能を、たくさんのツイートを埋め込みたい場合は、作業性やデザイン性に優れる外部のツールを使うことをお勧めします。
以下では、公式機能を使った各パーツを一つずつ埋め込む方法と、外部ツールを使ったたくさんのツイート埋め込み例を紹介します。
埋め込みたいツイートのコードを取得して、それをブログやウェブサイトに貼り付ける方法です。コードを１つずつ取得して貼り付ける方法なので、埋め込みたいツイートが少なく、また表示デザインも定型のものでよいという場合に向いています。以下の方法で簡単に埋め込むことができます。
最初のステップは方法が2つありますので、どちらかお好みの方法を選んでください。
埋め込みたいツイートの右上にあるプルダウンマークをクリックして、「ポストを埋め込む」をクリックします。※この作業をする場合は、パソコンでツイッターを開いてください。スマートフォンには対応していません。
Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下の「Embeded Tweet」（エンベッドツイート：ツイートの埋め込み）オプションをクリックします。
画面が切り替わると、埋め込み用のコードが表示された画面になります。埋め込むツイートの大きさや色を変えるなどカスタマイズしたい場合は、青字の「set customize options（カスタマイズ設定のオプション）」をクリックします。カスタマイズ設定できるのは以下の項目です。
背景色の明るさを選択します。「Light（明るい）」か「Dark（暗い）」を選べます。Darkの場合には背景が黒・テキストが白へと変更されるため、黒を貴重としたデザインのWEBサイトで活用する場合に有効です。
表示言語を選択します。「Automatic（自動）」や「Japanese（日本語）」またはその他の言語を選択することができるため、日本語のWEBサイトだけでなく複数言語に対応した見せ方を行うことができます。
Hide conversation（会話を非表示）
チェックを入れると、埋め込みたいツイートがリツイートの場合に表示される関連するツイートが表示されません。自社コンテンツのみをよりシンプルに表示させたい場合に最適です。
Opt-out of tailoring Twitter（テーラリングをオプトアウトする）
この設定はツイートの表示上には何も変化はありませんが、広告やおすすめユーザー表示などを抑えたい場合はチェックを入れます。
必要な設定を終えたら、「update」をクリックします。
アップデートされた内容はすべてコードに反映されています。コードの横にある「Copy Code」をクリックしてコードをコピーした後、確認画面のバツ印をクリックしてコードの取得を完了します。
コピーしたコードはHTMLで作成したWEBサイトだけでなく、WordPressなどの一般的なCMS・ECビルダー等で作成したサイトにも埋め込むことができます。サイト内の<body>タグ内に貼り付けることで埋め込みは完了します。WordPressを例にすると、下記のようにテキストエディタにコードを貼り付けることでツイートを投稿に表示させることができます。
実際に埋め込むとこのような感じに表示されます。
SNS投稿埋め込みツール『Embedsocial』はTikTokの承認を受けAPIへのアクセスが可能となり「指定アカウントからの自動収集機能」を実装、動画のサイト埋め込み作業がより効率的になりました👉https://t.co/yJl9GgDwtT#Webデザイン #Webデザイナー #snsマーケティング #webマーケティング #web制作 pic.twitter.com/oBSTDJ6i8X
— EmbedSocial(エンベッドソーシャル) | SNS埋め込み・口コミ連携プラットフォーム (@embedsocial_jp) 2022年2月23日
埋め込み用のHTMLに含まれているパラメーターの値を変更することで、表示させるツイートに対してさらにいくつかの変更を加えることができます。
Twitterの埋め込みコードは、下記のように<blockquote>タグからはじまるコードで構成されています。この<blockquote>の開始タグ内にパラメータを加えることでツイートにさらなる変更を反映させることができます。
data-cards="hidden" を追加すると、ツイートに添付された画像や動画、リンクのOGP画像などを全て非表示にしテキストのみを表示させることができます。ツイートの文章をより強調させて表示したい場合に有効です。
data-align="center" を追加すると、埋め込んだツイートを画面中央に表示させることができます。パラメータの中身を center を right に置き換えることで画面右端に配置することも可能です。ツイートの表示位置調整の方法としては、こちらのやり方が公式で推奨されています。
（参照元）Twitter Developer Platform Embedded Tweets
SNS投稿埋め込みツール『Embedsocial』はTikTokの承認を受けAPIへのアクセスが可能となり「指定アカウントからの自動収集機能」を実装、動画のサイト埋め込み作業がより効率的になりました👉https://t.co/yJl9GgDwtT#Webデザイン #Webデザイナー #snsマーケティング #webマーケティング #web制作 pic.twitter.com/oBSTDJ6i8X
— EmbedSocial(エンベッドソーシャル) | SNS埋め込み・口コミ連携プラットフォーム (@embedsocial_jp) 2022年2月23日
ツイートボタン（シェアボタン）とは、クリックするとツイッターのプラットフォームへリンクできるボタンことです。ボタンをクリックしたサイト訪問者をすぐにツイート画面や、フォロワー登録画面に誘導できる便利なパーツです。
Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下の「Twitter Buttons（ツイッターボタン）」のオプションをクリックします。
表示されたボタンの中から希望するボタンを選択します。クリックすると必要な設定画面に移動します。各ボタンの特徴は以下の通りです。
ボタンをクリックすると、シンプルにツイートでシェアができるボタンです。これを選択した場合は特に追加設定は必要ありません。
ボタンをクリックすると、指定したアカウントのフォロー画面が出てくるボタンです。このボタンを選択すると、フォローしてほしいアカウントの入力画面が出ますので、アカウント名を入力しましょう。ボタンにはアカウント名も表示されます。
ボタンをクリックすると、指定したアカウントへの@メンション（お知らせ）がツイート画面に自動で追加されるボタンです。ツイートのメンション先アカウントの入力画面が出ますので、希望のアカウント名を入力しましょう。ボタンにアカウント名も表示されます。
ボタンをクリックすると、指定したハッシュタグがツイート入力画面に自動で追加されるボタンです。ハッシュタグによるツイートの把握に適しています。希望するハッシュタグの入力画面が出ますので、希望のハッシュタグを入力します。ボタンにハッシュタグも表示されます。
ボタンをクリックすると、ダイレクトメッセージの画面に移動するボタンです。ダイレクトメッセージを受け取るアカウントの入力画面が出ますので、入力しましょう。
さらに、ボタン表示をカスタマイズしたい場合は、青字の「set customize options（カスタマイズ設定のオプション）」をクリックします。ボタンクリックした際に定型文を表示させるなどのカスタマイズが出来ます。
自動定型文を挿入することができます。
ボタンをクリックして作成するツイートに特定のURLを含めることができます。TwitterではURLを挿入した場合にOGP画像が表示されるため、自社商品などの視覚的な認知拡大に貢献することが見込めます。
作成されるツイートにTwitterのユーザー名を含めることができます。投稿者のフォロワーがワンクリックで自社のTwitterプロフィールへと遷移することができるようになり、フォロワー数拡大に寄与します。
ツイートに特定のハッシュタグを含めることができます。ハッシュタグを含めることで一覧でも検索しやすくなるほか、商品のキャッチコピーなどをより分かりやすくアピールすることができます。
他のTwitterアカウントのメンションを含めることが可能です。特定の商品専用のアカウントから自社のメインアカウントを紹介するなどの活用が見込めますが、メンションやハッシュタグ・URLなどツイートに含める要素が増えるほど、文字数制限により自由に記入できる内容が相対的に少なくなるため注意が必要です。
「Large Button」にチェックを入れるとボタンを拡大させて埋め込むことができ、サイト上でより強調させたい場合に有効です。
Twitterのボタンは、英語・日本語だけでなく数多くの言語で表示させることができるため、多言語のWEBサイトに合わせて表示言語を調整することができます。
設定が完了したら「Update」をクリックします。設定した内容がコードに反映されます。
各種設定を終えたら、コードの横にある「Copy Code」をクリックしてコードをコピーしてください。確認画面のバツ印をクリックして元の画面に戻り、コード取得を完了します。
コピーしたコードはHTMLで作成したWEBサイトだけでなく、WordPressなどの一般的なCMS・ECビルダー等で作成したサイトにも埋め込むことができます。サイト内の<body>タグ内に貼り付けることで埋め込みは完了します。WordPressを例にすると、下記のようにテキストエディタにコードを貼り付けることでツイートを投稿に表示させることができます。
以下はツイートボタンの例です。ボタンをクリックすると下記画像のようにカスタマイズから追加したURL・ハッシュタグなどを含めた状態でツイート画面を表示させることができます。
ツイッターボタンでも同様に、取得したコードにパラメータを追加することで設定画面にないカスタマイズを加えることができます。
Twitterの埋め込みコードは、下記のように<blockquote>タグからはじまるコードで構成されています。この<blockquote>の開始タグ内にパラメータを加えることでツイートにさらなる変更を反映させることができます。
data-show-count="true" の設定を行うことで、ツイッターボタンを表示させる際に該当するアカウントのフォロワー数を表示させることができます。フォロワー数を表示させることでTwitterで精力的に情報発信を行っていることをアピールできます。
data-show-screen-name="false" を加えることで、フォローボタン内に表示されるユーザー名を非表示にすることができます。ユーザー名が長く間延びしてしまう場合などに効果的かもしれません。
タイムライン全体をブログやウェブサイトに埋め込む方法です。自分や所属する会社のアカウントなど特定のアカウントのタイムラインだけを埋め込む場合にお勧めの方法です。
ツイッター単体の埋め込みやツイートボタンと同じようにTwitter Publishを開き、少し下にスクロールして画面下のEmbeded Timeline（タイムラインの埋め込み）のオプションをクリックします。
タイムラインの埋め込みオプションをクリックすると、URLの入力画面が出てきますので、埋め込みたいタイムラインのURLを入力します。
タイムラインのURLは、ブラウザでTwitterのプロフィールを開いたときに表示されているURLです。
画面が切り替わると、埋め込み用のコードが表示された画面になります。タイムラインの色を変えるなどカスタマイズしたい場合は、青字の「set customize options（カスタマイズ設定のオプション）」をクリックします。カスタマイズ設定できるのは以下の項目です。
Twitterのタイムラインを表示させるサイズをピクセル単位で指定することができます。幅は表示ブラウザの大きさに合わせてレスポンシブに変化するため、PC向けに大きめのサイズを指定した場合でもスマートフォンでは画面幅に合わせて表示させることが可能です。
背景色の明るさを選択します。「Light（明るい）」か「Dark（暗い）」を選べます。Darkの場合には背景が黒・テキストが白へと変更されるため、黒を貴重としたデザインのWEBサイトで活用する場合に有効です。
表示言語を選択します。「Automatic（自動）」や「Japanese（日本語）」またはその他の言語を選択することができるため、日本語のWEBサイトだけでなく複数言語に対応した見せ方を行うことができます。
設定が完了したら「Update」をクリックします。
設定が完了するとプレビュー画面が表示され、タイムラインがどのように表示されるか見ることができます。確認したら、「Copy Code」をクリックしてコードをコピーして、Twitter上での作業を完了します。
コピーしたコードはHTMLで作成したWEBサイトだけでなく、WordPressなどの一般的なCMS・ECビルダー等で作成したサイトにも埋め込むことができます。サイト内の<body>タグ内に貼り付けることで埋め込みは完了します。WordPressを例にすると、下記のようにテキストエディタにコードを貼り付けることでツイートを投稿に表示させることができます。
Twitterの埋め込みコードは、下記のように<blockquote>タグからはじまるコードで構成されています。この<blockquote>の開始タグ内にパラメータを加えることでツイートにさらなる変更を反映させることができます。
data-tweet-limit="3" を追加することで、埋め込んだタイムラインに表示させるツイートの数を調整することができます。ツイートを数多く表示させる場合には、表示枠の高さを指定することでサイト上で埋め込んだタイムラインが縦に間延びすることを防ぐことができます。
data-chrome="noheader" を追加することで、埋め込んだタイムライン上部に表示される「Tweets from @（アカウント名）」やフォローボタンを非表示にすることができます。よりシンプルにTwitterタイムラインをWEBサイトに表示できます。
data-chrome="nofooter" を追加することで、埋め込んだタイムライン最下部に表示される「View more on Twitter」のボタンを非表示にすることができます。Twitterへとユーザーを遷移させずに自社サイト上へと留めたい場合に有効です。
data-chrome="transparent" を追加することで、 デフォルトでは埋め込んだタイムラインの背景は白になります。このパラメーターを追加すると背景が透過されるため、タイムラインの背景をサイトデザインへと置き換えることができます。
サイト背景を水色に設定
data-chrome="noborders" を追加することで、タイムラインの枠線や、ツイート間の枠線を全て非表示にすることができます。サイト背景が白の場合にはよりサイトコンテンツに溶け込んで見えますが、全ての枠線が表示されなくなってしまうため、埋め込み時の可読性に問題がないか注意が必要です。
data-chrome="noscrollbar" を追加することで、埋め込んだタイムライン内に表示されるスクロールバーを非表示にすることができます。ツイートが途中で見切れてしまうことを防ぐためには、表示させる投稿数・表示枠の高さを適切に調整することが必要となります。
ツイッターの公式機能だけでは、いろいろなところからツイートを集めてブログやウェブサイトに埋め込むために一つ一つコードを取得しなければならず、手間がかかってしまいます。
自分のお店についての口コミツイートを集めてホームページに埋め込みたい、ハッシュタグキャンペーンで集めたツイートをウェブサイトに埋め込みたい、といった目的の場合は、ツイッターの「埋め込みツール」をお勧めします。
ツイッター埋め込みツールとは、ツイッターAPIを利用して、外部の企業が制作したツイッターの埋め込み用のプラグインやアプリのことです。以下のような特徴があります。
ブログやウェブサイトへの埋め込みにとって使い勝手の良いワードプレスのプラグインとして公開されている埋め込みツールには以下のようなツールがあります。
これらのツールは、ツイッターだけではなく、インスタグラムやフェイスブックなど他のSNSの投稿を埋め込むことができるため、ツイッター以外のSNSも埋め込みたいと考えている方には、さらにお勧めです。
埋め込みツールを使うとどのようなツイッター埋め込みができるのでしょうか。ここではEmbedSocial（エンベッドソーシャル）を使った埋め込み例を見てみましょう。当社のアカウントに投稿したツイートを埋め込んでみました。
ツイッター公式ページからの埋め込みだとデザインが限られるのですが、ツールを使うとこのように動きを出すなどデザイン性が格段に上がるので、埋め込みツイートの使い方の幅が広がるのではないでしょうか。
ツイッターとブログやウェブサイトの連携して活用できれば、様々なマーケティング効果が期待できます。すでに多くの方が対策しているように、ツイートボタンを上手に使えば、読者による情報拡散やフォロワー数増加を促進することができるでしょう。
一方最近は、ツイッターで写真、Gif、動画などを投稿することも多くなっていて、ツイッターのビジュアル面でのポテンシャルが高まってます。画像付きのツイッターを一度にウェブサイトに埋め込み、デザイン性の高いウィジェットに仕上げればツイッターを使った「ソーシャルメディア（SNS）ウォール」と呼ばれる、一覧性の高い掲示板のようなウィジェット（ウェブサイト上のコンテンツ）を作ることも出来ます。
さらに、皆さんのビジネスのお客様やブログの読者がアップした皆さんに関するツイートをハッシュタグで集めて、ツイッターを利用した口コミページなどを作成してもよいかもしれません。ユーザーや読者の生の声は作りこんだ広告よりも宣伝効果を発揮することがあります。
このような効果を発揮するための第一歩であるツイッター各パーツの埋め込み、ぜひお試しください。
もしツイッター埋め込みツールをお探しの場合は、コード知識不要、日本語版あり、サポート充実のEmbedSocialの無料トライアルを体験してみてください。ツイッター活用のヒントが見つかるかもしれません。
【2023年6月更新】インスタグラム新機能・アップデート情報まとめ
WordPressウェブサイトにインスタグラムを埋め込む方法まとめ
インスタグラムをウェブサイトやブログに埋め込む方法と埋め込みインスタ活用術
EmbedSocialで表示させるUGCにSquareの商品を紐付けることができるようになりました！
カスタマーレビューをあなたのウェブサイトで今すぐ集める方法
SNSクリエイターとは? SNSやUGCクリエイターの仕事をすべて解説
