ウェブサイトにX(ツイッター)のコンテンツを表示する簡単な方法をお探しですか?
Twitterウィジェットを追加することは、訪問者に新鮮で魅力的なTwitterコンテンツを提供する最も効果的な方法の1つです。WordPressにウィジェットを追加する方法はたくさんあり、どこから始めればいいのか迷ってしまいます。
この記事では、2つの異なる方法を使ってWordPressにTwitterウィジェットを追加する方法を紹介します:
本題に入る前に、"Twitterウィジェット "が何を意味するのかを明確にしておこう。
WordPress X(Twitter)ウィジェットとは?
ウィジェット」とは、サイトのサイドバーやフッターなどに追加できるコンテンツのブロックのことです。
ブログを見ていて、サイドバーにサインアップフォームやソーシャルボタンがあるのを見たことがあるだろうか?どちらもウィジェットです。それぞれのウィジェットは、コードを書くことなく、あなたのサイトに機能や特徴を追加します。
Twitterウィジェットは、サイドバーエリアに追加できるTwitterコンテンツのブロックです。
Twitterウィジェットを使えば、ウェブサイトにTwitterのコンテンツを表示し、訪問者の興味を引くことができます。手動でTwitterウィジェットを追加するには、埋め込みコードを扱う必要があり、混乱する可能性があります。
もっと簡単にするには、WordPressのプラグインを使えば、コードをいじる必要がなくなる。
WordPressにX(Twitter)プラグインを使うべきか?
埋め込みコードを扱うのが苦手で、ウィジェットをカスタマイズする簡単な方法をお望みなら、Twitterプラグインを使うのが賢い選択です。
そうすれば、コードを一行も触ることなく、デザイナーを雇うことなく、ウェブサイトに大量のツイッターコンテンツを簡単に表示することができる。
プラグインを使えば、Twitterウィジェットのデザインを微調整することもできます。例えば、いくつかの設定をクリックして、ウィジェットをサイトのテーマやブランディングに合わせることができます。
また、ハッシュタグフィード、カスタム検索、ユーザータイムラインなど、特定のTwitterウィジェット例を表示するのにも役立ちます。
このように、WordPress用のTwitterプラグインを使えば、思い通りのTwitterウィジェットを簡単に作成できる。
WordPressでX(Twitter)ウィジェットを追加する方法
それでは、WordPressにTwitterウィジェットを追加するさまざまな方法を見ていきましょう。
WordPressサイトにTwitterウィジェットを追加するには、2つの方法があります:
- WordPressプラグインを使ってTwitterウィジェットを追加する
- Twitterウィジェットを手動で追加する
以下、この2つの方法を見てみよう:
プラグインを使ってWordPressにTwitterウィジェットを追加する方法
WordPressの投稿やページにTwitterウィジェットを追加するには、Smash BalloonからTwitter Feed Proプラグインをダウンロードする必要があります。
WordPressで最も評価の高いTwitterフィードプラグインとして、Twitterのコンテンツをウェブサイトにシームレスに統合できます。
美しいTwitterフィードを作成するために、ライブフィードエディタが用意されています。ヘッダー、フィードレイアウト、カラースキームなどを設定できます。
さらに、このプラグインは軽量なので、好きなだけツイートを埋め込んでも、サイトの読み込みはこれまでと同じように速くなります。サイトの読み込みが速くなれば、SEO対策にもなり、検索エンジンの検索結果でも上位に表示されるようになります。
美しく、カスタマイズ可能で、レスポンシブなフィードは、あなたのサイトのエンゲージメントを高め、貴重な社会的証拠を追加します。
その結果、Twitter Feed Proは4.9/5つ星の評価を得ており、世界中から15万人以上のアクティブユーザーが利用して います。
Twitter Feed Proを使い始めるには、ここをクリックしてください。
それでは、このプラグインを使ってサイトにTwitterウィジェットを追加する方法を見ていこう。
ステップ1: Twitter Feed Proプラグインをインストールする
まず、Twitter Feed Proを入手し、あなたのウェブサイトにインストールしてください。
方法がわからない?WordPressプラグインをあなたのウェブサイトにインストールするには、以下の手順に従ってください。
ステップ2: 新しいTwitterウィジェットを作成する
プラグインを使ってTwitterウィジェットを作成しましょう。
WordPressのダッシュボードエリアから、Twitterフィード " すべてのフィード メニューに移動し、新規追加ボタンをクリックします。
Twitter Feed Proは、ウェブサイトに表示するTwitterウィジェットのタイプを選択するよう求めます。
これらのオプションから選ぶことができる:
- ユーザーのタイムライン:特定のTwitterプロフィールを選択し、そのツイートを表示します。
- ハッシュタグ: 特定のパブリックハッシュタグにフィルタリングされたコンテンツのフィード
- 検索高度なTwitter検索の結果は、Twitterウィジェットに表示されます。
- リスト Twitterリストを選択し、利用可能なツイートを埋め込む
ここで複数のオプションを選択して、異なるTwitterフィードタイプを1つのウィジェットにまとめることもできます。
続行するには、Twitterフィードの種類を選択し、[次へ]をクリックします。
このチュートリアルでは、ハッシュタグTwitterウィジェットを紹介します。
ステップ3:Twitterアカウントに接続する
Twitter Feed Proを使えば、TwitterアカウントとWordPressを簡単に接続でき、ウィジェットが自動的に更新されます。
開始するには、ポップアップの接続 ボタンをクリックします。
そうすると、プラグインがTwitterを開き、アカウントへの読み取り専用アクセスを要求してくる。
このアクセス権を使用すると、Twitter Feed Proはあなたの情報を閲覧するだけで、変更を加えることは一切できません。
つまり、このプラグインを使っても全く問題ないということだ。
ここでAuthorize appの ボタンをクリックするだけで、読み取り専用アクセスを確認することができます。
そうすると、Twitter Feed Proはあなたを再びあなたのウェブサイトに送り返します。
ハッシュタグ、ユーザータイムライン、Twitterリスト、検索語を追加することで、Twitterウィジェットに表示する内容を選択できるようになりました。
このガイドでは、ウィジェットにハッシュタグを追加します。
ソースを追加したら、「Next」をクリックします。
ステップ4: 新しいTwitterウィジェットをカスタマイズする
カスタマイズを非常に簡単にするために、新しいTwitterウィジェットのテンプレートを選択するだけです。
フィードテンプレートは7種類あり、それぞれユニークなデザインになっている:
- デフォルト
- 石工
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新ツイート
- ウィジェット
Twitterウィジェットに合ったオプションを選択したら、「次へ」をクリックして次に進む。
ライブフィードエディタを使って、新しいTwitterフィードウィジェットのデザインをカスタマイズできます。
左側には、フィードのレイアウト、色、ヘッダーデザイン、ツイートボックスのスタイル、ライトボックスオプションなどを設定するためのカスタマイズオプションがあります。
あなたの変更を追跡するために、右側にあなたのTwitterフィードのライブプレビューがあります。
さっそくカスタマイズを開始し、Twitterウィジェットのレイアウトを設定しましょう。
そのためには、左からフィードレイアウトオプションを 選択するだけです。
Twitter Feed Proでは、3つのフィードレイアウトオプションからお選びいただけます:
- リスト
- 石工
- カルーセル
まず、ツイートを1列に表示するリスト オプションがあります。そうすることで、ツイートがより広く表示されます。
Twitterウィジェットに大量のツイートを一度に表示したいですか?
ツイートを複数の列で表示するメイソンレイアウトを 選ぶこともできる。
また、カルーセルレイアウトを 選択し、あなたのツイートを美しいスライドショーのカルーセルで表示することもできます。
そうすれば、訪問者はTwitterウィジェットとやりとりして、より多くのコンテンツをチェックすることができる。
Twitterウィジェットに合うフィードレイアウトを選択したら、保存 ボタンをクリックするだけです。
ここから、上部にある小さなカスタマイズ ボタンをクリックして、メインのオプションに戻ることができます。
新しいTwitterウィジェットの色を選びたいですか?
次に左側の配色 オプションをクリックします。
ウィジェットの色を選択するには、単に配色を選択することができます。
Twitter Feed Proでは、4つの配色オプションがあります:
- テーマからの継承: テーマの色を自動的にコピー
- ライトTwitterウィジェットに明るい外観を選ぶ
- ダーク:代わりにダークカラーとライトフォントを使用
- カスタム: すべての色を手動で選択
お好みの配色を選択し、再度「保存」ボタンをクリックして変更を確定します。
ライブフィードエディタを使って、ツイートボックスのスタイル、ツイッターヘッダー、もっと見るボタン、フィードサイズなどをカスタマイズすることができます。
Twitterウィジェットの見た目に満足したら、もう一度「保存 」をクリックすることを忘れないでください。
ステップ5:WordPressにTwitterウィジェットを追加する
ライブフィードエディタを使ってTwitterウィジェットを埋め込むのはとても簡単です。さらに、ウィジェットを埋め込むには2つの方法があります:
- WordPressページにTwitterウィジェットを追加する
- サイドバーまたはフッターにTwitterウィジェットを追加する
以下、この2つの方法について見ていこう。
ライブフィードエディターから、上部の埋め込み ボタンをクリックして開始します。
Twitterウィジェットを埋め込む場所を尋ねるポップアップが開きます。
ページに追加 オプションをクリックするだけで、WordPressのページに埋め込むことができます。
ポップアップで、ウィジェットを表示したいページを選択してください。
次に、 下の追加 ボタンをクリックします。
WordPressのブロックエディターでページを開き、Twitterウィジェットを埋め込むことができます。
そのためにはまず、エディターのプラス(+)アイコンをクリックしてコンテンツブロックを追加する。
検索バーで "twitter feed "を探し、下のTwitter Feedウィジェットをクリックする。
これで、あなたのページにTwitterウィジェットが追加されました。
最後に、[公開] または[更新] ボタンをクリックすると、Twitterウィジェットが公開されます。
実際、ウェブサイトを開いて、どのように見えるかをチェックすることができる。
サイドバーやフッターにウィジェットを追加したいですか?
ライブフィードエディターから簡単にできます。
管理画面のダッシュボードエリアから、Twitterフィード " すべてのフィードメニューに移動し、Twitterフィードウィジェットをクリックします。
これにより、ライブフィードエディタにTwitterウィジェットが表示されます。
ウィジェットの埋め込みを開始するには、右上の埋め込み ボタンをクリックしてください。
ポップアップで、今度は「ウィジェットに追加 」ボタンをクリックできます。
これを実行すると、WordPressウェブサイトのウィジェットページに移動します。
このページでは、Twitterフィードウィジェットを埋め込む場所を選択できます。
サイドバーに埋め込むには、サイドバーパネルを クリックしてください。
代わりにフッターを使いたいですか?フッターパネルを クリックしてください。
新しいWordPressウィジェットを追加するには、パネルの下部にあるプラスアイコン(+)を クリックします。
次に、すべてのオプションからTwitterフィードウィジェットを選択します。
最後に「更新」 ボタンをクリックすると、Twitterウィジェットがあなたのウェブサイトのサイドバーに表示されます。
また、フッターを選択した場合は、ウェブサイトの下部にTwitterウィジェットが表示されます。
それでは、Twitterウィジェットをウェブサイトに埋め込む古い方法を見てみましょう。
Twitterウィジェットを手動で追加する方法
最後の方法は、X Publishツールを使用してWordPressにウィジェットを追加する方法です。この方法の欠点は、ウィジェットがサイト上でどのように見えるかをコントロールできないことです。
この方法でTwitterフィードを追加するには、X Publishのウェブサイトにアクセスし、埋め込みたいコンテンツの種類を選択します。
ここではProfileオプションを使用する。
次に、表示したいプロフィールのURLを貼り付け、「次へ」 アイコンをクリックします。
下にスクロールすると、このTwitterウィジェットの表示方法を選ぶことができます。
お好きなボタンデザインを選んでください。今のところ、埋め込みタイムラインの オプションにします。
次のステップは、WordPressサイトに挿入できるコードをコピーすることです。
右の「コードをコピー 」ボタンをクリックしてください。
その後、WordPressで新しい投稿やページを作成することができます。
コードを埋め込むには、エディターのプラス(+)アイコンをクリックして新しいコンテンツブロックを追加します。
次に、上部の検索バーで「カスタムHTML」を検索し、カスタムHTMLブロックをクリックして続行します。
次に、埋め込みコードをブロックに直接貼り付け ます。
新しいページをプレビューすると、Twitterウィジェットは以下の例のように表示されます:
この方法を使えば、サイドバーのウィジェットにフィードを埋め込むことができる。
まず、外観 " ウィジェットに移動し、ウェブサイトのウィジェット管理を開始します。
そうしたら、サイドバーパネルを クリックしてウィジェットを埋め込んでください。
Twitterウィジェットをフッターに追加したいですか?代わりにフッターを クリックしてください。
最後に、プラス(+)アイコンをクリックしてウィジェットを追加し、カスタムHTMLウィジェットをクリックします。
そして、先ほどと同じようにウィジェット内に埋め込みコードを貼り付けます。
最後に、上部にある更新 ボタンをクリックします。
あなたのウェブサイトのフロントに移動すると、フィードは以下の例のように表示されます:
これで完成だ。
これで、WordPressにTwitterウィジェットを追加する方法がわかりました。覚えておくべき重要なことは、3番目の方法では、Twitterフィードのデザイン、レイアウト、コンテンツをあまりコントロールできないということです。
Twitter Feed Proプラグインを使えば、HTMLやJavascript、CSSなどのコーディングは一切必要なく、数回のクリックで簡単にすべての操作が行えます。
Twitterウィジェットを埋め込む準備はできましたか?今すぐTwitter Feed Proを手に入れよう。
ソーシャル・メディア・プラットフォームであなたのブランドを宣伝する他の方法については、ソーシャル・メディア・マーケティングを向上させる方法に関するこのガイドに従ってください。
この記事を楽しんでいただけたなら、ソーシャルメディア・マーケティングのチュートリアルをもっと見るために、ツイッターや フェイスブックで私たちをフォローしてください。