個人での利用はもちろん最近では企業のマーケティングに欠かせなくなったSNSプラットフォームの一つであるTwitterは、新たな情報をタイムリーに共有するのに最適なSNSです。そしてWordPress（ワードプレス）で作ったウェブサイトをお持ちの場合は、Twitterの投稿を簡単に埋め込んで表示することができ、サイト上でもより多くの人に見せることが可能です。
今回は、WordPressウェブサイトにTwitterの投稿ウィジェットを埋め込む方法、Twitterとウェブを連携させることのメリットについて解説します。さらにSNS✕WEB制作ツール『EmbedSocial』のフィード機能を使って、自分のアカウントの投稿や、ハッシュタグで集めた投稿をウェブサイトに表示する方法もご紹介した、広範なガイドとなっていますので、ぜひお役立てください。
目次
- WordPressで作成したウェブサイトにTwitterを埋め込む方法
- プラグインなしでTwitter投稿を埋め込むツールの利用
- WordPressフィードプラグインの利用
- Twitter埋め込みコードの利用
- ショートコードの利用
- EmbedSocialフィード機能を使ってWordPressにTwitterを埋め込む方法
- WordPressにTwitterのハッシュタグフィードを埋め込む
- 複数のTwitterアカウントからTwitterの投稿を埋め込む
- Twitterの投稿フィードをWordPressサイトでおしゃれに表示する方法
- Twitterタイムライン、ハッシュタグのWebサイトへの埋め込みデモ
- WordPressウェブサイトにTwitterを埋め込むメリット
- WordPressへのTwitter投稿埋め込みに関するFAQ
- さいごに 今回の重要ポイント
WordPressで作成したウェブサイトにTwitterを埋め込む方法
どのようなウェブサイトか、どのような機能を使いたいかによって、いくつかの方法があります。
１）EmbedSocialのようなTwitter埋め込みツールの利用（自動オプション）
２）WordPressフィードプラグインの利用（基本オプション）
３）Instagram埋め込みコードの利用（手動オプション）
方法１．プラグインなしでTwitter投稿を埋め込むツールの利用
WordPressには様々な機能を追加するためのプラグインが用意されています。私たちEmbedSosialでもプラグインを提供していますが、私たちの経験では、ユーザーのほとんどは、Twitterプラットフォームからのコードを貼り付けるためだけに、さらに別のプラグインを導入する必要はありません。EmbedSocialのフィード機能は、プラグインなしでTwitterの投稿を埋め込みたいユーザー向けに設計されています。
また、これらのツールはWordPress以外で使用することができ、ユーザーはTwitterの投稿で好きなウィジェットを作成することができます。この方法については、後述するセクションで詳しくご紹介していますので、そちらをご覧ください。
方法２．WordPressフィードプラグインの利用
WordPressを使用している場合、Custom Twitter FeedsなどのTwitterのWordPressプラグインを使用して、Twitter投稿を埋め込むことができます。これらのプラグインは、みなさんのウェブサイトのサイドバーや他のウィジェットエリアに簡単にTwitterの投稿を埋め込むことができます。
方法３．Twitter埋め込みコードの利用
プラグインもその他のツールも使いたくない場合は、Twitterの埋め込みコードを使用して投稿を埋め込むことができます。埋め込みたいツイートの右上にあるプルダウンマークをクリックして、「ツイートを埋め込む」をクリックします。※この作業をする場合は、パソコンでツイッターを開いてください。スマートフォンには対応していません。
備考：この方法では、個別の投稿のコードを一つずつコピーして貼り付けていく必要があります。例えば5つ以上の投稿を埋め込む必要がある場合、この方法はお勧めできません。1つのコードで複数の投稿を埋め込むには、やはりTwitter投稿を埋め込むためのツールやプラグインを使ったほうがよいでしょう。
方法４．ショートコードの利用
Twitter投稿を埋め込むための他の方法として、ショートコードを利用することもできます。Twitter投稿のショートコードを生成し、フィードの管理・カスタマイズを外部のプラットフォームで行うプラグインがいくつかあります。
これらの特徴は、ショートコードの埋め込みのみを可能にするプラグインであり、定期的なメンテナンスが不要なシンプルで軽いプラグインであることです。更新はすべて外部のプラットフォームで行い、そこでウィジェットを作成し、ショートコードを取得することができます。
基本的にこれらのプラグインは、JavaScriptのコードを丸ごと貼り付けずに簡単な埋め込み方法のショートコードを利用したい場合にのみ有用です。例えば、私たちの製品EmbedSocialではショートコードを生成でき、さらにプラグインを使ってショートコードを埋め込むことが出来ます。
EmbedSocialフィード機能を使ってWordPressにTwitterを埋め込む方法
ここでは、EmbedSocialプラットフォームのフィード機能を使ってTwitterをWordPressサイトに埋め込む方法をご紹介します。
なおEmbedSocialプラットフォームのご利用にはお申し込みが必要です。ご興味のある方はお問い合わせページへ、ご利用をご希望の場合はお申し込みページからご連絡ください。
EmbedScialはTwitter APIと直接統合されているので、ユーザーIDの設定やアクセストークンなどの難しい設定は必要ありません。利用開始にはEmbedSocialとTwitterのアカウントの接続が必要ですが、ユーザーの皆様はガイドに従って画面をクリックし、WordPressで作成したウェブサイトでTwitter投稿を埋め込み・同期するための許可をEmbedSocialに与えるだけでOKです。
また、EmbedSocialでは、WordPressの投稿に直接埋め込むためのコードを、javascriptコードとTwitterの投稿をショートコードで埋め込むためのプラグイン、の2つのオプションを提供しています。どの方法を選択するかはみなさん次第で自由に選べます。以下に両方のケースについてご説明します。
ステップ1：TwitterアカウントをEmbedSocialへと接続
EmbedSocialフィード機能を通してTwitterからの投稿収集を希望される場合には、Twitterアカウントをシステムへと接続することが必要となります。接続するアカウントと収集する投稿の関連は必要なく、いずれかのアカウントを接続することでTwitter投稿の収集が可能となります。
表示されるポップアップに従い、TwitterでEmbedSocialのアクセスを許可します。
ステップ2：Twitterソースタイプの選択
無事にEmbedSocialプラットフォームとTwitter アカウントの接続が完了すると、投稿が収集できるようになります。EmbedSosialではTwitterの3つの種類の投稿を収集するか選択できます。
- @アカウント – Twitterアカウント上の投稿を収集
- ハッシュタグ – 指定したハッシュタグのついた投稿を収集
- @メンション – Twitterアカウントをメンションしている投稿を収集
以下のように、投稿を取得したいTwitterアカウントを選択すれば、ソースタイプの選択は完了です。
ステップ3：レイアウトを選択し、Twitterウィジェットをカスタマイズする
EmbedSocialのフィード機能では、たくさんのレイアウトがあるため、様々な見せ方でTwitter投稿をウェブサイトに表示することが出来ます。例えば、Twitterの投稿をスライダー形式で表示することも可能です。希望のレイアウトを選択して「フィードの作成」ボタンをクリックするだけで、ウェブサイトに埋め込むためのコードを表示する画面に移動します。
左枠のコードを埋め込むことで、Twitterから収集した投稿をWEBサイト上で表示させることができます。
ステップ4：Twitter投稿の表示/非表示と並べ替え
EmbedSocialのフィード機能では編集画面内の「モデレーション」ページで、ウェブサイト上で表示するTwitterの投稿を選択することができます。また「並べ替え」ページでは、投稿のピン留めや表示順を設定することが出来ます。その他さまざまな編集が可能です。
ステップ5：WordPressにTwitterウィジェットコードを貼り付ける
最後にEmbedSocialで生成されたTwitter投稿をウェブサイトで表示するためのコードをコピー＆ペーストします。このステップでは、JavaScriptコードとショートコードの2つのコードを使用することができます。以下では、両方の方法を説明します。
オプション1：WordPressにJavascriptのウィジェットコードを貼り付ける
ウィジェットのコードを取得するには、設定パネルの左上セクションにある「コードをコピー」をクリックするだけです。コピーされるのは、WordPressのページや投稿に埋め込むことができるJavaScriptコードです。
次に、WordPressアカウントにログインしてWordPress管理エリアに入り、「投稿」または「ページ」から、ウィジェットを表示したいページまたは投稿を探します。次に、以下の手順を実行します。
- WordPressエディタで、+プラス・アイコンをクリックし、HTMLブロックを選択します。
- EmbedSosialから取得したコードを貼り付ける（以下の例を参照）。
- WordPressのサイドバーの右上の領域で、[公開]ボタンをクリックします。
備考: WordPressクラシック版のエディタを使用する場合、「ビジュアル」から「テキスト」に切り替えるだけでよいでしょう。
オプション 2: WordPress のショートコードブロックにショートコードを貼り付ける
前述のとおり、EmbedSocialフィード機能 には、JavaScript コードの簡易版として使用できるショートコードがあります。
このコードを見つけるには、以下のステップを踏むだけです。
- 左上のコードエリアで「各CMS設定手順」をクリックします。
- ポップアップで「WordPress」をクリックします
- 「ショートコードをコピー」をクリックします
- WordPressのエディタに戻り、+アイコンをクリックして、ショートコードのブロックを選択します。
- そこにショートコードを貼り付けます
以上で、Twitter投稿がウェブサイトに表示されるようになります。
WordPressにTwitterのハッシュタグ投稿フィードを埋め込む
Twitterのハッシュタグ付き投稿を埋め込みたい場合も、EmbedSocialのフィード機能を利用することで実現できます。EmbedSocialのフィード機能は、Twitterのハッシュタグを含む、あらゆる種類のSNS投稿をコンテンツをWordPressページに簡単に埋め込むことができます。
EmbedSocialプラットフォームにログインし、フィード機能を選択したら、以下の手順で進むだけです。
- 「ソース」に移動し、Twitterを選択します
- Twitterのハッシュタグを選択し、投稿を集めたいハッシュタグを入力し、「次」をクリックします
- ウィジェットのレイアウトを選択し、「フィードの作成」をクリックします
- ウィジェットを埋め込むには、画面左上のコードをコピーして、WordPressページのHTMLブロックに貼り付けるだけです。
設定はこれだけで完了できます。一度設定をすればEmbedSocialプラットフォームが、指定されたハッシュタグを含むすべての最新投稿を自動的に取得・同期を行います。そのためウェブサイト上には常に最新の投稿が表示できます。さらに、上述の通り、投稿の表示・非表示の選択や、並べ替えも可能です。
複数のTwitterアカウントからInstagramの投稿を埋め込む
EmbedSocialフィード機能には、管理している複数のTwitterアカウントから投稿を取得し、すべての投稿を統合したTwitterフィードを作成するオプションがあります。
例えば以下のような利用シーンで、複数のTwitterアカウントからTwitter投稿を作成するメリットを感じることが出来るでしょう。
- 複数の支店がある不動産会社であれば、様々な支店の物件を紹介することができます
- タレント芸能事務所であれば、所属する複数のタレントのTwitterの活動を一度に紹介することができます
- 自動車ディーラーであれば、異なる自動車ディーラーからのTwitterの投稿を紹介することができます
- 複数のショップを展開するファッションブランドであれば、各ショップの店員がアップした投稿を一度に紹介することができます
利用シーンは無限大で、複数のアカウントのTwitter投稿をWordPressに埋め込む方法は、上述の手順と同じです。
Twitterの投稿フィードをWordPressサイトでおしゃれに表示する方法
Twitterの投稿をWordPressのウェブサイトで見栄えよく表示するために、すぐにできる対策がいくつかあります。
まず、ウェブサイトに表示する際に魅力的に見えるように、投稿を表示する際のレイアウトを工夫することです。Twitterの投稿だからといって同じサイズの正方形を並べるだけでなく、スライダーやコラージュなど違ったレイアウトで表示すれば、印象も変わり、おしゃれに見えます。EmbedSocialのフィード機能にはさまざまなレイアウトが用意されていて、クリック一つでレイアウトを変えられます。
次に、投稿に高品質の画像を使用することです。自身で投稿する場合の画像に注意することはもちろん、ハッシュタグなどで集めた画像についてもより高品質の画像のみを選ぶなどすることで、フィードはよりプロフェッショナルで洗練されたものになります。
TwitterフィードのWebサイトへの埋め込みデモ
ここではEmbedSocialを使ってWordPressの記事にTwitterの投稿を一覧で埋め込んだ、ウィジェットのデモを紹介します。
なおこれは、EmbedSocialを使用してWordPressサイトにTwitterのコンテンツを表示するための多くの方法のほんの一例に過ぎません。EmbedSocialフィード機能の製品ページを下にスクロールしていただくと、「設置イメージ」としていくつかのレイアウトをご覧いただけます。
みなさんのインスピレーションを得るために、ぜひ参照ください。
WordPressウェブサイトにTwitterを埋め込むメリット
WordPressのウェブサイトにTwitterの投稿を表示したい理由はたくさんあるでしょう。例えば、みなさんの素晴らしい作品をサイトでも見せたいのかもしれないし、訪問者にあなたのTwitterアカウントを紹介したいというケースもあるでしょう。
いろいろな理由や目的に応じて、WordPressのウェブサイトにTwitterの投稿フィードを埋め込むことで得られるメリットがあるので、いくつかここで紹介します。
1.ウェブサイトの訪問者の関心を長く維持する
魅力的な投稿が並んだTwitterアカウントをお持ちの場合は、Webサイトにそのコンテンツを表示することで訪問者をサイトに長く引き留める一つの手段になります。
Twitterがサイトに埋め込まれていればサイトを離れる必要がないので、訪問者はウェブサイト上で魅力的なコンテンツを思わずスクロールし、そしてそれは、さらにあなたのサイトを探索する可能性が高くなることを意味します。
2.最高のコンテンツを 1か所で紹介する
Twitterに素晴らしいコンテンツがたくさんあるけれど、画像や動画が多すぎてウェブサイトがごちゃごちゃになるのは嫌だという場合、Twitter埋め込みフィードは投稿を1つにまとめてすっきりと表示できる素晴らしい方法です。
クライアントや上司に自分の最高の作品を見せるためのポートフォリオとして使用することができます。
3.ウェブサイトへのトラフィックを増やす
もしたくさんの人にウェブサイトを訪問してもらいたいなら、そのための理由を与える必要があります。Twitterの投稿フィードを埋め込むことは、誰かの興味を引き、みなさんのサイトへクリックさせる素晴らしい方法です。
そして、一度彼らがウェブサイトを訪れれば、それは購読者や顧客になる可能性を秘めているのです。
4.ブランドの認知度向上
もし、みなさんが会社や製品のブランドや事業の認知度を高めようとしているのであれば、Twitterのフィードを埋め込むことは素晴らしい方法になるはずです。誰かがウェブサイトで投稿を見るたびにそのブランドに触れることになります。
そして、高品質のコンテンツと強力なビジュアル・アイデンティティがあれば、時間をかけてみなさんのブランドの認知度を高めることができます。
5.SNSとのエンゲージメントを高める
誰かがみなさんのウェブサイトでSNS投稿を見るたびに、彼らはあなたのコンテンツに触れ関与することができます。これにより、皆さんのブランドやSNSアカウントの周りに強力なコミュニティを築くことができます。
6.SNSアカウントを簡単に見つけられるようにする
人々がみなさんのSNSアカウントを見つけることができるようにしたい場合、ウェブサイト上のTwitterの投稿フィードを設置しておけば、投稿をクリックした訪問者を簡単に元のソースであるTwitterアカウントにリダイレクトすることができます。
ウェブサイトの訪問者にみなさんのSNSのプロフィールを訪れたりブランドを発見する機会を提供することができるようになるのです。
7.SNSのフォロワーを増やす
Twitterの投稿をウェブサイトに埋め込むことで、サイト訪問者はウィジェットのTwitterボタンをクリックするだけで、みなさんのTwitterアカウントのプロフィールに移動することができます。
アプリ内だけでなくウェブサイト訪問者にもリーチしてTwitterのフォロワーを増やせる方法ということができるでしょう。
8.アフィリエイトリンクからお金を稼ぐ
Twitterの投稿にアフィリエイトリンクがある場合、その投稿をウェブサイトに埋め込めばさらなる収入を得られる可能性があります。
つまり、誰かがアフィリエイトリンクをクリックするたびに、みなさんはコミッションを得ることができます。ウェブサイトからお金を稼ぐための一つの方法となるでしょう。
WordPressへのTwitter投稿埋め込みに関するFAQ
「ソーシャルメディアアグリゲーター」とは？
「ソーシャルメディアアグリゲーター（Social Media Aggregator）」とは、複数のソーシャルメディア（SNS）からコンテンツを一箇所に集めて表示することができるツールです。SNS投稿埋め込みツール、と呼ぶこともあります。これは、フォロワーや顧客のための情報を一つに集約したい個人や企業両方にとって便利なものです。ソーシャルメディア・アグリゲーターは、ブログ、ニュースサイト、ソーシャルネットワーキングサイトなど、さまざまなソースからのコンテンツを表示するために使用することができます。
最も充実したソーシャルメディアアグリゲーターのひとつがEmbedSocialフィード機能で、TikTok、YouTube、Facebook、Pinterest、Instagramなどのソースを備えています。埋め込みコードを使用して、これらのソースからのコンテンツをウェブサイトやブログに表示することができます。
WordPress用のTwitter投稿プラグインを見つけるには？
WordPressの公式サイト、WordPress「プラグイン（Plugins）」ページから確認できます。ここで、’Twitter feed plugin’または’Twitterウィジェット’を検索すると、複数の結果が表示されます。(日本語のプラグインページではヒットしないようです。）
プラグインやその他ツールを使わずに、WordPressのウェブサイトにTwitterの投稿を埋め込むには？
Twitterの投稿に付与されている埋め込みコードをウェブサイトのHTMLに貼り付ければ可能です。ただし、プラグインやツールを使ってTwitterのAPIと接続することをお勧めします。その理由は以下の通りです。
まず、プラグインやツールを使うとTwitterのアカウントから自動的にコンテンツを取り込むことができるようになります。つまり、ウェブサイトやブログで共有したい写真や動画をそれぞれ手動で追加する必要がないのです。
次に、共有されているコンテンツを調整する機能を提供します。これは、高品質で関連性の高いコンテンツのみをウェブサイトやブログで共有したい場合に重要です。
最後に、Twitter API統合を持つプロのソーシャルメディアアグリゲーター（SNS埋め込みツール）は、コンテンツの同期において非常に信頼性が高く、彼らは常にメンテナンスされ、新しい機能で更新されています。
さいごに 今回の重要ポイント
今回は、WordPressのウェブサイトにTwitterの投稿を埋め込み、最新のTwitterの投稿をサイトで紹介する方法について詳しく紹介しました。
その中でTwitterの公式プラグインを使用する方法と、EmbedSocialフィード機能やプラグインを使用する方法をご紹介しましたが、いずれもWordPressサイト上でTwitterのコンテンツを美しく表示することができます。
投稿の表示をもっとコントロールしたい場合や、他のTwitterユーザーのUGC（ユーザー生成コンテンツ）を表示する必要がある場合は、EmbedSocialフィード機能のご利用をお勧めします。投稿フィードをカスタマイズして、必要なコンテンツだけをウェブ上に表示することができる強力なツールです。
WordPressサイトにTwitterの投稿を埋め込む方法についてのこの記事が、皆さんのお役に立てれば幸いです。
