TwitterのタイムラインをWebページ上に表示させることで、最新情報をTwitterとWebで共有可能になります。
簡単な情報だったら、いちいちブログ記事を書いたりサイトそのものに告知を出す必要もないので、とても手軽です。
今回はWordPressのページビルダーElementorを使って、カスタムHTMLコードを貼り付けるというやり方を試してみました。
この記事の目次
パブリッシュコードをWordPressに設置する
まずTwitter公式サイトからコードを入手します。
入手したコードは、WordPressのエレメントを使って貼り付けるだけで、最新フィードが表示されます。
パブリッシュページにアクセス
WebページにTwitterのタイムラインを埋め込む方法が紹介されていました。
埋め込み方法の紹介
https://publish.twitter.comにアクセスします。
埋め込みたい情報を選択する
すると”What would you like to embed?"というメッセージが出ます。
埋め込みたい情報のタイプを確認しているようです。
クリックするとドロップダウンリストにサンプルが表示されます。
入力方法の例が現われる
特定の投稿やハッシュタグ検索結果なども表示できるようですが、今回はユーザーのタイムラインをそのまま表示したいので、@ユーザー名をそのまま入力。
@ユーザー名を入力
次の画面でふたつのサンプルが出てきます。
タイムラインを取得したいので、左の方をクリック。
左の”Timeline”をクリックする
するとフィードのプレビューが現われます。
プレビューを確認
そのまま埋め込みたければ[Copy Code]ボタンをクリックしましょう。
そのままコードをコピーする
表示をカスタマイズする
フィードの大きさや色づかいを指定することもできます。
[set customization options]をクリック
表示をカスタマイズする
オプション設定に切り替わるので、表示サイズとルックを選びます。
サイズのパラメータは、左が高さで右が横幅なので注意してください。
サイズとルックを指定する
ルックは白基調の”Light”または黒基調の"Dark”を選択できます。
その下のオプションは”Automatic”のままでいいでしょう。
コードを取得する
カスタマイズが終わったら[Update]ボタンをクリックすると、前の画面に戻るので[Copy Code]をクリックして、ソースコードをコピーします。
カスタマイズしたコードをコピー
”Copied!”のメッセージが出たらコピー完了。
コピー終了のメッセージ
続いてボタンも取得してみましょう。
実はタイムラインには、フォローなどのボタンが表示されないので、別のコードが必要です。
ボタンのソースコードを取得する
クリックするとボタンの選択画面に変わります。
フォローボタンは左端
いちばん左がフォロー用のボタン。真ん中はメンション、右端はハッシュタグ用です。
クリックすると元の画面に戻るので、またコードをコピーします。
プレビューを確認してコードをコピー
WordPressにコードを設置する
コードのコピーが終わったらWordPressに設置しましょう。
今回は、ページの作成にElementorを使っているので、Elementorを使ったカスタムHTMLコードの入力ということになります。
なお、セクションの作成はすでに済んでいるものとして、要素（エレメント）の使い方だけ紹介します。
Elementorの左パネルを下へスクロールすると”WORDPRESS"というグループがあります。
ElementorのWordPress用要素
その中でさらに下の方に”カスタムHTML”という要素があるので、これをドラッグして作成しておいたセクションにドロップ。
カスタムHTMLをドラッグ＆ドロップ
左側のパネルがコード編集用に切り替わるので、先ほどコピーしておいたタイムラインのソースコードを貼り付けます。
その場でタイムラインが表示されるので、問題なければ下の方にある［更新］をクリック。
編集画面にタイムラインが表示される
なお、タイトルのところに入力した文字はタイムラインの上にラベルとして表示されます。
残念ながら文字色や書体などの設定はできません。
HTML要素を使う
Elementorにはもうひとつ”HTML”という要素もあります。
HTMLという要素を使ってもいい
こちらの編集画面にはタイトル用のフィールドがありません。
HTML要素には"タイトル”がない
この方がすっきりしますし、もし見出しが必要だったらElementorで要素を追加できます。
そのほうが文字色や大きさ、余白などのパラメータをいじれるので、WordPressのカスタムHTML要素よりはElementorのHTMLを使った方がいいでしょう。
次の画面はElementorのほうのHTMLを使っています。
ボタンのコードも貼り付けた状態
情報発信をSNSに一元化
これでTwitterのタイムラインをWebページ上に表示できます。
最新情報を告知するとき、いちいちサイトを編集しなくても、ツイッターに投稿するだけでSNSとWebの両方に発信できるので助かりますね。
今回はElementorを使いましたが、一般的なWordPressテーマならウィジェットを使ったカスタムHTMLの表示ができると思います。
技術的にも操作面でも特に難しい部分はなく、単にコピー＆ペーストすればいいので、ぜひ活用してください。