[ 2019年版 ] WordPressとTwitterの埋め込み連携

2019年2月の時点で、Twitterをサイトに埋め込むには、Twitter PublishというTwitter社公式のウェブサービスを使う方法がメインです。今回はTwitterPublishに貼り付けるURLの取得方法から、様々な埋込み方法のベストプラクティスを一緒に見てみましょう。

    目次

  1. Twitter Publishの基本的な使い方
  2. 11種類の埋め込みタイプ
  3. タイプ1: 単体Tweetを埋め込む方法
  4. どんな目的で埋め込むか
  5. 埋め込み用コードの取得方法
  6. Wordpressでの埋め込み箇所
  7. タイプ2: タイムラインを埋め込む方法
  8. どんな目的で埋め込むか
  9. 埋め込み用コードの取得方法
  10. Wordpressでの埋め込み箇所
  11. タイプ3: “いいね”したTweetのタイムラインを埋め込む方法
  12. どんな目的で埋め込むか
  13. 埋め込み用コードの取得方法
  14. Wordpressでの埋め込み箇所
  15. タイプ4: モーメントの埋め込み方
  16. どんな目的で埋め込むか
  17. 埋め込み用コードの取得方法
  18. Wordpressでの埋め込み箇所
  19. タイプ5: コレクションの埋め込み方
  20. どんな目的で埋め込むか
  21. 埋め込み用コードの取得方法
  22. Wordpressでの埋め込み箇所
  23. タイプ6: “リスト”でまとめた人たちのタイムライン
  24. どんな目的で埋め込むか
  25. 埋め込み用コードの取得方法
  26. タイプ7: フォローボタンの埋め込み方
  27. どんな目的で埋め込むか
  28. 埋め込み用コードの取得方法
  29. Wordpressでの埋め込み箇所
  30. タイプ8: ハッシュタグをつけてTweetしてもらうボタン
  31. どんな目的で埋め込むか
  32. 埋め込み用コードの取得方法
  33. Wordpressでの埋め込み箇所
  34. タイプ9: メンションをつけてTweetしてもらうときボタン
  35. どんな目的で埋め込むか
  36. 埋め込み用コードの取得方法
  37. Wordpressでの埋め込み箇所
  38. タイプ10: メッセージを送ってもらうためのボタン
  39. どんな目的で埋め込むか
  40. 埋め込み用コードの取得方法
  41. Wordpressでの埋め込み箇所
  42. タイプ11: 記事をシェアしてもらうボタン
  43. どんな目的で埋め込むか
  44. 埋め込み用コードの取得方法
  45. Wordpressでの埋め込み箇所
  46. まとめ

Twitter Publishの基本的な使い方 how to use Twitter Publish

Twitter Publish使い方自体は非常にカンタンです。

  1. 埋め込みたいTweetやタイムラインのURLをコピーしておく

    最初の一歩ですが、埋め込めみタイプが多様に存在していて、使い慣れてないと、この埋め込みタイプを決めることが最難関だと思います。埋め込むタイプに合わせたURLの取得方法を後述します。

  2. URLをTwitter Publishに貼り付ける

    Twitter Publishにアクセスするとファーストビューにインプット欄が見えるので、ここにURLをペーストします
    Twitter Publishにアクセスするとファーストビューにインプット欄が見えるので、ここにURLをペーストします

  3. 必要ならデザインをカスタマイズする

    Twitter Publishの使うメリットの1つが、簡単にデザインをカスタマイズできる点です。
    Twitter Publishの使うメリットの1つが、簡単にデザインをカスタマイズできる点です。

  4. 生成されたコードを埋め込みたい場所にペーストする

    何を埋め込むかによって、貼り付けるのに適した場所が若干異なります。こちらも後述します。

  5. 完成!

11種類の埋め込みタイプ

以下の通り様々な埋め込みタイプがあります。

  • 単体タイプ
    • タイプ1: 単体Tweet
  • 複数(タイムライン)タイプ
    • タイプ2: タイムライン
    • タイプ3: いいねしたTweetのタイムライン
    • タイプ4: “モーメント”としてまとめたTweetのタイムライン
    • タイプ5: “コレクション”としてまとめたTweetのタイムライン
    • タイプ6: “リスト”でまとめた人たちのタイムライン
  • ボタン
    • タイプ7: 読者に、特定の誰かをフォローしてもらうためのボタン
    • タイプ8: 読者に、ハッシュタグを付けてTweetしてもらうためのボタン
    • タイプ9: 読者に、特定の誰かへのメンションを付けてTweetしてもらうためのボタン
    • タイプ10: 読者に、記事をシェアしてもらうためのボタン
    • タイプ11: 読者に、メッセージを送ってもらうためのボタン

では、埋め込みタイプ別に見ていきましょう。

タイプ1: 単体Tweetを埋め込む方法 A Tweet

どんな目的で埋め込むか

単体で埋め込みたいと思うときはどんなときかを考えました。もちろん他にも動機や目的はあると思いますが、参考までに。

  • このTweetについて深掘りします、という趣旨の導入で記事を始めるとき(Tweetをサイトへの導線として使うとき
  • 自分の記事と似た意見や、全く別の意見を取り上げるときに、引用代わりにTweetを埋め込む
  • ピンポイントで商品やサイトのレビューなどをもらったときに、サイトでTweetを紹介したいとき
  • 自分のTweetがバズられたのを自慢したいとき(笑)

埋め込み用コードの取得方法

単体埋め込みはTwitter Publishを使わなくても埋め込めます

Twitterで直接埋め込み用コードを取得する

埋め込むツイートのデザインをカスタマイズしない場合は、Twitter経由で埋め込みコードを取得できます。

「ツイートをサイトに埋め込む」をクリックするとTwitter Publishで取得できるソースコードと同じものがワンクリックで取得できます
「ツイートをサイトに埋め込む」をクリックするとTwitter Publishで取得できるソースコードと同じものがワンクリックで取得できます

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

埋め込むツイートのデザインをカスタマイズする場合は、Twitter Publish経由で埋め込みコードを取得できます。

「ツイートへのリンクをコピー」を選択して、Twitter Publishに貼り付ければソースコードを取得でき、その後デザインをカスタマイズできます
「ツイートへのリンクをコピー」を選択して、Twitter Publishに貼り付ければソースコードを取得でき、その後デザインをカスタマイズできます

WordPressでの埋め込み箇所

単体のTweetをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

あまり見かけない
投稿ページの記事内(single.phpなど)

よくある
固定ページの記事内(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

あまり見かけない
フッター(footer.phpなど)

あまり見かけない

タイプ2: タイムラインを埋め込む方法 A profile & A handle

自分や誰か1人のタイムラインをWordpressに埋め込みます。

どんな目的で埋め込むか

タイムラインを埋め込みたいと思うときはどんなときかを考えました。

  • ブログのサイドバーやフッターに自分のタイムラインを表示しておくことで、読者にTwitterアカウントの存在を、消極的に伝えたいとき
  • 企業や有名人に関する話題の記事内で、該当するユーザーのタイムラインを表示しておきたいとき

埋め込み用コードの取得方法

URLを使うか、ハンドル名を使うか、どちらでも実現できます。

URLを使ってTwitter Publishで埋め込む方法

誰かのタイムラインにアクセスすれば、アドレスバーのURLをそのままTwitter PublishにコピペするだけでOKです。

アドレスバーのURLをそのままコピペすればOK
アドレスバーのURLをそのままコピペすればOK

ハンドル名を使ってTwitter Publishで埋め込む方法

またはハンドル名をコピーしてTwitter Publishにペーストしても同じ結果が得られます。

ハンドル名をコピペしてもOK
ハンドル名をコピペしてもOK

WordPressでの埋め込み箇所

タイムラインをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

よくある
投稿ページの記事内(single.phpなど)

たまに見かける
固定ページの記事内(page.phpなど)

あまり見かけない
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

よくある
フッター(footer.phpなど)

よくある

タイプ3: “いいね”したTweetのタイムラインを埋め込む方法 A likes timeline

どんな目的で埋め込むか

  • 自分が何にいいねする人なのかを読者に伝えたいとき
  • いいねしたTweetを見せることがサイトに相応しいと思うとき
  • 第三者からの評価をいいねするようにしておけば、サイドバーやフッターに配置することで自社や自分へのレビュー一覧として使える

埋め込み用コードの取得方法

ユーザーのホームから「いいね」をクリックすれば、あとはアドレスバーのURLをTwitter Publishに入力すればいいだけです。
ユーザーのホームから「いいね」をクリックすれば、あとはアドレスバーのURLをTwitter Publishに入力すればいいだけです。

WordPressでの埋め込み箇所

いいねタイムラインをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

たまに見かける
投稿ページ(single.phpなど)

あまり見かけない
固定ページ(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

よくある
フッター(footer.phpなど)

よくある

タイプ4: モーメントの埋め込み方 A moment

自分(または他者)が選んだ特定のTweetだけをタイムラインに表示して、「タイトル」「説明」「カバー写真」をつけて共有できるモーメント。

このモーメントも埋め込むことが可能です。

タイムラインの内容は自分が決めたTweetのみで、勝手に増えたり減ったりしないので、使い勝手が良いタイムラインと言えます。

どんな目的で埋め込むか

  • 自分で(多くの場合あるトピックに絞って)集めたtweetのタイムラインを埋め込みたいとき
  • 執筆中の記事に関する、誰かが作ったモーメントを見つけたので、埋め込んでサクッとコンテンツを補強したいとき

埋め込み用コードの取得方法

Twitterから直接埋め込み用のコードが入手できるため、ますます使い勝手が良いですね。

Twitterで直接埋め込み用コードを取得する

埋め込むツイートのデザインをカスタマイズしない場合は、Twitter経由で埋め込みコードを取得できます。

ホームの「モーメント」をクリックすると一覧が表示されますので、埋め込みたいモーメントの右上をクリックし「モーメントをサイトに埋め込む」を選択します。
ホームの「モーメント」をクリックすると一覧が表示されますので、埋め込みたいモーメントの右上をクリックし「モーメントをサイトに埋め込む」を選択します。

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

埋め込むツイートのデザインをカスタマイズする場合は、Twitter Publish経由で埋め込みコードを取得できます。

先述の方法と同じく埋め込みたいモーメントの「リンクをコピー」を選択して、Twitter Publishに貼り付けます。

先述の方法と同じく埋め込みたいモーメントの「リンクをコピー」を選択して、Twitter Publishに貼り付けます。

WordPressでの埋め込み箇所

モーメントをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

たまに見かける
投稿ページの記事内(single.phpなど)

よくある
固定ページの記事内(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

たまに見かける
フッター(footer.phpなど)

たまに見かける

タイプ5: コレクションの埋め込み方 A collection

どんな目的で埋め込むか

  • 企業や団体やサービスとしてのTweetを、TweetDeck内のコレクションとしてチームメンバーで運営しているので、サイトに埋め込みたい
  • 普段は公開したくないが、記事の内容と合致しているので、コンテンツを補強するために埋め込みたい

埋め込み用コードの取得方法

コレクションはTweetDeckで作成します。埋め込み用コードに必要な処理もTweetDeckで行います。

Embed Collectionをクリックすると、Twitter Publishが自動で開かれて、埋め込み用コードを取得することができます。

WordPressでの埋め込み箇所

コレクションをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

よくある
投稿ページの記事内(single.phpなど)

たまに見かける
固定ページの記事内(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

よくある
フッター(footer.phpなど)

よくある

次からはボタン型の埋め込み連携のやり方です。

タイプ6: “リスト”でまとめた人たちのタイムライン

Twitterにおけるリストとは「ユーザーリスト」のことで、選択したユーザーに絞ったTweetのみをタイムライン表示できる機能です。Facebookにおける友達リスト機能と同じコンセプトです。

自作リストはもちろん、他者の作成した(公開されている)リストも埋め込むことができます。

どんな目的で埋め込むか

  • 自分の記事で取り扱っている話題と関係のある「ユーザーの」Tweetを読者に見せたいとき
  • 自分の記事でアイドルやグループなど特定の誰かを取り上げているときに、彼らの紹介を兼ねてリストを埋め込む

埋め込み用コードの取得方法

リストを表示してアドレスバーのURLをコピペすればOKです
リストを表示してアドレスバーのURLをコピペすればOKです

タイプ7: フォローボタンの埋め込み方 A follow button

どんな目的で埋め込むか

  • 読者に、自分をフォローして欲しいとき
  • 記事で紹介した誰かへのフォローを促進したいとき

埋め込み用コードの取得方法

タイムラインのときと同じ方法で取得できます。

  • https://twitter.com/soylatte_grande という形式のプロフィールURLをTwitter Publishにペーストする
  • @soylatte_grandeというハンドル名をTwitter Publishにペーストする

WordPressでの埋め込み箇所

フォローボタンをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

よくある
投稿ページの記事内(single.phpなど)

記事下部などに見かける
固定ページの記事内(page.phpなど)

あまり見かけない
ヘッダー(header.phpなど)

たまに見かける
サイドバー(sidebar.phpなど)

よくある
フッター(footer.phpなど)

よくある

タイプ8: ハッシュタグをつけてTweetしてもらうボタン A hashtag button

どんな目的で埋め込むか

  • 読者に、記事のテーマに即したTweetをしてもらいたいとき
  • 「ハッシュタグをつけてTweetしてくれた方から抽選で1,000名様にプレゼント!」といったキャンペーン時に、読者がハッシュタグをご入力しないようにボタンを設置したい
  • あるハッシュタグを育てていて、読者にも積極的にTweetしてほしいとき

埋め込み用コードの取得方法

タグをそのままTwitter Publishに入力すればOKです。

WordPressでの埋め込み箇所

ハッシュタグボタンをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

設置に適している
投稿ページの記事内(single.phpなど)

よく見かける
固定ページの記事内(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけないが、あってもいい
サイドバー(sidebar.phpなど)

よくある
フッター(footer.phpなど)

よくある

タイプ9: メンションをつけてTweetしてもらうときボタン A mention button

どんな目的で埋め込むか

  • 「公開質問を受け付けます!」といった企画を促進するためにボタンを設置したい
  • 「商品・セミナーの感想をTweetしてください」といったファンとのコミュニケーションのためにボタンを設置したい
  • 読者に、記事で取り扱ったユーザーについてTweetしてもらいたいとき

埋め込み用コードの取得方法

タイムラインのときと同じ方法で取得できます。

  • https://twitter.com/soylatte_grande という形式のプロフィールURLをTwitter Publishにペーストする
  • @soylatte_grandeというハンドル名をTwitter Publishにペーストする

WordPressでの埋め込み箇所

メンションボタンをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

たまに見かける
投稿ページの記事内(single.phpなど)

あまり見かけないが、あってもいい
固定ページの記事内(page.phpなど)

自己紹介で見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

たまに見かける
フッター(footer.phpなど)

たまに見かける

タイプ10: メッセージを送ってもらうためのボタン A message button

プライバシー上あまり個人では設置しづらいかもしれませんが、ダイレクトメッセージを送ってもらうためのボタンです。

どんな目的で埋め込むか

  • カスタマーサポートの一環として、ユーザーからダイレクトにメッセージを送ってもらうことを促進したいとき
  • 商品やセミナーなどの感想を、直接メッセージしてほしいとき
  • 「非公開で質問を受け付けます!(そのかわりフォローしてね)」といったキャンペーンのとき

埋め込み用コードの取得方法

やや手間です。Twitter Publishの中では一番手間がかかります。

インプットには何も入力しない。すでに入力していた場合は、画面左上の「Publish」というリンク(スクショには映ってません)をクリックします。
インプットには何も入力しない。すでに入力していた場合は、画面左上の「Publish」というリンク(スクショには映ってません)をクリックします。
ハンドル名の代わりにプロフィールURLをペーストしたり、ハンドル名に@を付けると、正しくプレビューが表示されませんでした(2019.2.18)
ハンドル名の代わりにプロフィールURLをペーストしたり、ハンドル名に@を付けると、正しくプレビューが表示されませんでした(2019.2.18)

これで埋め込み用コードをGETできます。

WordPressでの埋め込み箇所

メッセージボタンをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)

あまり見かけない
投稿ページの記事内(single.phpなど)

あまり見かけない
固定ページの記事内(page.phpなど)

自己紹介でたまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

あまり見かけないが、あってもいい
フッター(footer.phpなど)

あまり見かけないが、あってもいい

タイプ11: 記事をシェアしてもらうボタン A share button

どんな目的で埋め込むか

  • 読者に、記事をTweetしてほしいとき

埋め込み用コードの取得方法

分かってしまえばカンタンです。


これで埋め込みコードが取得できます。URLなどは設置したページに合わせて自動で変わるので、とくにカスタマイズせずとも、そのまま機能します。

シェアボタンのサンプル

デフォルト状態のシェアボタンのサンプルになります。

WordPressでの埋め込み箇所

シェアボタンをワードプレスに埋め込むとしたら、どこが良いかをまとめました。

WordPressテーマの代表的なファイルおすすめ
トップページ(index.php, home.phpなど)
よくある
投稿ページの記事内(single.phpなど)

よくある
固定ページの記事内(page.phpなど)

たまに見かける
ヘッダー(header.phpなど)

あまり見かけない
サイドバー(sidebar.phpなど)

たまに見かける
フッター(footer.phpなど)

たまに見かける

まとめ so much for today

たくさんの埋込みタイプがありますが、「単体Tweet」「タイムライン」「シェアボタン」あたりが人気の埋め込みタイプではないでしょうか。

「モーメント」もTwitterが推している機能なので、かなり洗練されていて、うまく使いこなせればユーザー体験の向上に繋がりそうです。

今回は埋め込みにフォーカスしました。
次回はTwitter Publishを使ってデザインのカスタマイズをする方法を書こうと思います。

質問やご指摘など募集中です

(マークダウン記法使えます)