最終更新日 2022/10/07 投稿日 2020/06/22
Featured image social media aggregator

Twitterの各パーツをブログやウェブサイトに埋め込む方法 

ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイッターとブログやウェブサイトの連携です。今回はこの連携の最初の一歩となる、ツイッターの各パーツ(ツイートやシェアボタン)のブログやウェブサイトへの埋め込み方を解説します。

目次

  1. ツイッターで埋め込めるパーツ
  2. ツイート単体を埋め込む方法
  3. ツイートボタンを埋め込む方法
  4. タイムラインを埋め込む方法
  5. ツールを使ってたくさんのツイートを埋め込む方法
  6. まとめ ツイッターとブログやウェブサイトの連携効果

ツイッターで埋め込めるパーツ

ツイッターは3つのパーツ、ツイート単体、ツイートボタン、タイムライン全体、をブログやウェブサイトに埋め込むことが出来ます。ツイート単体とは一つ一つの投稿のこと、ツイートボタンとはクリックしたりタップしたりするとツイートしたりフォローしたりできる小さなボタンのこと、タイムラインとは各アカウントが投稿したツイートが一覧できるパーツのことです。

埋め込みたいツイッターパーツの量によって方法を選択する

各パーツを埋め込むには、ツイッター公式の機能を使う方法と、外部のツイッター埋め込みツールを使う方法があります。埋め込みたいツイート数が少ない場合は公式機能を、たくさんのツイートを埋め込みたい場合は、作業性やデザイン性に優れる外部のツールを使うことをお勧めします。

以下では、公式機能を使った各パーツを一つずつ埋め込む方法と、外部ツールを使ったたくさんのツイート埋め込み例を紹介します。

ツイート単体を埋め込む方法

埋め込みたいツイートのコードを取得して、それをブログやウェブサイトに貼り付ける方法です。コードを1つずつ取得して貼り付ける方法なので、埋め込みたいツイートが少なく、また表示デザインも定型のものでよいという場合に向いています。以下の方法で簡単に埋め込むことができます。

埋め込み用コードを取得する

最初のステップは方法が2つありますので、どちらかお好みの方法を選んでください。

ツイートから埋め込み作業を始める場合

埋め込みたいツイートの右上にあるプルダウンマークをクリックして、「ツイートを埋め込む」をクリックします。※この作業をする場合は、パソコンでツイッターを開いてください。スマートフォンには対応していません。

ツイッター公式の埋め込み専用ページ埋め込み作業を始める場合

Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下の「Embeded Tweet」(エンベッドツイート:ツイートの埋め込み)オプションをクリックします。

必要に応じてカスタマイズ設定

画面が切り替わると、埋め込み用のコードが表示された画面になります。埋め込むツイートの大きさや色を変えるなどカスタマイズしたい場合は、青字の「set customize options(カスタマイズ設定のオプション)」をクリックします。カスタマイズ設定できるのは以下の項目です。

How would you like this to look?

背景色の明るさを選択します。「Light(明るい)」か「Dark(暗い)」を選べます。Darkの場合には背景が黒・テキストが白へと変更されるため、黒を貴重としたデザインのWEBサイトで活用する場合に有効です。

What language would you like to display this in?

表示言語を選択します。「Automatic(自動)」や「Japanese(日本語)」またはその他の言語を選択することができるため、日本語のWEBサイトだけでなく複数言語に対応した見せ方を行うことができます。

Would you like to limit context in this Tweet?

Hide conversation(会話を非表示)
チェックを入れると、埋め込みたいツイートがリツイートの場合に表示される関連するツイートが表示されません。自社コンテンツのみをよりシンプルに表示させたい場合に最適です。

Opt-out of tailoring Twitter(テーラリングをオプトアウトする)
この設定はツイートの表示上には何も変化はありませんが、広告やおすすめユーザー表示などを抑えたい場合はチェックを入れます。

必要な設定を終えたら、「update」をクリックします。

コードをコピーする

アップデートされた内容はすべてコードに反映されています。コードの横にある「Copy Code」をクリックしてコードをコピーした後、確認画面のバツ印をクリックしてコードの取得を完了します。

コピーしたコードをWordPressなどに貼り付けてツイートを埋め込む

コピーしたコードはHTMLで作成したWEBサイトだけでなく、WordPressなどの一般的なCMS・ECビルダー等で作成したサイトにも埋め込むことができます。サイト内の<body>タグ内に貼り付けることで埋め込みは完了します。WordPressを例にすると、下記のようにテキストエディタにコードを貼り付けることでツイートを投稿に表示させることができます。

実際に埋め込むとこのような感じに表示されます。

もっとカスタマイズしたい場合には、パラメータを追加しよう!

埋め込み用のHTMLに含まれているパラメーターの値を変更することで、表示させるツイートに対してさらにいくつかの変更を加えることができます。

パラメータの追加方法

Twitterの埋め込みコードは、下記のように<blockquote>タグからはじまるコードで構成されています。この<blockquote>の開始タグ内にパラメータを加えることでツイートにさらなる変更を反映させることができます。

画像・動画を非表示にする

data-cards="hidden" を追加すると、ツイートに添付された画像や動画、リンクのOGP画像などを全て非表示にしテキストのみを表示させることができます。ツイートの文章をより強調させて表示したい場合に有効です。

ツイートの表示位置を変更する

data-align="center" を追加すると、埋め込んだツイートを画面中央に表示させることができます。パラメータの中身を centerright に置き換えることで画面右端に配置することも可能です。ツイートの表示位置調整の方法としては、こちらのやり方が公式で推奨されています。

(参照元)Twitter Developer Platform Embedded Tweets

ツイッターボタンを埋め込む方法

ツイートボタン(シェアボタン)とは、クリックするとツイッターのプラットフォームへリンクできるボタンことです。ボタンをクリックしたサイト訪問者をすぐにツイート画面や、フォロワー登録画面に誘導できる便利なパーツです。

ツイッターの専用ページで埋め込みオプションを選択

Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下の「Twitter Buttons(ツイッターボタン)」のオプションをクリックします。

ツイッターボタンの種類を選択

表示されたボタンの中から希望するボタンを選択します。クリックすると必要な設定画面に移動します。各ボタンの特徴は以下の通りです。

Share Button(シェアボタン)

ボタンをクリックすると、シンプルにツイートでシェアができるボタンです。これを選択した場合は特に追加設定は必要ありません。

Follow Button (フォローボタン)

ボタンをクリックすると、指定したアカウントのフォロー画面が出てくるボタンです。このボタンを選択すると、フォローしてほしいアカウントの入力画面が出ますので、アカウント名を入力しましょう。ボタンにはアカウント名も表示されます。

Share Button(シェアボタン)

ボタンをクリックすると、指定したアカウントへの@メンション(お知らせ)がツイート画面に自動で追加されるボタンです。ツイートのメンション先アカウントの入力画面が出ますので、希望のアカウント名を入力しましょう。ボタンにアカウント名も表示されます。

Hashtag Button(ハッシュタグボタン)

ボタンをクリックすると、指定したハッシュタグがツイート入力画面に自動で追加されるボタンです。ハッシュタグによるツイートの把握に適しています。希望するハッシュタグの入力画面が出ますので、希望のハッシュタグを入力します。ボタンにハッシュタグも表示されます。

Message Button(メッセージボタン)

ボタンをクリックすると、ダイレクトメッセージの画面に移動するボタンです。ダイレクトメッセージを受け取るアカウントの入力画面が出ますので、入力しましょう。

必要に応じてツイート画面のカスタマイズ設定

さらに、ボタン表示をカスタマイズしたい場合は、青字の「set customize options(カスタマイズ設定のオプション)」をクリックします。ボタンクリックした際に定型文を表示させるなどのカスタマイズが出来ます。

Do you want to prefill the Tweet text?

自動定型文を挿入することができます。

Do you want to set a specific URL in the Tweet?

ボタンをクリックして作成するツイートに特定のURLを含めることができます。TwitterではURLを挿入した場合にOGP画像が表示されるため、自社商品などの視覚的な認知拡大に貢献することが見込めます。

Would you like this Tweet to include your screen name?

作成されるツイートにTwitterのユーザー名を含めることができます。投稿者のフォロワーがワンクリックで自社のTwitterプロフィールへと遷移することができるようになり、フォロワー数拡大に寄与します。

Would you like to set a hashtag for the Tweet?

ツイートに特定のハッシュタグを含めることができます。ハッシュタグを含めることで一覧でも検索しやすくなるほか、商品のキャッチコピーなどをより分かりやすくアピールすることができます。

Do you want to recommend accounts?

他のTwitterアカウントのメンションを含めることが可能です。特定の商品専用のアカウントから自社のメインアカウントを紹介するなどの活用が見込めますが、メンションやハッシュタグ・URLなどツイートに含める要素が増えるほど、文字数制限により自由に記入できる内容が相対的に少なくなるため注意が必要です。

How would you like the button displayed?

Large Button」にチェックを入れるとボタンを拡大させて埋め込むことができ、サイト上でより強調させたい場合に有効です。

What language would you like to display this in?

Twitterのボタンは、英語・日本語だけでなく数多くの言語で表示させることができるため、多言語のWEBサイトに合わせて表示言語を調整することができます。

設定が完了したら「Update」をクリックします。設定した内容がコードに反映されます。

コードをコピーする

各種設定を終えたら、コードの横にある「Copy Code」をクリックしてコードをコピーしてください。確認画面のバツ印をクリックして元の画面に戻り、コード取得を完了します。

コピーしたコードをWordPressなどに貼り付けて埋め込む

コピーしたコードは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を入力します。

タイムラインのURLは、ブラウザでTwitterのプロフィールを開いたときに表示されているURLです。

必要に応じてカスタマイズ設定

画面が切り替わると、埋め込み用のコードが表示された画面になります。タイムラインの色を変えるなどカスタマイズしたい場合は、青字の「set customize options(カスタマイズ設定のオプション)」をクリックします。カスタマイズ設定できるのは以下の項目です。

What size would you like your timeline to be?

Twitterのタイムラインを表示させるサイズをピクセル単位で指定することができます。幅は表示ブラウザの大きさに合わせてレスポンシブに変化するため、PC向けに大きめのサイズを指定した場合でもスマートフォンでは画面幅に合わせて表示させることが可能です。

How would you like this to look?

背景色の明るさを選択します。「Light(明るい)」か「Dark(暗い)」を選べます。Darkの場合には背景が黒・テキストが白へと変更されるため、黒を貴重としたデザインのWEBサイトで活用する場合に有効です。

What language would you like to display this in?

表示言語を選択します。「Automatic(自動)」や「Japanese(日本語)」またはその他の言語を選択することができるため、日本語のWEBサイトだけでなく複数言語に対応した見せ方を行うことができます。

設定が完了したら「Update」をクリックします。

コードをコピーする

設定が完了するとプレビュー画面が表示され、タイムラインがどのように表示されるか見ることができます。確認したら、「Copy Code」をクリックしてコードをコピーして、Twitter上での作業を完了します。

コピーしたコードをWordPressなどに貼り付けて埋め込む

コピーしたコードはHTMLで作成したWEBサイトだけでなく、WordPressなどの一般的なCMS・ECビルダー等で作成したサイトにも埋め込むことができます。サイト内の<body>タグ内に貼り付けることで埋め込みは完了します。WordPressを例にすると、下記のようにテキストエディタにコードを貼り付けることでツイートを投稿に表示させることができます。

もっとカスタマイズしたい場合には、パラメータを追加しよう!

パラメータの追加方法

Twitterの埋め込みコードは、下記のように<blockquote>タグからはじまるコードで構成されています。この<blockquote>の開始タグ内にパラメータを加えることでツイートにさらなる変更を反映させることができます。

表示させるツイートの数を調整する

data-tweet-limit="3" を追加することで、埋め込んだタイムラインに表示させるツイートの数を調整することができます。ツイートを数多く表示させる場合には、表示枠の高さを指定することでサイト上で埋め込んだタイムラインが縦に間延びすることを防ぐことができます。

ヘッダーを非表示にする

data-chrome="noheader" を追加することで、埋め込んだタイムライン上部に表示される「Tweets from @(アカウント名)」やフォローボタンを非表示にすることができます。よりシンプルにTwitterタイムラインをWEBサイトに表示できます。

フッター(Twitterへの誘導)を非表示にする

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

SNS投稿埋め込みツール
- エンベッドソーシャル -

簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。

お問い合わせ

関連記事

9月 06, 2022

Embedsocial Japan株式会…

平素はEmbedSocialをご利用いただき誠にありがとうございます。 これまで合同会社basicm...

8月 22, 2022

InstagramやTikTokなどのU…

全世界15万ユーザー 全国400社以上の導入実績のハッシュタグキャンペーンツール Embedsoci...

8月 16, 2022

PinterestのボードをWEBサイト…

「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で...

7月 15, 2022

Instagramの『リールズ』がEmb…

『Instagram リールズ』がEmbedSocialのフィード機能で収集できるようになりました!...