TwitterのタイムラインをWebアプリに埋め込む

はじめに

良いものを作れば売れる（使ってもらえる）時代はとうの昔に終わりました。何においても作る前に「誰に」どのような「目的」で使ってもらいたいか検討し、その上で作るそしてプロモーションという流れが必要です。そしてそのプロモーションにおいて有力なツールがTwitterです。とかゆうといて本能の趣くまま思いついた順で作ってしまう、単細胞の私です。、、、まあいずれにせよチャネル検討・流入施策がない製品開発は意味がないので、今回は手始めにTwitterとWebアプリの連携による流入施策の第一歩として（手か足かどっちやねん）、TwitterのフォローボタンとタイムラインをWebアプリに埋め込む方法を調べたのでその方法をまとめました。

Webアプリへのタイムライン埋め込み

Webアプリにタイムラインを表示させるためには、1.埋め込みコードの生成、Webアプリへの埋め込みの大きく2ステップの実施が必要です。

埋め込みコードの生成（Twitter Publish）（1/2）

Webアプリに埋め込むにはTwitterが公式にリリースしているTwitter Publishを利用します。これにより簡単に埋め込みコードが生成できます。埋め込み形式としては以下の3種類です。

• Embedded Tweet：ツイートの埋め込み
• Embedded Timeline：タイムラインの埋め込み
• Twitter Button：各種ボタンの生成

今回は試しに@TwitterDevのタイムラインを埋め込むこととします。

• "What would you like to embed?"の部分に、埋め込みたいTwitterアカウントのIDを入力します。
• IDを入力すると"Here are your display options"の欄にあるように、入力内容に応じてWebアプリに埋め込み可能なコンポーネントが表示されますが、今回はアカウントIDを入力したので"Embedded Tweet"は非表示になっています。今回はタイムラインを選択します。
• さて"Embedded Timeline"を選択するとその直下に埋め込みコードが出てくるので、"Developer Agreement"と"Developer Policy"を読んでからこれを生成されたスクリプト（aタグ）をコピーしましょう。
• ちなみにボタンの方はというと、上の画像の中から選べます。こちらもツイートを入力するのかIDを入力するのかで表示・非表示が切り替わります。以前は"Like Button（いいね）"も埋め込み可能だったとのことですが、現在は利用できません。
  • Share Button：記事等をシェアボタン
  • Follow Button：アカウントフォローのボタン
  • Mention Button：メンションするボタン
  • Hashtag Button：ハッシュタグのボタン
  • Message Button：メッセージのボタン

Webアプリへの埋め込み（Next.js）（2/2）

次に上でコピーしたスクリプトをNext.js上に貼り付けます。ただし以下2点修正が必要です。

1. scriptタグの記載部分の変更：Reactにおいてはそのまま埋め込みコードを貼り付けてもscriptは実行されません。したがって、マウント後にwidgets.jsを読み込ませるようにするために、貼り付け時にはscriptタグは削除した上で一部書き換えます。今回はuseEffectを使ってscriptに追加しました。
2. class→classNameへの変更：こちらはReactを利用する場合、（当たり前ですが）修正が必要になる部分です。書き換えるだけなので楽です。

なお1点目の注意点については、こちらの記事1、記事2を大いに参考にさせていただきました。ありがとうございました。

まとめ・参考

自作Webアプリでも、Twitterタイムラインがあるだけでなんとなく「できてきているな」という実感が得られますよね。埋め込みだけが正解ではありませんが、検討してみはいかがでしょうか。ちなみに、先日Twitter APIのプランが大幅に変わって無償版でできることがかなり減ってしまいましたが、こちらはTwitter APIとは関係ないため気軽に始められます。そう言った意味でも（？）とりあえず試してみるのがオススメです。

参考

• Home - Twitter Publish
• JSでツイートを埋め込むときのベストプラクティス - Zenn
• ReactでTwitterのタイムラインなどを埋め込む - Narumium Blog