ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイッターとブログやウェブサイトの連携です。今回はこの連携の最初の一歩となる、ツイッターの各パーツ（ツイートやシェアボタン）のブログやウェブサイトへの埋め込み方を解説します。
ツイッターは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の無料トライアルを体験してみてください。ツイッター活用のヒントが見つかるかもしれません。
平素はEmbedSocialをご利用いただき誠にありがとうございます。 これまで合同会社basicm...
全世界15万ユーザー 全国400社以上の導入実績のハッシュタグキャンペーンツール Embedsoci...
「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で...
『Instagram リールズ』がEmbedSocialのフィード機能で収集できるようになりました！...