Oxygen BuilderにX(Twitter)のプロフィールを追加する方法(簡単ガイド)
ホーム ブログ Oxygen BuilderにX(Twitter)のプロフィールを追加する方法(簡単ガイド)

Oxygen BuilderにX(Twitter)のプロフィールを追加する方法(簡単ガイド)

酸素ビルダーにtwitterxのプロフィールを追加する方法

オキシジェン・ビルダーを使い始めた当初は、ウェブサイトのデザインを自由にコントロールできるところが気に入っていました。しかし、X(Twitter)コンテンツを追加する際にすぐに障害にぶつかりました。

時間がかかるだけでなく、WordPressのデフォルトの方法は見た目がひどいか、私がOxygenで構築したカスタムデザインにマッチしていませんでした。

Oxygen Builder サイトを利用していて、X(Twitter)のコンテンツを紹介したいと考えているなら、おそらく同じような悩みを抱えていることでしょう。

X(Twitter)のプロフィールを適切に追加することで、エンゲージメントを高め、サイトのコンテンツを常に新鮮に保つことができますが、ほとんどのソリューションは、Oxygenの独自のアプローチと相性が良くありません。

X(Twitter)のプロフィールをOxygen Builderのサイトに組み込むために、私が実際に使っている具体的な方法をご紹介します。この5つのステップからなる手順は、いつだって確実にうまくいき、完了までほんの数分しかかかりません。

OxygenウェブサイトにX(Twitter)フィードを追加する最も簡単な方法

Oxygen Builderは、ウェブサイトのデザインを完全にコントロールできる人気のWordPressページ・ビルダーです。

従来のWordPressテーマとは異なり、Oxygenではコードに触れることなくカスタムレイアウトを構築することができます。

酸素ビルダー サイトビルダー

しかし、このカスタム・アプローチは、ソーシャルメディア・コンテンツを追加するための標準的なWordPressの方法が、しばしば正しく機能しなかったり、場違いなものに見えたりすることを意味する。

そのため、X(Twitter)のコンテンツを手作業で埋め込むのに多大な時間と労力を費やしたにもかかわらず、結局、自分のウェブサイトにまったく合わないX(Twitter)のプロフィールフィードになってしまう可能性があります。

その代わりに、WordPressのプラグインを使って、X(Twitter)のコンテンツを自動的に取得し、Oxygen Builderに追加することができます。

世の中に数あるX(Twitter)フィードプラグインの中から、このガイドでは「X (Twitter) Feed Pro」を採用しました。

ツイッター・フィード・プロ ホームページ

X(Twitter)Feed Proが競合他社と一線を画す理由はいくつかあります:

  • 互換性:X(Twitter)Feed Proは、Oxygen Builderやその他の人気サイトビルダーと完全に連携します。
  • 最新のコンテンツを表示:このプラグインは、フィードを最新のXの投稿で自動的に更新し続けます。
  • 軽量:このツールはスピードを重視して作られているため、Oxygenウェブサイトはこれまでと同じように速く読み込まれます。
  • あなたのウェブサイトにマッチします: フィードは自動的にあなたのOxygen Builderウェブサイトのデザインをそのままコピーします。
  • 高度なカスタマイズ機能: あらかじめ用意されたテンプレートに加え、ライブカスタマイザーも利用できるので 、X(Twitter)のプロフィールフィードを細部まで自由にデザインできます 。

このツールを選ぶもう一つの大きな理由は、カスタマーサポートの質である。自分で確認するために、あなたはここでユーザーレビューを見て、人々がサポートチームについてどう思うかを見ることができます。

ユーザーレビュー

利用できる機能は豊富で、すぐに使いこなせるようになっています。以下では、OxygenウェブサイトにX(Twitter)のプロフィールを追加する手順を順を追って説明します。

Oxygen BuilderにX(Twitter)のプロフィールを追加する方法

以下の手順では、「X (Twitter) Feed Pro」を活用して、Oxygen BuilderのサイトにX(Twitter)のコンテンツを追加するのがいかに簡単かをご紹介します。

ステップ 1: X (Twitter) Feed Pro のインストールと有効化

まず、こちらのリンクから「X (Twitter) Feed Pro」プラグインを入手し、ウェブサイトにインストールしてください。

WordPressのプラグインをインストールし、有効化する方法については、こちらのステップバイステップガイドをご覧ください。

ステップ2:X(ツイッター)フィードの作成

今すぐWordPressのダッシュボードから始めることができます。

Twitterフィード " すべてのフィード メニューを開き、新規追加ボタンをクリックします。

カスタムツイッターフィードを追加

それが終わったら、作成したいX(Twitter)フィードの種類を選択できます:

  • ユーザーのタイムライン:選択したX(Twitter)プロフィールからのX件の投稿を表示する
  • ハッシュタグ:選択したハッシュタグが付いた投稿をX件表示する
  • 検索:検索語を選んで検索結果を埋め込む

ここではユーザータイムラインを取り上げるが、フィードタイプでもプロセスは同じだ。

フィードの種類を選択したら、「次へ」をクリックします。

フィードの種類

ステップ3:X(Twitter)のプロフィールを連携する

X(Twitter)のプロフィールを連携させると、プラグインが関連するXの投稿を取得し、サイトに表示できるようになります。手順も簡単で、あっという間に完了します。

開始するには、ポップアップの接続 ボタンをクリックします。

ツイッターアカウントをワードプレスに接続

そうすると、プラグインによってウェブブラウザでX(Twitter)が開きます。

ここから、Authorize appをクリックしてプロフィールを接続します。

ツイッターの読み取り専用アクセスを許可する.jpg

そうすると、元のウェブサイトに戻ります。これで、フィードに表示するX(Twitter)のプロフィール、ハッシュタグ、または検索キーワードを選択できるようになります。

この例では、X(Twitter)のユーザー名を入力してみます。

ここに情報を入力し、「次へ」をクリックするだけです。

twitterフィードを埋め込む

ステップ4:X(Twitter)のフィードをカスタマイズする

新しく作成したX(Twitter)のプロフィールフィードには、Oxygenウェブサイトのデザインが自動的に反映されます。ウェブサイトのデザインや配色を慎重に選んでおけば、大幅な時間の節約になります。

さらに、テンプレートをインポートすることで、X(Twitter)のフィードのデザインを素早く変更することもできます。

ユニークなレイアウトの7種類のオプションからお選びいただけます。

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

テンプレートを選んだら、「Next」をクリックする。

フィードテンプレートを選択する

テンプレートをインポートした後、ライブエディターを使ってさらにデザインをカスタマイズすることができます。

このエディターからレイアウト、ヘッダー、ボタンデザイン、フォントサイズ、配色などを変更できます。

どのように機能するのか、興味深いオプションをいくつか紹介しよう。

ライブフィードエディタ

まずは、Xの投稿のレイアウトを変更してみましょう。

左からフィードレイアウトオプションを開いて開始します。

フィードレイアウトオプション

そうすると、左側のパネルにさらなるカスタマイズ・オプションが表示されます。

フィードのレイアウトは3種類から選ぶことができる:

  • リスト:公式ウェブサイトのように、X(Twitter)のプロフィールを1列で表示する
  • Masonry:行と列を使って、大量のX投稿を一度に表示する
  • カルーセル:Xの投稿を、インタラクティブなスライドショーとしてサイトに埋め込む

レイアウトを選び、「保存」をクリックして変更を確定します。

フィードレイアウトを選ぶ

行や列の数など、他のレイアウトオプションもここから変更できます。変更が終わったら保存するのを忘れないように。

続行するには、「カスタマイズ」をクリックします。

カスタマイズ・オプションのツイッターに戻る

さて、レイアウトの設定が終わったところで、色をカスタマイズする方法を紹介しよう。

左側のパネルから、配色 オプションを選択します。

配色オプション twitter feed pro

素早く色を変えられるように、好みの配色を選ぶことができる:

  • テーマから継承します: Oxygenウェブサイトの色をコピーする
  • 明るい: 明るい背景に暗いフォント
  • Dark:暗い背景と明るいフォント
  • カスタム: 手動で色を選ぶ

前回同様、色の設定が終わったら、変更を保存することを忘れないでください。

ツイッターで配色を選ぶ

残りのオプションを使って、X(Twitter)のフィードを細かくカスタマイズすることができます。ご覧の通り、ライブエディタはとても使いやすく、変更内容をすべて簡単に把握することができます。

デザインを保存したら、いよいよ最後のステップに進む。

ステップ 5:Oxygen Builder に X(Twitter)のプロフィールを埋め込む

上部にある「埋め込み」ボタンを クリックすると、このX(Twitter)フィードの埋め込みを開始できます。

ツイッターフィードを埋め込む

これにより、X(Twitter)フィードのすべての埋め込みオプションが表示されたポップアップが開きます。ここから、このフィードをページ、サイドバー、またはフッターに追加できます。

Oxygen Builderの場合は、代わりにCopyをクリックすることができます。

twitterフィードのショートコードをコピーする

X(Twitter)のフィードを表示させたい特定のOxygen Builderページがある場合は、今すぐそのページを開いてください。

代わりに新しいページを使うには、ダッシュボードエリアからページ " 新規追加 メニューを開いてください。

次にテンプレート編集をクリックし、オキシジェン・ビルダーでページを開きます。

酸素ビルダーのページを編集する

このページにコンテンツを追加するには、左上のプラス(+)アイコンをクリックします。

酸素ビルダーに新要素を追加

それをクリックすると、検索バーのある新しいパネルが表示される。

バーに"shortcode "と入力し、下のショートコード ・ブロックをクリックするだけです。

ここで、Full Shortcode フィールドを探し、先ほどのショートコードを貼り付ける。

そうすれば、「X (Twitter) Feed Pro」がこのページにX (Twitter)のプロフィールを自動的に埋め込みます。

酸素にYoutubeショートコードを追加する

このページに他のコンテンツを自由に追加してください。オキシジェン・ビルダーはとても使いやすく、1行もコードを触ることなく多くのことができます。

見た目に満足したら、公開して、訪問者がXの投稿を閲覧できるようにしましょう。

diviサイトでのtwitterフィードの例

これで、Oxygen BuilderのウェブサイトにX(Twitter)のプロフィールフィードが表示されるようになりました。関連性の高いXの投稿を表示することで、訪問者の関心を維持しつつ、同時にソーシャルメディアでの存在感を高めることができます。

さらに、このプラグインを使えば、商品への好意的なレビューを埋め込んだり、ユーザーが作成したコンテンツを表示したりすることも可能です。ご覧の通り、「X (Twitter) Feed Pro」は、ソーシャルメディアマーケティングのツールキットに加えるのに最適なツールです。

実際に試してみたい方は、こちらから「X (Twitter) Feed Pro」を入手できます。

X(Twitter)をさらに活用したい場合は、当社が厳選したX(Twitter)向けマーケティングツールのリストをご覧ください。

その他のソーシャルメディア・ガイドとチュートリアル

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。