ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイッターとブログやウェブサイトの連携です。
今回はこの連携の最初の一歩となる、ツイッターの各パーツ（ツイートやシェアボタン）のブログやウェブサイトへの埋め込み方を解説します。
ツイッターは3つのパーツ、ツイート単体、ツイートボタン、タイムライン全体、をブログやウェブサイトに埋め込むことが出来ます。ツイート単体とは一つ一つの投稿のこと、ツイートボタンとはクリックしたりタップしたりするとツイートしたりフォローしたりできる小さなボタンのこと、タイムラインとは各アカウントが投稿したツイートが一覧できるパーツのことです。
各パーツを埋め込むには、ツイッター公式の機能を使う方法と、外部のツイッター埋め込みツールを使う方法があります。埋め込みたいツイート数が少ない場合は公式機能を、たくさんのツイートを埋め込みたい場合は、作業性やデザイン性に優れる外部のツールを使うことをお勧めします。
以下では、公式機能を使った各パーツを一つずつ埋め込む方法と、外部ツールを使ったたくさんのツイート埋め込み例を紹介します。
埋め込みたいツイートのコードを取得して、それをブログやウェブサイトに貼り付ける方法です。一つ一つコードを取得して貼り付ける方法なので、埋め込みたいツイートが少なく、また表示デザインも定型のものでよい、という場合に向いています。
以下のやり方で簡単に埋め込めます。
最初のステップは方法が2つありますので、どちらかお好みの方法を選んでください。
埋め込みたいツイートの右上にあるプルダウンマークをクリックして、「ツイートを埋め込む」をクリックします。（この作業をする場合は、パソコンでツイッターを開いてください。スマートフォンには対応していません。）
Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下の「Embeded Tweet」（エンベッドツイート：ツイートの埋め込み）オプションをクリックします。
画面が切り替わると、埋め込み用のコードが表示された画面になります。埋め込むツイートの大きさや色を変えるなどカスタマイズしたい場合は、青字の【set customize options（カスタマイズ設定のオプション）】をクリックします。カスタマイズ設定できるのは以下の項目です。
背景色の明るさを選択します。Light：明るい か Dark：暗い を選べます。
表示言語を選択します。Automatic：自動 か Japanese：日本語 など他の言語を選べます。
各種制限を設定します。
Hide conversation（会話を非表示）：チェックを入れると、埋め込みたいツイートがリツイートの場合に表示される関連するツイートが表示されません。
Opt-out of tailoring Twitter（テーラリングをオプトアウトする）：この設定はツイートの表示上には何も変化はありませんが、広告やおすすめユーザー表示などを抑えたい場合はチェックを入れます。
必要な設定を終えたら、【update】をクリックします。
アップデートされた内容はすべてコードに反映されています。コードの横にある【Copy Code】をクリックしてコードをコピーした後、確認画面のバツ印をクリックしてコードの取得を完了します。
コピーしたコードをワードプレスなどのボディ部分に貼り付けると、埋め込みは完了します。例えば下の画面の様に、ワードプレスは場合は、作成中のブログのテキストビューの好きな場所にコードを貼り付けます。
実際に埋め込むとこのような感じに表示されます。
EmbedSocial – SNS上のメディアをサイトに埋め込み可能にするSaaS型ウィジェット作成ツールhttps://t.co/gNnpnkUW9e#Apppla #Webサービス @embedsocial pic.twitter.com/cxQUYYoI9I
— Apppla【公式】話題のサービスを毎日お届け🚚💨 (@appp_la) April 10, 2018
ツイートボタン（シェアボタン）とは、クリックするとツイッターのプラットフォームへリンクできる各種ボタンことです。ボタンをクリックした読者をすぐにツイート画面や、フォロワー登録画面に誘導できる便利なパーツです。
Twitter Publishという埋め込み用のツイッター公式ページを開き、少し下にスクロールして画面下のTwitter Buttons（ツイッターボタン）のオプションをクリックします。
表示されたボタンの中から希望するボタンを選択します。クリックすると必要な設定画面に移動します。各ボタンの特徴は以下の通りです。
ボタンをクリックすると、シンプルにツイートでシェアができるボタンです。これを選択した場合は特に追加設定は必要ありません。
ボタンをクリックすると、指定したアカウントのフォロー画面が出てくるボタンです。このボタンを選択すると、フォローしてほしいアカウントの入力画面が出ますので、アカウント名を入力しましょう。ボタンにはアカウント名も表示されます。
ボタンをクリックすると、指定したアカウントへの@メンション（お知らせ）がツイート画面に自動で追加されるボタンです。ツイートのメンション先アカウントの入力画面が出ますので、希望のアカウント名を入力しましょう。ボタンにアカウント名も表示されます。
ボタンをクリックすると、指定したハッシュタグがツイート入力画面に自動で追加されるボタンです。ハッシュタグによるツイートの把握に適しています。希望するハッシュタグの入力画面が出ますので、希望のハッシュタグを入力します。ボタンにハッシュタグも表示されます。
ボタンをクリックすると、ダイレクトメッセージの画面に移動するボタンです。ダイレクトメッセージを受け取るアカウントの入力画面が出ますので、入力しましょう。
さらに、ボタン表示をカスタマイズしたい場合は、青字の「set customize options（カスタマイズ設定のオプション）」をクリックします。ボタンクリックした際に定型文を表示させるなどのカスタマイズが出来ます。設定が完了したら【Update】をクリックします。設定した内容がコードに反映されます。
各種設定を終えたら、コードの横にある【Copy Code】をクリックしてコードをコピーしてください。確認画面のバツ印をクリックして元の画面に戻り、コード取得を完了します。
その後は先ほどのツイート単体の埋め込みと同様に、ブログやウェブサイトのボディ部分の埋め込みたい場所にコードを貼り付けます。
例えばハッシュタグボタンを埋め込んだ場合、ボタンはこのように表示されます。
タイムライン全体をブログやウェブサイトに埋め込む方法です。自分や所属する会社のアカウントなど特定のアカウントのタイムラインだけを埋め込む場合にお勧めの方法です。
ツイッター単体の埋め込みやツイートボタンと同じようにTwitter Publishを開き、少し下にスクロールして画面下のEmbeded Timeline（タイムラインの埋め込み）のオプションをクリックします。
タイムラインの埋め込みオプションをクリックすると、URLの入力画面が出てきますので、埋め込みたいタイムラインのURLを入力します。
必要の応じてカスタマイズします。縦横のサイズや背景の明るさなどを設定することが出来ます。設定が完了したら【Update】をクリックします。
設定が完了するとプレビュー画面が表示され、タイムラインがどのように表示されるか見ることができます。確認したら、【Copy Code】をクリックしてコードをコピーして、Twitter上での作業を完了します。
その後は先ほどのツイート単体と同じように、コピーしたコードをワードプレス等のボディ部分に貼り付けて、ツイッターのタイムラインの埋め込みます。
埋め込むとこのように表示できます。
ツイッターの公式機能だけでは、いろいろなところからツイートを集めてブログやウェブサイトに埋め込むために一つ一つコードを取得しなければならず、手間がかかってしまいます。
自分のお店についての口コミツイートを集めてホームページに埋め込みたい、ハッシュタグキャンペーンで集めたツイートをウェブサイトに埋め込みたい、といった目的の場合は、ツイッターの「埋め込みツール」をお勧めします。
ツイッター埋め込みツールとは、ツイッターAPIを利用して、外部の企業が制作したツイッターの埋め込み用のプラグインやアプリのことです。以下のような特徴があります。
ブログやウェブサイトへの埋め込みにとって使い勝手の良いワードプレスのプラグインとして公開されている埋め込みツールには以下のようなツールがあります。
これらのツールは、ツイッターだけではなく、インスタグラムやフェイスブックなど他のSNSの投稿を埋め込むことができるため、ツイッター以外のSNSも埋め込みたいと考えている方には、さらにお勧めです。
埋め込みツールを使うとどのようなツイッター埋め込みができるのでしょうか。ここでは日本語版があるEmbedSocialを使った埋め込み例を見てみましょう。
先日話題になっていた #ブルーインパルスの写真撮るの下手くそ選手権 というハッシュタグで集めたツイートを埋め込んでみました。
ツイッター公式ページからの埋め込みだとデザインが限られるのですが、ツールを使うとデザイン性が格段に上がるので、埋め込みツイートの使い方の幅が広がるのではないでしょうか。
ツイッターとブログやウェブサイトの連携して活用できれば、様々なマーケティング効果が期待できます。
すでに多くの方が対策しているように、ツイートボタンを上手に使えば、読者による情報拡散やフォロワー数増加を促進することができるでしょう。
一方最近は、ツイッターで写真、Gif、動画などを投稿することも多くなっていて、ツイッターのビジュアル面でのポテンシャルが高まってます。
画像付きのツイッターを一度にウェブサイトに埋め込み、デザイン性の高いウィジェットに仕上げればツイッターを使った「ソーシャルメディア（SNS）ウォール」と呼ばれる、一覧性の高い掲示板のようなウィジェット（ウェブサイト上のコンテンツ）を作ることも出来ます。
さらに、皆さんのビジネスのお客様やブログの読者がアップした皆さんに関するツイートをハッシュタグで集めて、ツイッターを利用した口コミページなどを作成してもよいかもしれません。ユーザーや読者の生の声は作りこんだ広告よりも宣伝効果を発揮することがあります。
このような効果を発揮するための第一歩であるツイッター各パーツの埋め込み、ぜひお試しください。
もしツイッター埋め込みツールをお探しの場合は、コード知識不要、日本語版あり、サポート充実のEmbedSocialの無料トライアルを体験してみてください。ツイッター活用のヒントが見つかるかもしれません。
目次 新たにTikTok動画の埋め込みが可能に Youtubeから動画収集にハッシュタグが追加 新機…
インスタグラムのフィード投稿は、個別に埋め込みコードを取得して埋め込んだり、外部ツールを使用してハッ…
EmbedSocialのフィード機能を活用すると、InstagramやTwitterからハッシュタグ…
Googleマイビジネスの口コミをサイト上に埋め込んで活用したい場合、APIを活用して独自に開発を行…