レスポンシブなTwitterエンベッドを表示して、ウェブサイトの訪問者を惹きつけたいですか？
ウェブサイトを訪問するすべての人を巻き込みたいのであれば、レスポンシブTwitter投稿を埋め込むのが簡単な解決策です。
しかし、自分でレスポンシブTwitterエンベッドを追加するのは、特にコードの扱いに慣れていない場合は、混乱する可能性があります。
この記事では、レスポンシブTwitterフィードをウェブサイトに埋め込む手順をご紹介します。
その前に、Twitterの埋め込みをレスポンシブにするさまざまな方法を見てみましょう。
あるいは、ここをクリックしてチュートリアルに直接飛ぶこともできる。
サイトにレスポンシブTwitterエンベッドを追加する方法
Twitterのコンテンツを埋め込みつつ、ツイートがレスポンシブに表示されるようにするには、2つの方法があります：
- 手動の方法： 埋め込みコードを生成し、コードを微調整してレスポンシブにし、サイトに追加する。
- 自動的な方法：モバイルフレンドリーなTwitterフィードを自動的に表示できるソーシャルメディアプラグインを使う。
手動で行う場合は、Twitterの公式埋め込みコードジェネレーターpublish.twitter.comをブラウザで開く必要があります。
HTML埋め込みコードを生成したら、もう一度ウェブサイトを開き、埋め込みコードを挿入します。
悲しいことに、手動でツイートしている場合、毎回ツイートが反応しないことがあります。その問題を解決するには、以下のCSSコードを追加してください。
.twitter-timeline {
width: 100vw !important;
}
また、iFrameを使ってTwitterの投稿をカスタマイズしたい場合は、さらに手作業でコードを編集するか、開発者を雇う必要がある。
このように、レスポンシブなTwitterコンテンツを埋め込むには、時間と手間がかかる。
iFrameとTwitter Embeds、どちらが優れているか？
ツイッターのコンテンツを表示するためにiFrameを使う人もいますが、実際にはいろいろな意味でウェブサイトを傷つける可能性があります。
iFrameはデフォルトではレスポンシブではないので、モバイルフレンドリーにするためには手動でコードを編集する必要があります。
その結果、モバイル端末からの訪問者は、あなたのツイートを正しく見ることができないかもしれません。
さらに、グーグルなどの検索エンジンはiFrame内のコンテンツを読むことができないため、SEO上も不利になる可能性がある。
朗報は、自動的な方法で簡単にレスポンシブTwitter投稿を埋め込むことができることだ。WordPressのプラグインを使えば、APIを使ってTwitterと接続し、ツイートをサイトに集約することができる。
この方法を以下に見てみよう。
レスポンシブTwitterコンテンツを埋め込む最も簡単な方法
Twitterのコンテンツを埋め込む最もシンプルな方法をお探しなら、Twitter Feed Proのようなプラグインを試してみるのがベストです。
Twitter Feed Proを使えば、HTML、Javascript、カスタムCSSなどのコードは一切不要で、レスポンシブなTwitterフィードを簡単に作成、カスタマイズし、ウェブサイトに埋め込むことができます。
簡単な3ステップのガイドに従うだけで、すぐに美しいTwitterフィードが完成します。Twitterタイムライン、ハッシュタグ、検索結果、ホームタイムラインなどを埋め込むことができます。
Twitter Feed Proは自動的にウェブサイトのデザインをコピーするため、Twitterのコンテンツはそのままブランドの外観に完璧にマッチします。
そして、インポートしたいデザイン済みのテンプレートを選ぶことで、Twitterフィードをさらにカスタマイズできる。
さらにカスタマイズするために、このプラグインにはビジュアル・エディターが付属しており、レイアウト、色、ツイート数、ヘッダーのスタイル、ロード・モア・ボタンなどを設定することができる。
さらに、ライブプレビューを使用して、すべての変更を追跡することができます。
このプラグインは、あなたのTwitterコンテンツのコピーを保存するスマートなキャッシュシステムを備えています。そのため、あなたのサイトでは、ツイートを毎回ゼロから読み込む代わりに、保存されたコピーを訪問者に表示することができます。
その結果、サイトの読み込みが格段に速くなります。また、サイトの読み込みが速くなることで、SEO対策も強化されます。
Twitter Feed Proはバックアップコピーを保存するので、Twitter自体が一時的にダウンしても、埋め込んだツイートはオンラインになります。
全体として、このプラグインは最高のTwitterフィードプラグインであり、レスポンシブなTwitterエンベッドが必要な場合には素晴らしいソリューションだ。
レスポンシブTwitterフィードを埋め込む準備はできましたか？今すぐTwitter Feed Proを手に入れよう！
それでは、このプラグインを使って、あなたのサイトにレスポンシブTwitterエンベッドを追加する方法を見ていきましょう。
レスポンシブTwitterフィードをサイトに埋め込む方法
レスポンシブTwitterエンベッドを追加するには、以下のステップバイステップの手順に従ってください：
ステップ1: Twitter Feed Proのインストールと有効化
こちらからTwitter Feed Proプラグインを入手してください。プラグインを入手したら、WordPressサイトにインストールして有効化してください。
詳しくは、WordPressプラグインのインストール方法に関するユーザーフレンドリーなガイドをご覧ください。
そうしたら、ステップ2に進み、レスポンシブTwitterフィードを作成します。
ステップ2：Twitterフィードを作成する
このプラグインにはシンプルなガイドフローが用意されているので、数回クリックするだけで新しいTwitterフィードを作成できる。
まず、管理画面のダッシュボードを開き、ツイッターフィード " すべてのフィード メニューを開いてから、一番上の新規追加 ボタンをクリックします。
次に、このプラグインは、あなたのウェブサイトに埋め込みたいTwitterの種類を選択するように尋ねます。6つのオプションから選ぶことができ、それぞれが異なるソースからのツイートを表示します。
- ユーザーのタイムライン 埋め込みたいツイートのTwitterプロフィールを選択します。
- ハッシュタグ：特定のハッシュタグを選択し、そのハッシュタグが付いたツイートを埋め込む。
- ホームタイムライン： アカウントのホームタイムラインからツイートを埋め込む
- 検索検索キーワードを選択し、Twitterの検索結果をサイトに埋め込む。
- メンションブランドのTwitterアカウントに言及したツイートを表示する。
- リスト選択したTwitterリストのコンテンツを表示
異なるフィードタイプを1つのTwitterフィードにまとめたい場合は、複数のオプションを選択することもできます。
続行するには、Twitterフィードの種類を選択し、[次へ]ボタンをクリックします。
この例では、ハッシュタグフィードを使ってレスポンシブTwitterエンベッドを表示します。
これでTwitterフィードが作成されたので、ステップ3でTwitterアカウントに接続することができます。
ステップ3：Twitterアカウントに接続する
あなたのサイトにレスポンシブな埋め込みを表示するには、プラグインがあなたのTwitterアカウントに接続します。
それにはまず、接続 ボタンをクリックする。
次に、Twitter Feed Proはあなたのアカウントへの読み取り専用 アクセスを要求します。プラグインはこのアクセス権を使ってTwitterの情報を見ることができますが、アカウントに変更を加えることはできません。
その結果、Twitter Feed Proプラグインは完全に安全です。
そのためには、Authorize app ボタンをクリックするだけです。
そうすると、Twitter Feed Proがあなたのウェブサイトを開くので、Twitterフィードのソースを追加できます。
ソースとは、サイトに埋め込みたいツイッターのプロフィール、ハッシュタグ、検索ワード、リストなどのこと。
続行するには、ポップアップでソースを入力し、「Next」をクリックします。
このレスポンシブTwitterフィードでは、ソースとして "KEEB_PD "のハッシュタグを使用しています。
フィードをTwitterに接続し、ソースを追加したら、次はそれをカスタマイズする番だ。
ステップ4: レスポンシブTwitter埋め込みをカスタマイズする
レスポンシブツイートがあなたのサイトにどのように表示されるかを素早く設定するために、あらかじめデザインされたテンプレートをインポートすることができます。
以下は、選択可能なフィードテンプレートです：
- デフォルト
- 石工
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新ツイート
- ウィジェット
お好みのフィードテンプレートを選んだら、「次へ」をクリックします。
これで、ライブフィードエディタを使ってTwitterフィードをカスタマイズする準備が整いました。左側には、フィードのレイアウト、ヘッダーデザイン、ライトボックスオプション、カラースキームなどを変更するためのカスタマイズオプションがあります。
また、フィード設定のモデレーションオプションを使って、あなたのサイトに表示されるツイートをキュレートすることもできます。
このプラグインは右側にシンプルなリアルタイムのプレビューがあり、変更点を把握するのに役立ちます。
手始めに、ウェブサイト上のツイートのレイアウトを変更してみましょう。
そのためには、左側にある「Feed Layout」 オプションを探し、それをクリックする。
次に、Twitter Feed Proは、リスト、カルーセル、メイソンの3つのレイアウトを表示します。
以下、見ていこう：
ツイッターの公式サイトと同じようにツイートを表示したい場合は、リストレイアウトを 選ぶとよい。
さらに、ツイッターのフィードがウェブページにはっきりと表示されます。
カラムを使ってTwitterエンベッドを表示したい場合は、メイソンレイアウトを使うことができます。
このレイアウトを使えば、大量のツイートを一度に表示できる。
カルーセルレイアウトを 選択すると、ツイートをインタラクティブなTwitterスライドショーで表示できます。
訪問者は、あなたのサイトに関与する別の方法を持つことになります。
フィードレイアウトを選択したら、「保存」 ボタンをクリックします。
次に、カスタマイズ ボタンをクリックして、Twitterフィードの見た目のカスタマイズを続けます。
今回は、レスポンシブTwitterフィードの色を選択することができます。
まず、配色 オプションをクリックする。
Twitter Feed Proには4つのカラースキームが用意されています：
- テーマから継承： WordPressテーマの色をツイート用にコピーする。
- 明るい：暗い文字色に明るい背景
- Dark：暗い背景と明るい色のフォント
- カスタム： すべての色を手動で選択
続行するには、配色を選択し、[保存]をクリックします。
Twitterエンベッドをもっとカスタマイズしたいですか？残りのボタンを使って、ヘッダーのスタイル、ボタンのデザイン、ツイートの数、フィードのサイズなどを設定できます。
最後に「保存」をクリックして、Twitterフィードの新しいデザインを確認します。
ステップ5では、最後にこのプラグインを使ってWordPressウェブサイトにTwitterフィードを埋め込むことができます。
ステップ5：ウェブサイトにレスポンシブTwitter埋め込みを追加する
Twitter Feed Proを使えば、2つの方法でTwitterのコンテンツをウェブサイトに埋め込むことができます：
- ウェブページにレスポンシブTwitterエンベッドを追加する
- ウェブサイトのサイドバーやフッターにレスポンシブTwitterエンベッドを追加する
WebページにレスポンシブTwitterエンベッドを追加する
プラグインは非常にユーザーフレンドリーなので、ライブフィードエディタから直接Twitterフィードを埋め込むことができます。
まず、エディター上部の埋め込み ボタンをクリックします。
そうすると、Twitterフィードを埋め込むさまざまな方法がポップアップで表示されます。
ポップアップのページに 追加をクリックして続行します。
フィードを表示するWordPressページを選択できます。
ポップアップでページを選択した後、Addボタンをクリックして次に進みます。
そうすると、プラグインがWordPressのエディタでページを開き、フィードを埋め込むことができます。
次に、プラスアイコン（＋）をクリックして新しいコンテンツブロックを追加します。
上部の検索バーを使って「twitter feed」ブロックを探し、その下にある「Twitter Feed」ブロックをクリックします。
すると、WordPressエディター上にTwitterの埋め込みが表示されます。
最後にUpdateボタンをクリックすると、あなたのTwitterフィードがオンラインになります。
あなたのウェブページを開くと、レスポンシブTwitterエンベッドがどのように見えるかを見ることができます。
このように、Twitter Feed Proを使えば、モバイルフレンドリーなTwitterコンテンツをウェブサイトに表示するのがとても簡単になります。
それでは、次にTwitterフィードを埋め込む方法を見てみましょう。
ウェブサイトのサイドバーまたはフッターにレスポンシブTwitterエンベッドを追加する
次の選択肢は、Twitterウィジェットを使用して、ウェブサイトのサイドバーやフッターエリアに反応の良いツイートを表示することです。
前回の方法と同様、今回もライブエディターを使うことができる。
ライブフィードエディターでフィードを開きたい場合は、まずWordPressダッシュボードからTwitterフィード " すべてのフィード メニューを開きます。
その後、埋め込みたいTwitterフィードをクリックする。
ご覧の通り、ライブフィードエディターでTwitterフィードを再度開くのはとても簡単です。
そこから、上部にある埋め込みボタンをクリックして始めてください。
このポップアップを使って、レスポンシブなツイートを表示する新しいTwitterウィジェットを作成できます。
次に、ポップアップ上の「ウィジェットに追加」 ボタンをクリックします。
これで、プラグインがあなたのサイトのウィジェットページを開き、そこにTwitterフィードウィジェットを追加することができます。
そこで、ツイートの場所を選ぶことができる。
レスポンシブTwitterエンベッドをサイドバーに表示したい場合は、サイドバーパネルを クリックしてください。
また、「フッター」をクリックすると、ウェブサイトのフッターにツイートを表示することができます。
この例では、WordPressのサイドバーを使います。
新しいウィジェットを追加するには、下部にあるプラスアイコン（+）を クリックします。
その後、利用可能なオプションからTwitterフィードウィジェットを選択して続行します。
更新ボタンをクリックすれば、Twitterフィードの埋め込みが完了します。
これだけで、サイドバーやフッターエリアにレスポンシブTwitterエンベッドのフィードを設置することができる。
そうだ！
このように、Twitter Feed Proを使えば、レスポンシブTwitterエンベッドをサイトに追加するのはとても簡単です。
関連性の高いツイートを表示することで、訪問者の興味を引き、Twitterのフォロワーを増やし、コンバージョンを高めることができます。
レスポンシブTwitterフィードを埋め込みたいですか？Twitter Feed Proはこちらから！
ここにいる間に、ツイッターでお金を稼ぐ最高の方法のリストをチェックするのをお忘れなく。
この記事が役に立ったと思われた方は、フェイスブックや ツイッターでソーシャルメディアのヒントを探してみてはいかがだろうか。
