レスポンシブTwitterウィジェットをウェブサイトに埋め込む方法

Twitterエンベッドをレスポンシブにしたいですか？お任せください。

多くの人が携帯電話でインターネットを閲覧している今、ウェブサイトをモバイルフレンドリーにすることはこれまで以上に重要です。

また、レスポンシブTwitterエンベッドを表示することで、あらゆるデバイスの訪問者に関連するツイートを提供することができます。

本日は、Twitterエンベッドをカスタマイズし、完全にレスポンシブ化する最も簡単な方法をご紹介します。

その前に、あなたのウェブサイトにレスポンシブTwitterの埋め込みを可能にする方法を見てみましょう。

あるいは、ここをクリックしてチュートリアルに飛ぶこともできる。

Twitterの埋め込みをレスポンシブにする方法はありますか？

はい、2つの異なる方法でTwitterの埋め込みをレスポンシブにすることができます。

• 手動の方法：Twitter embed generateを使ってコードを作成し、CSSを使ってコードをカスタマイズしてから、ウェブサイトに挿入します。
• 簡単な方法：Twitterのコンテンツを自動的に埋め込んでくれるWordPressプラグインを使う。

お分かりのように、手作業は時間がかかるだけでなく、コーディングに慣れていない人には難しい。

さらに、Twitterの埋め込みをカスタマイズするのが難しくなるため、ツイートがウェブサイトのデザインと合わなくなるかもしれません。

また、手動でウェブサイトにコードを追加する際に何か問題が発生しても、サポートチームが助けてくれることはない。

一方、Twitter Feed Proを使えば、これらの問題を回避することができます。

WordPress用No.1Twitterフィードプラグインを使えば、簡単な数クリックでTwitterコンテンツを作成、カスタマイズ、埋め込むことができます。

一番の利点はすべてのTwitterエンベッドが自動的にレスポンシブ対応になります。そのため、あらゆるデバイスからの訪問者があなたの美しいTwitterウィジェットをチェックすることができます。

iFrame、HTML埋め込みコード、Javascriptなどのコーディングは一切不要です。

Twitterプロフィールのタイムライン、ハッシュタグフィード、Twitterリスト、検索結果などを埋め込むことができます。

その上、Twitterエンベッドのデザインを完全にコントロールできます。デザイン済みのテンプレートをインポートして、素早く簡単にカスタマイズすることもできます。

ライブフィードエディタを使えば、HTMLやカスタムCSSなどのコードは一切不要で、Twitterエンベッドを詳細にデザインすることができます。

さらに、WordPressの専門家チームによる献身的なサポートも受けられます。

レスポンシブTwitterコンテンツを埋め込む準備はできましたか？Twitter Feed Proはこちらから。

それでは、このプラグインを使ってTwitterウィジェットをレスポンシブにする最も簡単な方法を見ていこう。

レスポンシブTwitterウィジェットをサイトに埋め込む方法（簡単な方法）

以下のステップバイステップの指示に従えば、モバイルフレンドリーなTwitterエンベッドのフィードをウェブサイトに設置することができます。

始めよう！

ステップ1: Twitter Feed Proプラグインをインストールする

まずはこちらからTwitter Feed Proをダウンロードしてください。プラグインファイルを入手したら、コンピューターにインストールして有効化してください。

WordPressのプラグインをインストールする方法については、初心者向けのチュートリアルをご覧ください。

Twitter Feed Proをインストールして有効化したら、ステップ2に進んでウィジェットを作成しましょう。

ステップ2: 新しいTwitterウィジェットを作成する

このプラグインには3ステップのガイドフローがあるので、レスポンシブTwitterエンベッドを表示する新しいウィジェットを簡単に作成できます。

まず、管理画面のダッシュボードからTwitter Feed " All Feeds メニューを開き、Add Newボタンをクリックします。

次に、埋め込みたいTwitterウィジェットのタイプを選択できます。ここでは6種類のオプションから選択できます：

• ユーザーのタイムライン：Twitterアカウントを選択し、そこにツイートを埋め込む
• ハッシュタグ： 選択したハッシュタグでTwitterの埋め込みを表示する
• ホームタイムライン：自分のTwitterタイムラインからすべてのツイートとリツイートを表示する
• 検索検索語を選択し、一致するツイートを埋め込む
• メンション： ブランドのツイッターハンドルに言及したツイートを埋め込む。
• リスト： Twitterのリストを選択し、そこからすべてのツイートを埋め込む

必要なウィジェットタイプを選択したら、Nextボタンをクリックしてください。

この例では、ハッシュタグ・ウィジェット・タイプを 選択します。

Twitterウィジェットの作成が完了したら、次はステップ3です。

ステップ3：Twitterアカウントに接続する

Twitterアカウントに接続すると、ウィジェットはサイト上にレスポンシブTwitterエンベッドを表示できるようになります。

準備はできたか？

まず、ポップアップの接続 ボタンをクリックする。

そうすることで、ウェブサイトからブラウザ上のwww.twitter.comにリダイレクトされます。ここで、プラグインにあなたのアカウントへの読み取り専用 アクセス権を与えることができます。

Smash Balloonは完全に安全なので、Twitter Feed ProはTwitterの情報を見ることができ、このアクセスで変更を加える権限はありません。

続行するには、こちらのAuthorize app ボタンをクリックしてください。

それをクリックすると、もう一度ワードプレスのウェブサイトに戻る。

ここでは、Twitterエンベッドのソースを選択できます。ウィジェットのタイプによって、これはTwitterハンドル、ハッシュタグ、検索語などになります。

とりあえず、ポップアップに"KEEB_PD "というハッシュタグを入力し、そのハッシュタグが付いたツイートを全て表示させてみます。

続行するには、ソースを入力し、「Next」をクリックします。

これで、ウィジェットに新しいソースが追加されました。今後、新しいTwitterウィジェットを作るときはいつでも、ワンクリックでこのソースを再利用できます。

ステップ4では、Twitterの埋め込みをカスタマイズできます。

ステップ4：Twitter Embedsをカスタマイズする

Twitter Feed Proの素晴らしいところは、プラグインが自動的にTwitterの埋め込みをレスポンシブにし、ウェブサイトのデザインをコピーしてくれることです。

そのため、すぐに埋め込むことができ、しかも美しいTwitter埋め込みフィードを持つことができる。

その上、ウィジェットのためにインポートできる事前構築テンプレートのコレクションもある：

• デフォルト
• 石工
• シンプルなカルーセル
• シンプルなカード
• ショーケース・カルーセル
• 最新ツイート
• ウィジェット

あとは使いたいテンプレートを選んで「Next」をクリックするだけ。

テンプレートをインポートすると、Twitter Feed Proのライブフィードエディターが起動し、モバイルフレンドリーなTwitterエンベッドを詳細にカスタマイズできます。

左側には、フィードのレイアウト、カラースキーム、ヘッダー、ロードモアボタンなどを変更するオプションがあります。

さらに、右側のライブフィードプレビューを使えば、リアルタイムですべての変更を追跡することができます。そのため、カスタマイズはユーザーフレンドリーで、迅速かつ正確です。

Twitterエンベッドのデザインを始めるには、まず左側のフィードレイアウトオプションをクリックします。

その後、あなたのウェブサイトに表示されるツイートのレイアウトを選択することができます。実際には、3つの異なるレイアウトから選択することができます：

• リスト
• 石工
• カルーセル

以下、これらのレイアウトについて詳しく見ていこう。

Twitterのエンベッドをウェブサイト上で簡単に表示したい場合は、リストレイアウトを 使用することができます。

このレイアウトは、ツイートを1つのウィジェットに表示します。Twitter動画の埋め込みにも最適です。

次に、埋め込みツイートをたくさんの列で表示できるメイソンレイアウトが ある。

その結果、一度に大量の異なるツイートを表示することで、ウェブサイト訪問者を惹きつけることができる。

ウェブサイトをもっとインタラクティブにしたい？

カルーセルレイアウトを 選択するだけで、Twitterエンベッドをスライドショーで表示できます。

レイアウトを選択したら、「保存」をクリックして変更を保存できます。

Twitterエンベッドをパーソナライズする方法を増やしたい場合は、カスタマイズボタンをクリックしてください。

次に、プラグインのライブフィードエディタを使って、Twitterエンベッドの色を変更することができます。

左の配色 オプションをクリックするだけです。

これで、好みの配色を選択するだけで、フィードのすべての色を一度に変更できる。

以下は、あなたが選べる配色です：

• テーマからの継承： WordPressテーマの色を自動的にコピーします。
• 明るい：明るい背景と暗い文字色を選択
• ダーク：暗い背景を表示し、代わりに適切なライトを表示する。
• カスタム： ウィジェットのすべての色を手動で選択

配色を選択したら、もう一度「保存」をクリックします。

あとはプラグインの残りのカスタマイズオプションを使って、ツイートボックスのスタイル、ツイッターヘッダー、ロードモアボタン、フィードサイズなどをパーソナライズできます。

ご覧の通り、このプラグインを使えば、CSSやHTMLは一切不要で、簡単にTwitterフィードをカスタマイズして埋め込むことができる！

最後に、「Save」をクリックして変更を保存してから、最後のステップに進みます。

ステップ5：WordPressにレスポンシブTwitter埋め込みを追加する

このプラグインは自動的にTwitterの埋め込みをレスポンシブにするので、Twitterウィジェットを埋め込むことができます。

Twitter Feed Proでは、レスポンシブTwitterウィジェットの埋め込み方法を2種類から選ぶことができます：

• ウェブページにTwitterエンベッドを追加する
• ウェブサイトのサイドバーやフッターにTwitterエンベッドを追加する。

以下、この2つの方法を見てみよう。

ウェブページにTwitterの埋め込みを追加する

ウェブサイトにTwitterウィジェットを追加する準備はできましたか？

まず、右上の埋め込み ボタンをクリックします。

それをクリックすると、このTwitterウィジェットの埋め込みオプションが表示されます。WordPressのページ、サイドバー、フッターに埋め込むことができます。

今度は、「ページに追加 」オプションをクリックします。

これで、ウェブサイト上のすべてのWordPressページのリストが表示されます。

続行するには、レスポンシブTwitterウィジェットを追加したいページをクリックし、「追加」をクリックするだけです。

Twitter Feed ProはWordPressエディターでこのページにリダイレクトします。

ここで、プラス（+）アイコンをクリックして、新しいコンテンツブロックを追加することができます。

次に、上部の検索バーに「twitter feed」と入力し、下のTwitter Feedブロックをクリックします。

これで、プラグインが自動的にTwitterウィジェットをページに追加します。

新しいTwitterウィジェットを確認するには、上部の更新ボタンをクリックしてください。このように、Twitterエンベッドをレスポンシブにしてサイトに追加するのはとても簡単です。

ウェブページを開いて、Twitterの埋め込みがどのように見えるかを見ることができます。

この後、Twitterウィジェットを埋め込む次の方法を見ていきましょう。

ウェブサイトのサイドバーやフッターにTwitterの埋め込みを追加する

ライブフィードエディターから、ウェブサイトのウィジェット対応エリアにTwitterのコンテンツを追加することもできます。

エディターがまだ開いていない場合は、まずダッシュボードからTwitterフィード " すべてのフィードメニューを開きます。

ここで、埋め込みたいTwitterウィジェットをクリックする。

このように、Twitterウィジェットがライブフィードエディターで開かれます。

先ほどと同じように、「Embed」をクリックして次に進むことができる。

すると、もう一度埋め込みオプションのポップアップが表示されます。

ウィジェットに追加を クリックして続けることができます。

Twitter Feed Proは、既存のウィジェットを管理したり、新しいウィジェットを追加したりできる、ウェブサイトのウィジェットページにリダイレクトします。

ここでは、Twitterウィジェットを表示するサイドバー またはフッターを選択できます。

この例ではフッターを使用する。

最後に、下部にあるプラスアイコン（+）を クリックし、Twitterフィードウィジェットを 選択します。

更新] ボタンをクリックすると、新しいTwitterウィジェットがウェブサイトに表示されます。

そうすれば、あなたのウェブサイトを訪れた人は誰でも、あなたのウェブサイトのフッターにあるレスポンシブTwitterエンベッドを見ることができます：

これで完成だ！

わずか数ステップで、反応性の高いTwitter埋め込みフィードを作成し、訪問者の関心を引き、コンバージョンを高め、ソーシャルフォロワーを増やすことができます。

Twitter Feed Proを使えば、どんな画面サイズでも完璧に読み込まれる美しいTwitterウィジェットを簡単に表示できます。

Twitterの埋め込みをレスポンシブにしたいですか？あなたのウェブサイトにTwitter Feed Proをどうぞ。

売上を上げる簡単な方法として、WordPressにGoogleレビューウィジェットを埋め込む方法をご紹介しています。

この記事を楽しんでいただけたなら、ツイッターや フェイスブックでソーシャルメディア・マーケティングのチュートリアルをもっとご覧ください。