ツイッターのタイムラインをウェブサイトに埋め込む方法【簡単ガイド
ホーム ブログ ツイッターのタイムラインをウェブサイトに埋め込む方法【簡単ガイド

ツイッターのタイムラインをウェブサイトに埋め込む方法【簡単ガイド

ツイッターのタイムラインをウェブサイトに埋め込む方法

ウェブサイトにTwitterのプロフィールを埋め込みたいですか?

Twitterのプロフィールを表示することは、あなたのウェブサイトから新しい「いいね!」、返信、フォロワーを獲得するための最も簡単な方法です。

このチュートリアルでは、コーディング不要で簡単にTwitterのプロフィールを埋め込む方法を紹介します。

このガイドの内容は以下の通りです。スキップしたい場合は、セクションをクリックしてください。

始めよう!

なぜTwitterプロフィールをサイトに埋め込むのか?

自分のプロフィールから最近のツイートを埋め込むことで、ウェブサイトの訪問者を簡単に新しいフォロワーに変えることができる。

あなたのサイトにいる人はすでにあなたのコンテンツに興味を持っているので、あなたのTwitterアカウントをフォローする可能性が高くなります。

さらに、他のTwitterユーザーのコンテンツをウェブサイトに埋め込むこともできます。サイトに関連性の高いツイートや写真、ビデオを掲載することで、訪問者の興味を引くことができます。

また、Twitterプロフィールから最新のニュースやお知らせをハイライトすることもできます。その結果、あなたのサイトにいるすべての人が、あなたのビジネスに関する最新情報を得ることができます。

さらに、他の人のTwitterプロフィールから、レビュー、体験談、製品デモなどのユーザー生成コンテンツを表示することもできます。これは社会的証明として機能し、訪問者にあなたから購入するよう説得することができます。

twitterレビューフィードの例

そして、人々があなたのウェブサイトに多くの時間を費やすようになれば、SEO対策も格段に向上します。そのため、あなたのウェブサイトはさらに多くの潜在顧客に簡単にアプローチできるようになるのです。

Twitterのコンテンツを埋め込むべき理由がわかったところで、簡単な方法でTwitterのプロフィールを埋め込む方法を見ていきましょう。

WordPressにTwitterプロフィールを埋め込む最も簡単な方法

Twitterプロフィールを埋め込む場合、2つの異なるオプションを試すことができます:

  • 手動の方法:Twitter公式の埋め込みコードジェネレーターを使い、コードを微調整してから、あなたのウェブサイトに直接追加してください。
  • 簡単な方法 Twitterプラグインを使えば、サイトにTwitterのプロフィールを自動的に埋め込むことができる。

手動で行う場合は、ブラウザでpublish.twitter.comを開き、Twitterプロフィールを埋め込むためのHTMLコードを生成する必要があります。

そのHTMLコードをウェブサイトに挿入すれば、ようやくそのプロフィールからのツイートを表示できるようになる。

お分かりのように、この方法は複雑な埋め込みコードを管理しなければならないので、混乱するかもしれません。

その上、サイトに埋め込んだツイッターのプロフィールを追跡する方法もない。

さらに、ツイッターのプロフィールはウェブサイトのテーマのデザインにマッチしないので、ブランディングと衝突する可能性がある。

また、ツイートの見栄えをカスタマイズしたい場合は、手動でコードを編集するか、開発者を雇う必要がある。

Twitter Feed Proを使えば、ウェブサイトにTwitterのプロフィールを簡単に埋め込むことができます。

ツイッターフィード埋め込みプラグイン

このプラグインを使えば、HTML、CSS、Javascript、iFrameは一切不要で、わずか数分でWordPressサイトにTwitterのコンテンツを表示することができます。

さらに、埋め込んだTwitterのコンテンツはすべて、あなたのウェブサイトのデザインを自動的にコピーします。そのため、あなたのTwitterプロフィールは、ブランドの外観と完全に一致します。

また、Twitter Feed Proには詳細なカスタマイズオプションが用意されており、Twitterフィードがウェブサイトにどのように表示されるかを設定することができます。Twitterプロフィールがあなたのウェブサイトにどのように表示されるか、ライブプレビューで確認することもできます。

Twitter Feed Proのもう一つの大きな特徴は、Twitterフィードのキャッシュコピーを自動的に保存することです。そのため、毎回フィードをゼロから読み込む代わりに、保存したコピーをサイトに表示することができます。

その結果、ウェブサイトの読み込みが格段に速くなり、SEO対策も万全になる。

一番の魅力は?Twitter Feed Proには、専門家チームによる質の高いサポートが付属しています。

15万人以上のアクティブユーザーから 4.9/5つ星の評価を得ているTwitter Feed Proは、本当に市場で最高のTwitterフィードプラグインです。

このように、Twitterのソーシャルメディアコンテンツを埋め込むことで、訪問者の関心を引き、Twitterのフォロワーを大量に獲得し、コンバージョンを高めることができます。

Twitterのプロフィールをサイトに埋め込む準備はできましたか?今すぐTwitter Feed Proを入手してください

Twitterのプロフィールを埋め込む最も簡単な方法がわかったところで、以下のチュートリアルを始めましょう。

ツイッターのタイムラインをウェブサイトに埋め込む方法

Twitter Feed Proを使ってTwitterプロフィールを埋め込むには、以下のステップバイステップのガイドに従うだけです:

始めよう!

ステップ1: Twitter Feed Proプラグインをダウンロードする

最初のステップは、ここでTwitter Feed Proを入手し、WordPressウェブサイトにプラグインをインストールすることです。

方法がわからない場合は、WordPressプラグインのインストール方法をご覧ください。

プラグインをインストールして有効化したら、ステップ2に進んでTwitter Feed Proを使い始めましょう。

ステップ2:新しいTwitterフィードを作成する

このプラグインを使って、あなたのウェブサイトに新しいTwitterフィードを作成する準備ができました。

一番の利点は?プラグインのガイドフローに従うだけで、それができるのだ。

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

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

次に、ウェブサイトに掲載するTwitterフィードの種類を選択できます。続行するには、[User Timeline]を選択し、[Next]ボタンをクリックします。

フィードタイプを選択 twitterr

このプラグインを使ってTwitterフィードを作成したら、次のステップはTwitterアカウントに接続することです。

ステップ3:フィードをTwitterに接続する

Twitterフィードをウェブサイトに埋め込みたい場合は、Twitterアカウントに接続すればよい。

こちらの接続ボタンをクリックしてください。

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

次に、Twitter Feed Proは、ツイートを取得してウェブサイトに表示できるように、アカウントへの読み取り専用アクセスを要求します。

このプラグインはアカウントに変更を加えることはできず、Twitter上の情報を閲覧することしかできません。そのため、Smash BalloonのTwitter Feed Proプラグインを安心してご利用いただけます

Twitter Feed Proに読み取り専用アクセス権を与えるには、アプリの認証 ボタンをクリックします。

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

Twitterアカウントに接続したら、ウェブサイトに表示するTwitterプロフィールを選択できます。

選択したTwitterプロフィールをユーザータイムラインフィールドに入力します。

最後に「Next」ボタンをクリックして進みます。

twitterフィードを埋め込む

Twitterプロフィールフィードのソースを追加したら、ステップ4の準備完了です。そこで、新しいフィードのデザインをカスタマイズできます。

ステップ4: ツイッターのプロフィールフィードをカスタマイズする

プラグインは自動的にあなたのウェブサイトのデザインにマッチするので、あなたのTwitterフィードはあなたのブランドに完璧にフィットします。

その上、ツイッターのプロフィール・フィードを細かくカスタマイズすることもできる。

まず、このプラグインには7つのフィードテンプレートが用意されています。フィードに使いたいものを選んでください:

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

フィードテンプレートを選択したら、「次へ」をクリックします。

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

このプラグインはライブフィードエディタを開くので、Twitterフィードをさらにカスタマイズできる。

エディタの左側にカスタマイズオプションがあります。そこから、Twitterフィードのレイアウト、背景、色、ヘッダーのスタイル、ボタンのデザインなどを設定できます。

エディタの右側には、Twitterフィードのリアルタイムプレビューが表示されます。これで、あなたの変更を簡単に追跡することができます。

ライブフィードエディタ

ライブフィードエディタを使って、ウェブサイト上のツイートのレイアウトを変更できるようになりました。

左側のフィードレイアウトオプションをクリックしてください。

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

プラグインは、あなたのTwitterフィードに使用できる3つの異なるレイアウトを表示します:

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

以下、それぞれのレイアウトを見ていこう:

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

リストレイアウトを選ぶと、ツイートは公式Twitterフィードのような1列に表示されます。

さらに、このレイアウトを採用することで、ツイートがより目立つようになります。

ツイッターフィードのレイアウト

ツイートを複数のカラムで表示したいですか?その場合は、代わりにメイソンレイアウトを 選択してください。

おまけに、このレイアウトを使えば、大量のツイッター投稿を一度に表示できる。

ワードプレスのツイッターフィード例

次に、Twitterのコンテンツをスライドショーのカルーセルに 配置するカルーセルレイアウトがあります。

インタラクティブな上に、このレイアウトを使えばスペースを取らずに大量のツイートを表示できる。

カルーセル・ツイッター・フィード

お好きなレイアウトを選択したら、「保存」ボタンをクリックしてください。

ツイッターフィードをもっとカスタマイズしたいですか?その場合は、一番上のカスタマイズボタンをクリックしてください。

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

これで、Twitterプロフィールフィードの色を変更する準備が整いました。ライブフィードエディターを使えば、とても簡単です。

まず、左側の配色 オプションをクリックします。

配色オプション twitter feed pro

次に、フィードの色を簡単に変更できる4種類の配色をご覧ください:

  • テーマから継承する: WordPressテーマの色をコピーする
  • 明るい: 明るい背景色と暗いフォントを表示
  • ダーク:背景に濃い色を選び、文字色を薄くする。
  • カスタム: すべての色を手動で選択

配色を選択したら、変更を保持するために保存を クリックすることを忘れないでください。

ツイッターで配色を選ぶ

残りのカスタマイズオプションを使って、Twitterフィードのヘッダーデザイン、ボタンの追加、ツイート数、ライトボックス設定などを変更できます。

フィードの見た目に満足したら、もう一度「保存 」をクリックします。

最後に、ステップ5でこのツイッター・プロフィールをウェブサイトに埋め込む準備ができた。

ステップ5:ウェブサイトにTwitterプロフィールを埋め込む

Twitter Feed Proは、WordPressサイトにTwitterプロフィールを表示する2種類の方法を提供します:

  • WordPressページにTwitterプロフィールを埋め込む
  • WordPressのサイドバーまたはフッターにTwitterプロフィールを埋め込む

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

WordPressページにTwitterプロフィールを埋め込む

Twitter Feed Proはとても使いやすいので、ライブフィードエディタから直接フィードを埋め込むことができます。

埋め込みボタンをクリックするだけです。

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

新しいポップアップでは、Twitterフィードをサイトに追加するさまざまな方法を見つけることができます。

今回はページに埋め込むので、Add to a Pageを クリックして続けます。

ページに追加する

ポップアップには、ウェブサイト上のすべてのWordPressページのリストが表示されます。

オプションからページを選択したら、追加 ボタンをクリックします。

新しいページにツイッターフィードを追加する

これで、WordPressの公式エディターでページが開くのが見えます。ここでは、コンテンツブロックを使ってTwitterフィードを埋め込むことができます。

まず、プラス(+)アイコンをクリックして新しいブロックを追加します。

新しいブロック・コンテンツ・ブロックを追加する

上部の検索バーを使って「twitter feed」ブロックを探すことができる。

最後に、下の検索結果からTwitter Feedウィジェットをクリックする。

ワードプレスサイトにツイッターフィードを埋め込む

Twitterタイムラインウィジェットをライブにする準備ができたら、更新ボタンをクリックしてください。

今すぐウェブページを開くと、ウェブサイトの訪問者にツイッターのプロフィールがどのように見えるかを見ることができます。

ウェブサイト上のツイッターフィードの例

WordPressのページにTwitterのプロフィールを埋め込んだところで、次はTwitterのコンテンツを埋め込む方法を見てみましょう。

WordPressのサイドバーやフッターにTwitterプロフィールを埋め込む

Twitterウィジェットを使って、選択したTwitterプロフィールからのツイートを埋め込むこともできる。前のオプションのように、あなたはライブフィードエディタからこれを行うことができます。

まず、WordPressダッシュボードからTwitterフィード " すべてのフィードメニューに移動し、先ほどのTwitterフィードをクリックします。

すべてのフィードを開く ツイッターフィード

ご覧の通り、ライブフィードエディターでフィードを開くのはとても簡単です。以前のように、Twitterフィードを自由にカスタマイズすることができます。

上部の埋め込み ボタンをクリックすると、Twitterフィードの埋め込みを開始できます。

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

ポップアップから、Twitterプロフィールを埋め込む場所を選択できます。

続行するには、そこで「ウィジェットに追加」ボタンをクリックする。

ウィジェットにtwitterフィードを追加

そうすると、Twitter Feed Proがサイトのウィジェットページに 移動します。このページでWordPressウィジェットの追加、削除、管理ができます。

まずはじめに、Twitterプロフィールを埋め込む場所を選択します。

サイドバーエリアに埋め込みたい場合は、サイドバーパネルを クリックしてください。

サイドバーパネルを開く

以下、WordPressのサイドバーを例に説明する。

サイトのフッター部分にTwitterプロフィールを表示したい場合は、代わりにフッターパネルを クリックしてください。

フッターパネルを開く

サイドバーまたはフッターに新しいウィジェットを追加するには、下部にあるプラスアイコン(+)をクリックします。

最後に、オプションからTwitter Feedウィジェットをクリックし、Twitterプロフィールを埋め込みます。

ワードプレスにツイッターフィードウィジェットを追加

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

どのように見えるか見たいですか?あなたのサイトを開くだけで、あなたのツイッターのプロフィールが埋め込まれて、誰でも見ることができます。

ウェブサイトにtwitterフィードウィジェットを埋め込む

それで終わりだ! 

数クリックでウェブサイトにTwitterプロフィールを埋め込む方法がわかりました。Twitter Feed Proを使えば、WordPressサイトにツイートを表示するのがこれまで以上に簡単になります。

Twitterのプロフィールフィードを埋め込みたいですか?こちらからTwitter Feed Proを入手できます

Twitterをウェブサイトに統合する方法をもっと知りたい方は、ウェブサイトに埋め込むのに最適なTwitterウィジェットのリストをご覧ください。

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

コメントを追加する

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