WordPress

TwitterのタイムラインをWordPressサイトに埋め込む

シロウトWordPressサイト構築実践レポート

WordPress テーマ "Astra"とページビルダー"Elementor"を使ったサイト構築の経過を紹介。 実践Webサイト構築記はこちらで掲載中

TwitterのフィードをWebサイトに埋め込んでみました。

TwitterのタイムラインをWebページ上に表示させることで、最新情報をTwitterとWebで共有可能になります。

簡単な情報だったら、いちいちブログ記事を書いたりサイトそのものに告知を出す必要もないので、とても手軽です。

今回はWordPressのページビルダーElementorを使って、カスタムHTMLコードを貼り付けるというやり方を試してみました。

 

パブリッシュコードをWordPressに設置する

まずTwitter公式サイトからコードを入手します。

入手したコードは、WordPressのエレメントを使って貼り付けるだけで、最新フィードが表示されます。

 

パブリッシュページにアクセス

WebページにTwitterのタイムラインを埋め込む方法が紹介されていました。

Twitterタイムライン埋め込み01 ヘルプ

埋め込み方法の紹介

https://publish.twitter.comにアクセスします。

 

埋め込みたい情報を選択する

すると”What would you like to embed?"というメッセージが出ます。

埋め込みたい情報のタイプを確認しているようです。

クリックするとドロップダウンリストにサンプルが表示されます。

タイムライン埋め込み02 入力サンプル

入力方法の例が現われる

 

特定の投稿やハッシュタグ検索結果なども表示できるようですが、今回はユーザーのタイムラインをそのまま表示したいので、@ユーザー名をそのまま入力。

タイムライン埋め込み03 ユーザー名

@ユーザー名を入力

 

次の画面でふたつのサンプルが出てきます。

タイムラインを取得したいので、の方をクリック。

タイムライン埋め込み04 タイムラインの取得

左の”Timeline”をクリックする

 

するとフィードのプレビューが現われます。

タイムライン埋め込み05 プレビュー

プレビューを確認

 

そのまま埋め込みたければ[Copy Code]ボタンをクリックしましょう。

タイムライン埋め込み06 コードをコピー

そのままコードをコピーする

 

表示をカスタマイズする

フィードの大きさや色づかいを指定することもできます。

[set customization options]をクリック

タイムライン埋め込み07 表示のカスタマイズ

表示をカスタマイズする

オプション設定に切り替わるので、表示サイズとルックを選びます。

サイズのパラメータは、左が高さで右が横幅なので注意してください。

タイムライン埋め込み08 パラメータ設定

サイズとルックを指定する

 

ルックは白基調の”Light”または黒基調の"Dark”を選択できます。

その下のオプションは”Automatic”のままでいいでしょう。

 

コードを取得する

カスタマイズが終わったら[Update]ボタンをクリックすると、前の画面に戻るので[Copy Code]をクリックして、ソースコードをコピーします。

タイムライン埋め込み09 カスタムコードのコピー

カスタマイズしたコードをコピー

 

”Copied!”のメッセージが出たらコピー完了。

タイムライン埋め込み10 コピー終了

コピー終了のメッセージ

 

 

続いてボタンも取得してみましょう。

実はタイムラインには、フォローなどのボタンが表示されないので、別のコードが必要です。

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

ボタンのソースコードを取得する

 

クリックするとボタンの選択画面に変わります。

タイムライン埋め込み12 ボタンのタイプ選択

フォローボタンは左端

いちばん左がフォロー用のボタン。真ん中はメンション、右端はハッシュタグ用です。

クリックすると元の画面に戻るので、またコードをコピーします。

タイムライン埋め込み13 コードのコピー

プレビューを確認してコードをコピー

 

WordPressにコードを設置する

コードのコピーが終わったらWordPressに設置しましょう。

今回は、ページの作成にElementorを使っているので、Elementorを使ったカスタムHTMLコードの入力ということになります。

なお、セクションの作成はすでに済んでいるものとして、要素(エレメント)の使い方だけ紹介します。

 

Elementorの左パネルを下へスクロールすると”WORDPRESS"というグループがあります。

タイムライン埋め込み14 Elementor編集画面

ElementorのWordPress用要素

 

その中でさらに下の方に”カスタムHTML”という要素があるので、これをドラッグして作成しておいたセクションにドロップ。

タイムライン埋め込み15 カスタムHTMLを配置

カスタムHTMLをドラッグ&ドロップ

 

左側のパネルがコード編集用に切り替わるので、先ほどコピーしておいたタイムラインのソースコードを貼り付けます。

その場でタイムラインが表示されるので、問題なければ下の方にある[更新]をクリック。

タイムライン埋め込み16 タイムラインの表示

編集画面にタイムラインが表示される

なお、タイトルのところに入力した文字はタイムラインの上にラベルとして表示されます。

残念ながら文字色や書体などの設定はできません

 

HTML要素を使う

Elementorにはもうひとつ”HTML”という要素もあります。

タイムライン埋め込み17 カスタムHTML

HTMLという要素を使ってもいい

 

こちらの編集画面にはタイトル用のフィールドがありません。

タイムライン埋め込み18 HTMLの編集フィールド

HTML要素には"タイトル”がない

 

この方がすっきりしますし、もし見出しが必要だったらElementorで要素を追加できます。

そのほうが文字色や大きさ、余白などのパラメータをいじれるので、WordPressのカスタムHTML要素よりはElementorのHTMLを使った方がいいでしょう。

 

次の画面はElementorのほうのHTMLを使っています。

また、タイムラインの下にフォロー用ボタンも表示させるため、スクリプトをふたつ続けて貼り付けてあります。

タイムライン埋め込み19 ボタンのソースコード

ボタンのコードも貼り付けた状態

 

情報発信をSNSに一元化

これでTwitterのタイムラインをWebページ上に表示できます。

最新情報を告知するとき、いちいちサイトを編集しなくても、ツイッターに投稿するだけでSNSとWebの両方に発信できるので助かりますね。

今回はElementorを使いましたが、一般的なWordPressテーマならウィジェットを使ったカスタムHTMLの表示ができると思います。

技術的にも操作面でも特に難しい部分はなく、単にコピー&ペーストすればいいので、ぜひ活用してください。

 

-WordPress
-

© 2021 Windowsパソコン 使えるツール&テクニック