ElementorのウェブサイトにX(Twitter)の最新投稿を数分で表示したいですか?
ElementorにXフィードを追加することで、サイトをダイナミックに保ち、訪問者の興味を引き、WordPressサイトからソーシャルフォロワーを増やすことができます。
Xではタイムラインの流れが速いため、ウェブサイト上でリアルタイムの最新情報を表示することで、より多くの人に情報を届け、ブランドの信頼性を高めることができる。
しかし、あなたのX(Twitter)フィードをElementorで完璧に表示させるのは、特にあなたがコーダーでなかったり、WordPressプラグインに慣れていなかったりすると、厄介な場合があります。
Elementorのサイトに独自のXフィードを追加しようとした初期の頃、手っ取り早く初心者に優しい方法を見つけるまでに、いくつかのハードルにぶつかった。
スマッシュ・バルーンでの経験から、WordPressサイトとX(Twitter)やその他のソーシャル・プラットフォームを簡単に接続することができ、どのようなスキルレベルにも対応できる最も簡単なソリューションを見つけました。
この記事では、ElementorにX(Twitter)フィードを追加する正確な手順を5分で説明します。
この記事で
なぜElementorのTwitterフィードを表示するのか?
人気のWordPressウェブサイト構築プラグインであるElementorは、美しいウェブサイトを簡単にデザインするのに役立ちます。シンプルなドラッグアンドドロップエディタを使用して、コーディング不要で簡単にページを作成できます。
さらに、Elementorアドオンを入手すれば、WordPressウェブサイトにさらに多くの機能を追加できます。
しかし、プレミアムアドオンをたくさん購入したくない場合、Elementorサイトをさらに魅力的にする簡単な方法があります。
ElementorサイトにX(Twitter)フィードを埋め込むだけです。そうすることで、訪問者に関連性の高いツイートを表示することができ、ウェブサイトでの滞在時間を長く保つことができます。
さらに、ElementorのTwitterフィードがあなたのビジネスの成長に役立つ方法をいくつかご紹介します:
- TwitterのタイムラインをElementorに埋め込むことで、Twitterのフォロワー、リツイート、いいね!などを大量に獲得するためにサイトのトラフィックを利用することができます。
- Twitterフィードを使えば、Twitter上の実際の人々からのレビューや証言を表示することができます。この社会的証明は、訪問者を有料顧客に変えるのに役立ちます。
- フィードを使って自分のツイートを投稿できるので、最新ニュースやお知らせが一目瞭然。
- あなたのブランドハッシュタグを宣伝するために、Elementorのウェブサイトにハッシュタグツイッターフィードを表示することができます。
全体として、TwitterフィードはあなたのElementorサイトに素晴らしいアクセントを加えることができ、あなたのブランドを宣伝するのに役立つ素晴らしい方法です。
それでは、WordPressのTwitterフィードをサイトに埋め込む最も簡単な方法を見てみましょう。
ElementorのTwitterフィードを埋め込む最も簡単な方法
Twitterのコンテンツをウェブサイトに埋め込むには、2つの方法があります:
- 手動の方法:Twitterフィードの埋め込みコードを作成し、手動でウェブサイトにコードを追加します。
- 自動的な方法: WordPressのプラグインを使えば、Twitterのフィードを自動的にウェブサイトに埋め込むことができます。
手動の方法を選んだ場合、Twitterフィードを準備する際に多くのコードスニペットを扱わなければならないことになります。その結果、ツイッターのソーシャルフィードをサイトに表示するのに多くの時間と労力がかかることになります。
さらに、HTML埋め込みコードをサイトに追加する際に何か問題が発生しても、サポートチームが助けてくれることはない。
Elementorサイトにツイートを埋め込むより簡単な方法は、Smash Balloon Twitter Feed ProのようなWordPressプラグインを使うことです。
世界最高のTwitterフィードプラグインであるTwitter Feed Proを使えば、ElementorのウェブサイトにTwitterフィードを簡単に作成、カスタマイズ、埋め込むことができます。
プラグインに付属しているシンプルなガイドフローを使えば、簡単に始めることができます。
HTMLやCSSなどのコードは一切不要です。
さらに、Twitterタイムライン、ハッシュタグフィード、検索結果、ホームタイムラインなど、表示するTwitterコンテンツの種類を選ぶことができます。
さらに、Twitterのフィードをウェブサイトに表示する方法もコントロールできます。ユニークなデザインのフィードテンプレート集から選ぶことができます。
より詳細なカスタマイズのために、あなたは、単にあなたのTwitterフィードのデザインを変更するには、ライブフィードエディタを使用することができます。レイアウト、カラースキーム、ヘッダーデザイン、ツイートスタイル、ロードモアボタンなどを設定できます。
さらに、Twitter Feed Proにはスマートキャッシュ機能が搭載されており、Twitterフィードのコピーが保存されます。そのため、あなたのサイトにはそのコピーが表示され、毎回ゼロからTwitterフィードを読み込む必要はありません。
その結果、ツイッターのフィードはこれまでと同じように速くなり、読み込みの速いウェブサイトはSEO対策にもなり、上位に表示される可能性があります。
これらの機能により、このプラグインは市場で最高のTwitterフィードプラグインとなり、15万人以上のアクティブユーザーから 4.9/5つ星の評価を得ています。
ElementorのTwitterフィードを簡単に作成したいですか?今すぐTwitter Feed Proを入手しましょう!
では、このプラグインを使ってElementorのTwitterフィードを作成する方法を見てみましょう。
ElementorのTwitterフィードをWordPressに追加する方法
ElementorでTwitterフィードを作成するには、以下の簡単な手順に従うだけです。さっそく始めましょう!
ステップ 1: Smash Balloon Twitter Feed Pro プラグインをダウンロードする
まずはこちらからTwitter Feed Proプラグインを入手し、あなたのウェブサイトにインストールしてください。
その方法がわからない場合は、WordPressプラグインのインストール方法に関するこの簡単なガイドに従ってください。
次に、Twitter Feed Proを使ってウェブサイトのTwitterフィードを作成します。
ステップ2:X(ツイッター)フィードの作成
Twitterフィードを作成するには、3ステップのガイドフローに従うだけです。
まず、ダッシュボードからTwitter Feed " All Feeds メニューに移動し、Add Newをクリックします。
次に、Elementorウェブサイトに追加するTwitterフィードのタイプを選択できます。以下の6つのオプションから選択できます:
- ユーザーのタイムライン 特定のTwitterプロフィールのツイートとリツイートを表示します。
- ハッシュタグ選択したX(ツイッター)のハッシュタグが付いたツイートを埋め込む
- ホームタイムライン Twitterのホームタイムラインをウェブサイトに表示する
- 検索:特定の用語を検索し、その結果をサイトに埋め込む。
- メンションあなたのXプロフィールに言及したツイートを表示
続行するには、ここでフィードの種類を選択し、[次へ]ボタンをクリックします。
この例では、ユーザータイムラインフィードタイプを 使用します。
新しいフィードを作成したら、ステップ3に進み、Twitterに接続する。
ステップ3: ツイッターのタイムラインに接続する
Twitterアカウントと連携することで、Twitterのコンテンツをウェブサイトに埋め込むことができます。
ポップアップの接続 ボタンをクリックするだけで、すぐに始められます。
プラグインはTwitterを開き、Twitterアカウントへの読み取り専用アクセスを許可する。
そのアクセスを使って、Twitter Feed ProはTwitterに接続し、そこのコンテンツを表示します。さらに、あなたのアカウントに変更を加えることは一切できません。
このように、Twitter FeedProは安全に使用できます。
アカウントの接続を完了するには、ここでAuthorize app ボタンをクリックします。
次に、Twitterフィードに使用するソースを選びます。フィードの種類にもよりますが、ユーザーのタイムライン、ハッシュタグ、検索ワード、Twitterリストなどが考えられます。
タイムラインを埋め込むので、「starbucks」のTwitterプロフィールをソースとして追加しました。
ソースを入力したら、Nextをクリックして続けます。
このように、TwitterフィードはElementorウェブサイトにコンテンツを埋め込む準備ができました。
その前に、ステップ4で新しいツイッターフィードのデザインをカスタマイズしましょう。
ステップ4: ツイッターのタイムラインフィードをカスタマイズする
Twitterフィードは、あなたのサイトのデザインを自動的にコピーし、すぐに見栄え良く表示されます。しかし、もっとデザインをコントロールしたい場合は、Twitter Feed Proをご利用ください。
まずは、あらかじめ用意されているフィードテンプレートをインポートしてみましょう。インポートできるフィードテンプレートは以下のとおりです:
- デフォルト
- 石工カード
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新ツイート
- X(ツイッター)ウィジェット
フィードテンプレートを選択したら、「次へ」 ボタンをクリックします。
次に、ライブプレビュー付きのビジュアルフィードエディタを使って、Twitterフィードを詳細にカスタマイズできます。
左側には、フィードのレイアウト、ツイートのスタイル、色、ヘッダーのスタイル、もっと読み込むボタンなどを変更するオプションがあります。
左側で何か変更を加えるたびに、右側のライブプレビューを使ってTwitterフィードがどのように見えるかを追跡することができます。
Elementorサイトでのツイートの表示方法を変更するには、左側のフィードレイアウトオプションをクリックします。
Twitter Feed Proには、新しいフィードのための3つの異なるオプションが用意されています:リスト、メイソンリー 、カルーセルです。
以下、それぞれのレイアウトを見ていこう。
リストレイアウトを使えば、ウェブサイト上でツイートを1列に表示することができます。
そうすることで、あなたのツイートを訪問者にはっきりと見せることができる。
また、ツイートを複数のカラムで表示するメイソンレイアウトという方法もある。
この方法なら、一度に大量のツイートを簡単に表示できる。
Twitterのカルーセルレイアウトを採用すれば、ツイートをフィードカルーセルとしてサイトに表示することができる。
あなたのサイトをさらに魅力的なものにする素晴らしい方法です。
新しいフィードレイアウトを確認するには、上部にある「保存」ボタンを忘れずにクリックしてください。
レイアウトの設定が終わったら、カスタマイズを クリックしてメインのカスタマイズオプションに戻ります。
次に、ライブエディターを使ってTwitterフィードの色を変更することができます。
そのためには、左の配色 オプションをクリックすればいい。
Twitter Feed Proでは、フィードの配色を4種類から選ぶことができます:
- テーマから継承する: ウェブサイトの色をコピーする
- 明るい: 明るい背景と暗いフォントを表示
- ダーク:暗い背景と明るいフォントを選ぶ。
- カスタム: すべての色を手動で選択
配色を選択したら、もう一度「保存」ボタンをクリックします。
最後に、残りのオプションを使って、ツイートのスタイル、ツイート数、タイポグラフィ、ヘッダーのスタイルなどを変更できる。
Elementor Twitterフィードの外観に満足したら、保存をクリックします。
これで、ステップ5でTwitterフィードを埋め込むことができる。
ステップ 5: ElementorにTwitterフィードを追加する
最後に、このTwitterフィードをWordPressウェブサイトに埋め込む方法です。このプラグインを使えば、ページや投稿、サイドバーやフッターにTwitterウィジェットとして埋め込むことができます。
右上の埋め込み ボタンをクリックしてください。
Twitterフィードの埋め込みオプションのポップアップが表示されます。
とりあえず、コピーボタンをクリックする。
ダッシュボードからページ " 新規追加 メニューに移動して、新しいページを作成できます。
その後、上部にある「Elementorで編集 」ボタンをクリックします。
WordPressの投稿にElementorのTwitterフィードを埋め込みたいですか?
投稿 " 新規追加 メニューから、Elementorで編集ボタンをクリックしてください。
これで、Elementorページビルダーがあなたのサイトで開くのが見えます。左側には、ページや投稿にコンテンツを追加するために使用できるElementorウィジェットが表示されています。
Twitterフィードを埋め込むには、左上の検索バーを探し、"shortcode "と入力する。
すると、下の検索結果にショートコードウィジェットが表示されます。
次に、ショートコードウィジェットを ドラッグして 、左側のページプレビューにドロップします 。
最後に、先ほど入力したTwitterフィードのショートコードを「ショートコードを入力」フィールドに貼り付けます。
Publishを クリックすると、ElementorのTwitterフィードがオンラインになります。
ご覧の通り、このプラグインを使えばTwitterフィードを埋め込むのはとても簡単です。これであなたのウェブサイトを開いて、訪問者にページがどのように見えるかを確認することができます。
これで完成だ!
これでElementorのTwitterフィードをウェブサイトに表示する方法がわかりました。ご覧の通り、Twitter Feed Proを使えばTwitterとElementorを超簡単に統合できます。
訪問者の関心を引き、ツイッターのフォロワーを増やし、売り上げを伸ばすなど、さまざまなことが簡単にできる。
ElementorにTwitterフィードを追加したいですか?今すぐTwitter Feed Proを手に入れましょう!
ソーシャルメディアマーケティングをもっと活用したい方は、ソーシャルフィードウィジェットをウェブサイトに埋め込む方法についてのガイドをご覧ください。
お役に立ちましたか?ソーシャルメディア・マーケティングのヒントやコツをもっと知りたい方は、ツイッターや フェイスブックをフォローしてください。