Twitterのタイムライン、ツイートの埋め込みとカスタマイズ方法を解説

Webマーケティングの施策において、メディア間の回遊性を高める意義は大きなものです。オウンドメディアやSNS、動画配信サイトなど、プラットフォームに合った情報発信を行いながら、それぞれの導線を整理することで、ユーザーの関心を引きやすくなります。

とくにリアルタイムの情報発信に適したTwitterは、活用の幅が広いため、自社のブログやWebサイトと連携させておきたいところです。

導線設計の際に役立つのが、Twitterの「埋め込み機能」です。ブログ記事内やサイドバーなどにツイートやタイムラインをカード状に表示させることで、一目で情報が伝えられるため、自然とユーザーの目を引くことができます。そこから自社アカウントのフォローにつながれば、情報を継続的にキャッチしてもらえるため、潜在顧客への訴求効果も見込めるでしょう。

この記事では、ホームページやブログへの「ツイートの埋め込み方」と、「タイムラインの埋め込み方」をそれぞれ解説していきます。

Twitterの「ツイート」を埋め込む方法

まずはTwitter上に投稿された「ツイート」をブログなどに埋め込む方法を説明します。そのツイートが「非公開」のものでなければ、自身のアカウントはもちろん、他のアカウントであっても埋め込み可能です。

ツイートを埋め込む際には、「ツイートのURLを直接貼り付ける方法」と、「ツイートの埋め込みコードを取得する方法」があります。WordPressやnoteなどのビジュアルエディタ上であれば、ツイートのURLを直接貼り付ける操作だけで、自動的にカード状に表示されます。

ツイートのURLを取得するには、ツイート表示画面の右下にある矢印のマークをクリックし、「ツイートのリンクをコピー」を選択します。

コピーしたURLをビジュアルエディタ上に貼り付ければ、そのままツイートがカード形式で表示されます。

このように、ビジュアルエディタ上の操作であれば、特段手間をかけることなく埋め込みが可能です。

一方、テキストエディタ上で操作する場合には、まず「埋め込みコード」を取得し、それをHTML編集画面に反映する必要があります。以下では、埋め込みコードの取得方法とカスタマイズ方法について説明していきます。

埋め込みコードの取得

コードを取得するには、埋め込みたいツイートを選択し、右上にある「…」をクリックします。

開いたメニューから「ツイートを埋め込む」を選択すると、ブラウザ上でTwitter Publishの画面が開かれます。

表示形式などを変更せず、そのまま埋め込む場合には、画像の赤枠部分にある「Copy Code」をクリックしてください。

その後、コピーしたコードを、ブログやWebサイトのHTML編集画面に反映します。

プレビューで埋め込みコードが機能しているか確認し、公開しましょう。

なお、Twitter Publishのデフォルト設定では、上のようにツイート内の画像や動画などのメディアもそのまま反映されます。

カスタマイズ設定も可能

Twitter Publishの設定画面からは、埋め込む際の表示形式をカスタマイズすることも可能です。

たとえば埋め込みたいツイートが別のツイートに対する返信である場合には、その元のツイートの表示・非表示を選択できます。デフォルトでは表示される設定なので、隠す際には「set customization options」のリンクをクリックしましょう。

設定画面が開かれるので、「Would you like to limit context in this Tweet?」という項目の「Hide Conversation」にチェックを入れてください。

これにより、連続するツイート群から1つの投稿だけを切り取って埋め込むことができます。

さらに同様の設定画面からは、ライトモードとダークモードの切り替えや、表示言語の切り替えも可能です。

設定を終えたら「Update」をクリックすれば、カスタマイズ内容が反映された新たなコードが取得できるようになりますので、これをコピーし、編集画面にペーストしましょう。

埋め込み時のカスタマイズ

Twitter Publishに用意されていない内容についてのカスタマイズも、取得したコードを自身で編集することで可能になります。

たとえばツイート内にある画像などのメディアを非表示にする場合には、「data-cards=”hidden”」を書き加えるだけで設定できます。

上の画像のように、取得したコードの「<blockquote class=”twitter-tweet”」の後に半角スペースを打ってからペーストしてください。

反映後は以下のように、ツイート内のメディアが「非表示」状態で埋め込まれます。

その他、表示位置や、上述の「ダークモード」の設定、埋め込みサイズの設定などもコード上で変更可能です。例として、以下のコードを紹介します。

表示幅のピクセル値を指定	data-width=”●●”
背景をダークモードに	data-theme=”dark”
返信元のツイートを非表示に	data-conversation=”none”
ツイートをセンター表示に	data-align=”center”

たとえば先のコードに「data-align=”center”」を追加すると、以下のような表示になります。

ブログの形態やレイアウトの好みに合わせ、カスタマイズを加えていきましょう。

Twitterの「タイムライン」を埋め込む方法

次は「タイムライン」を埋め込む方法を紹介します。

タイムラインを埋め込む際には、1つのアカウントによる一連のツイート群だけでなく、「リスト」化されたコレクションも表示可能です。

ツイートを埋め込む場合と同様、WordPressのビジュアルエディタ上であれば、「プロフィールのURL」をそのまま貼り付けるだけでタイムラインを埋め込むことができ、新着順にツイートが表示されるようになります。

同じように、「リストのURL」を貼り付ければ、リスト内の新着ツイートが表示されます。

HTML形式で編集する際には、Twitter Publish上で埋め込みコードを取得することが必要です。以下、コードの取得方法とカスタマイズ方法について説明します。

タイムラインの埋め込みコードを取得

Twitter Publishを開き、入力欄にプロフィールのURLまたはリストのURLを貼り付けてください。

表示形式の選択画面で「Embedded Timeline」を選択します。

埋め込みコードが表示されますので、そのまま埋め込む場合には「Copy Code」を、表示形式をカスタマイズする場合には「set customization options」をクリックしてください。

カスタマイズの画面からは、ライトモードとダークモードの選択、言語の選択のほか、表示する高さと幅のピクセル値も設定可能です。

設定が済んだら「Update」をクリックし、「Copy Code」で埋め込みコードを取得します。取得したコードをHTML編集画面に貼り付ければ、タイムラインの埋め込みは完了です。

レイアウトなどのカスタマイズ

ツイートの場合と同様、取得したコードを自身で編集することで、表示形式をカスタマイズすることが可能です。以下、便利なコードの使い方を紹介します。

まず、タイムライン上に反映される表示ツイート数を変更してみましょう。「data-tweet-limit=”●●”」内に任意の数字を入れてコードを書き加えます。

上のように、取得したコードの「< class=”twitter-timeline”」の後に半角スペースを打ち、コードを挿入してください。

反映すると、上のように表示されるツイート数が指定した数に制限されます。

さらに、タイムラインのヘッダー（上画像の「@Twitterさんのツイート」という部分）を非表示にしてみましょう。「data-chrome=”noheader”」というコードを書き加えると、以下のようにヘッダーが取り除かれます。

その他、タイムラインの表示形式をカスタマイズするコードとして、以下のものが挙げられます。

表示幅の変更	data-width=”●●”
表示する高さの変更	data-height=”●●”
背景を透過させる	data-chrome=”transparent”
境界線を非表示に	data-chrome=”noborders”
フッターを非表示に	data-chrome=”nofooter”

ちょっとした手間で見た目の印象が大きく変わることも少なくありませんので、これらのコードを試し、レイアウトを調整してみてもよいでしょう。

WordPressブログのサイドバーにタイムラインを埋め込む

その他、WordPressで編集しているブログのサイドバーにタイムラインを埋め込む際には、編集画面の「外観」から「ウィジェット」の機能を使うと便利です。

テーマにTwitter埋め込み機能がある場合は、「ウィジェット」内のサイドバーの編集画面から、タイムラインを挿入したい箇所のブロックにURLをそのまま貼り付けます。

更新すると、サイドバーにタイムラインが表示されます。

HTMLで編集する場合には、Twitter Publishで取得した埋め込みコードを利用しましょう。先に挙げたコードを書き加え、表示形式をカスタマイズすることも可能です。

他のアカウントのツイートを埋め込む際の注意点

Twitterに投稿されたツイートは、非公開設定でない限り、他のメディアに転載できるようになっています。自身のツイートだけではなく、他のアカウントのツイートも形式上は転載可能ですが、権利などの面で留意すべきポイントはないのでしょうか。

Twitterの規約では、ユーザーはツイートをした時点でその内容が「世界中で閲覧可能とすることを承認する」ものとされています。つまりTwitterに投稿すること自体が、「二次利用の可能性も認めること」を意味しますので、他人のツイートを埋め込む行為も基本的に認められていると考えられるでしょう。

ただし、元のツイートが著作権を侵害している場合などは、それを転載したメディアも法に問われる可能性があります。その他、「他のアカウントのツイートを自身のメディアに埋め込み、それに否定的なコメントを加える」といった使い方も一部に見られますが、ユーザー間のトラブルにつながりかねないため避けた方がよいでしょう。

規約上は問題がないとはいえ、転載を不快に思うユーザーもいますので、他のアカウントのツイートを埋め込む際には十分な注意が必要です。権利面などのトラブルが予想される場合には前もって転載許可を求めるなど、万が一を想定した動きを取っておくとよいでしょう。

まとめ

Twitterの埋め込み機能を活用することで、メディア間の回遊性を高めたり、固定ページで最新情報を発信したりと、ユーザーの関心を引く機会が増やせると考えられます。

現在、WordPressやその他のブログフォーマットにおいては、Twitterの埋め込み機能が充実していることも多く、URLを貼り付けるだけで埋め込めるケースも珍しくありません。その簡便さを活かし、たとえば自身が過去に発信した情報をピン止めのように整理するなど、積極的に活用していきたいところです。

表示形式をカスタマイズしたい場合には、Twitter Publish上で埋め込みコードを取得し、HTML上で編集していく必要があります。表示サイズなどは見た目の印象にも大きく関わりますので、好みのレイアウトに合わせて調整していくとよいでしょう。

なお、他のアカウントのツイートを埋め込むことは規約上認められていますが、トラブルに発展するケースも考えられます。ツイートを転載する際には十分に配慮し、各々の権利が損なわれないよう注意しましょう。