• 投稿日 2020/06/22
  • 最終更新日 2024/01/16

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

Featured image social media aggregator

X(Twitter)を利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、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までお問い合わせください。
EmbedFeed Free trial JP banner

SNS埋め込みツールでX(Twitter)のポストをWEBサイトに埋め込む方法

SNS埋め込みツールEmbedFeedを使うと簡単にXのアカウントの投稿ををウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。

EmbedFeedアカウントの作成

まずスタートする前に、無料のEmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、無料トライアルを申し込んでから、以下のステップに進んでください。

ログインすると、X(Twitter)をソースとして追加するためのソースセクションに移動します。

収集元プラットフォームとしてX(Twitter)を選ぶ

ソース(収集元)選択画面で、X(Twitter)を選びます。
embedfeed-select-platform-x

X(Twitter)のソースの種類を選択

X(Twitter)のアカウント名を入力します。
embedfeed-select-source-type-x

X(Twitter)アカウントを接続する

画面の指示に従いみなさんのX(Twitter)アカウントとEmbedSocialの接続を行います。

X(Twitter)ウィジェットのレイアウトを選択する

X(Twitter)をウェブサイトに埋め込むためのデザインテンプレートを選びます。このテンプレートを使うボタンをクリックして選んでください。
embedfeed-select-tenplate-x

X(Twitter)の埋め込み用コードをコピーする

ウィジェット(Twitterの埋め込みパーツ)の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
copy embed code
注:コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。

コピーしたコードをウェブサイトに貼り付ける

ウェブページのコードを編集できるプラットフォームを使用している場合、Instagramウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。

WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます:
embed-code-instagram-feed-1
以上で設定は完了です。以下の様にウェブサイトにTwitterが表示されます。
Embed-X-on-web-example (1)

X(ツイッター)で埋め込めるパーツ

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

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

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

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

ポスト(ツイート)単体を埋め込む方法

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

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

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

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

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

click three dot for showing pull down menu

 

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

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を利用して、外部の企業が制作したツイッターの埋め込み用のプラグインやアプリのことです。以下のような特徴があります。

  •  ハッシュタグやメンションなどを使って広くツイートを集めて埋め込める
  •  表示用のデザインが豊富
  •  埋め込んだツイートをツールのプラットフォームで管理できる
  •  登録が必要、無料プランもあるが、有料の場合がほとんど

ワードプレスプラグインのツイッター埋め込みツール

ブログやウェブサイトへの埋め込みにとって使い勝手の良いワードプレスのプラグインとして公開されている埋め込みツールには以下のようなツールがあります。

  •  Flockler social wall(英語、ドイツ語など、日本語版なし)
  •  Juicer(英語版のみ)
  •  Walls.io(英語版のみ)
  •  EmbedSocial(日本ユーザー向けサポート、日本語版あり

これらのツールは、ツイッターだけではなく、インスタグラムやフェイスブックなど他のSNSの投稿を埋め込むことができるため、ツイッター以外のSNSも埋め込みたいと考えている方には、さらにお勧めです。

埋め込みツールを使ったツイッターの埋め込み画面

埋め込みツールを使うとどのようなツイッター埋め込みができるのでしょうか。ここではEmbedSocial(エンベッドソーシャル)を使った埋め込み例を見てみましょう。当社のアカウントに投稿したツイートを埋め込んでみました。

ツイッター公式ページからの埋め込みだとデザインが限られるのですが、ツールを使うとこのように動きを出すなどデザイン性が格段に上がるので、埋め込みツイートの使い方の幅が広がるのではないでしょうか。

まとめ ツイッターとブログやウェブサイトの連携効果

ツイッターとブログやウェブサイトの連携して活用できれば、様々なマーケティング効果が期待できます。すでに多くの方が対策しているように、ツイートボタンを上手に使えば、読者による情報拡散やフォロワー数増加を促進することができるでしょう。

一方最近は、ツイッターで写真、Gif、動画などを投稿することも多くなっていて、ツイッターのビジュアル面でのポテンシャルが高まってます。画像付きのツイッターを一度にウェブサイトに埋め込み、デザイン性の高いウィジェットに仕上げればツイッターを使った「ソーシャルメディア(SNS)ウォール」と呼ばれる、一覧性の高い掲示板のようなウィジェット(ウェブサイト上のコンテンツ)を作ることも出来ます。

さらに、皆さんのビジネスのお客様やブログの読者がアップした皆さんに関するツイートをハッシュタグで集めて、ツイッターを利用した口コミページなどを作成してもよいかもしれません。ユーザーや読者の生の声は作りこんだ広告よりも宣伝効果を発揮することがあります。

このような効果を発揮するための第一歩であるツイッター各パーツの埋め込み、ぜひお試しください。

もしツイッター埋め込みツールをお探しの場合は、コード知識不要、日本語版あり、サポート充実のEmbedSocialの無料トライアルを体験してみてください。ツイッター活用のヒントが見つかるかもしれません。

embedsocial

UGC活用ツール
- エンベッドソーシャル -

7種類以上のSNSから投稿を収集してウェブサイトで活用。初期費用なし・クレジットカード決済可能

無料トライアル

WEB制作 × SNS連携なら
まずはシステムを
無料でお試し!

ご導入完了までのご質問やご相談なども
お気軽にお問い合わせください。

お問い合わせ

導入に関するご不明点を
専門スタッフが解決します。

相談する
お見積り

ご導入内容に合わせた最適な
プランを選択できます。

料金表を見る
資料請求

製品概要をご紹介する資料をダウンロードいただけます。

請求に進む