WPBeginnerを10年以上運営してきた経験から、強力なコミュニティを築くことがブログを成功させる鍵であることを学びました。私たちの成功は忠実な読者のおかげであり、読者とつながる新しい方法を常に探しています。
コミュニティを構築する素晴らしい方法のひとつに、WordPressサイトに最近のツイートを表示する方法があります。これにより、サイトの鮮度が保たれ、訪問者はあなたがソーシャルメディアで何をしているかを知ることができます。
WordPressサイトにツイートを表示する方法はいろいろ試しましたが、今回はその中からトップ3の方法をご紹介します。すべて初心者にやさしい方法なので、サイトにTwitterフィードを簡単に追加することができます。
なぜWordPressサイトに最近のツイートを表示するのか？
X/Twitterは、市場で最も人気のあるソーシャルメディアプラットフォームの1つです。WordPressサイトに最近のツイートを表示することで、いくつかの方法でオンライン上の存在感とエンゲージメントを高めることができます。
まず、ユーザーがあなたのサイトを訪れ、あなたのソーシャルメディアのフィードを見たとき、あなたのTwitterアカウントにクリックしてフォローし、あなたのリーチを増やすかもしれません。
さらに、ツイートはあなたのサイトや会社で起きていることをリアルタイムで更新することができます。視聴者はあなたのツイートと直接対話することができるため、視聴者のエンゲージメントを高めることができます。
最近のツイートは、WordPressサイトの社会的証明としても機能します。好意的なレビューや製品を推薦する人をリツイートすることで、購読者やカスタマイザーとの信頼関係を築くことができます。
これを念頭に置いて、WordPressサイトで最近のツイートを表示するさまざまな方法を見てみましょう。以下のクイックリンクを使って、特定の方法に飛ぶことができます：
方法1：Gutenbergブロックエディターにツイートを手動で埋め込む（プラグインなし）
WordPressで最近のツイートを表示する最初の方法は、WordPressのページや投稿日、ウィジェット（クラシックテーマユーザー向け）にTwitterプロフィールやタイムラインを手動で埋め込むことです。
YouTubeの動画を追加するように、WordPressでは個別ツイートやタイムラインなどのTwitterコンテンツを簡単に埋め込むことができます。oEmbed機能は、コンテンツのURLを埋め込みブロックエディターに貼り付けると、自動的に埋め込みコードに変換します。
まず、埋め込みたいTwitterのプロフィールやツイートのURLを見つけてコピーします。
例えば、WPBeginnerのTwitterプロフィールURLはhttps://twitter.com/wpbeginnerです。
一方、個別ツイートのURLは次のようになる：https://twitter.com/wpbeginner/status/1604852592827326464
次に、以下のいずれかの方法に従ってください：
WordPressの投稿やページに最近のツイートを表示する
まず、WordPressダッシュボードにログインし、WordPress投稿またはページのブロックエディターを開きます。
新しい投稿やページを作成したい場合は、投稿/ページ ” 新規追加から行うことができます。
次に、先ほどコピーしたTwitterプロフィールのURLを「Type / to choose a block」エリアにペーストするだけです。
このハイライトは以下の通り。
そうすると、ブロックはすぐにそのアカウントからの最近のツイートを表示するTwitterタイムラインブロックに変わります。
ブロック設定のサイドバーでは、モバイル表示によりレスポンシブにするために、小さい端末用にブロックのサイズを変更することを選択できます。
さらに、ユーザーにTwitterアカウントをフォローしてもらうために、ページや投稿にブロックを自由に追加してください。
更新」または「公開」をクリックすると、変更が反映されます。
この方法では、最近のツイートを縦長のスライダー付きボックス内に追加します。ボックスには最新の20件のツイートと、最後に「Twitterでもっと表示」ボタンが含まれます。
ツイッターのタイムラインはこんな感じ：
WordPressのブロックテーマを使っている場合は、これと同じ方法でフルサイトエディターにTwitterフィードを埋め込み、パターンやテンプレート部分に最近のツイートを表示することもできます。
詳しくはWordPressフルサイト編集の完全ガイドをご覧ください。
WordPressのウィジェットエリアに最近のツイートを表示する
クラシックWordPressテーマを使っていて、ウィジェットエリア（サイドバーのようなもの）に最新のツイートを表示したい場合は、以下の手順に従ってください。
まず、外観 ” ウィジェットにアクセスします。次に、選択したウィジェットエリアで「+ 新規追加」ボタンをクリックし、Twitterウィジェットを選択します。
ここから、Twitterアカウントまたは投稿のURLを適切なフィールドに貼り付けるだけです。
そして、『埋め込み』をクリックする。
その後、ウィジェットを更新し、サイト上でツイートウィジェットをプレビューすることができます。
WordPressのサイドバーに表示されるタイムラインはこんな感じです：
方法2：Twitterフィードプラグインを使って最近のツイートを表示する（推奨）
WordPressサイトに最近のツイートを追加する2つ目の方法は、Twitterプラグインを使う方法です。この方法をお勧めする理由は、前の方法よりもカスタマイズオプションが豊富で、フィードをページデザインに合わせて調整できるからです。
そのために、Smash Balloon Custom Twitter Feedsを使います。このプラグインは、様々なタイプの美しいソーシャルフィードを作成するのに役立ちます。ハッシュタグ、検索キーワード、メンション、タイムラインなどに基づいたツイートを表示することができる。
注： 無料のCustom Twitter Feedsプラグインもありますが、この投稿ではCustom Twitter Feeds Proバージョンを使用します。タイムラインフィルターや複数のTwitterフィードを1つにまとめるなど、より高度な機能が搭載されています。
まず、WordPressプラグインをインストールして有効化する必要があります。有効化したら、WordPressの管理エリアに移動し、Twitterフィード ” 設定に移動し、適切なフィールドにライセンスキーを貼り付けます。
その後、ライセンスを有効化し、「変更を保存」をクリックする必要があります。
Twitter Feed ” All Feedsにアクセスしてください。
次に、「+新規追加」ボタンをクリックします。
初めてSmash Balloonを使ってTwitterフィードを追加する場合は、メールアドレスの確認が求められます。
接続』ボタンをクリックし、画面の指示に従ってください。
完了すると、Custom Twitter Feedsプラグインのページに戻り、フィードの種類を選択するよう求められます。
カスタムTwitterフィードでは、ユーザータイムラインフィード、ハッシュタグフィード、検索フィードのいずれかを選択して埋め込むことができます。この例では、最初のオプションを使用します。選択したら、’次へ’をクリックするだけです。
次の画面で、WordPressサイトに埋め込みたいTwitterのハンドルネームを入力します。
その後、もう一度「Next」をクリックする。
Twitterフィードのテンプレートを選びましょう。7種類の中から選ぶことができ、もしあなたのページデザインに合わないと思ったら、後でいつでも変更することができます。
選択したら、「次へ」をクリックする。
この段階で、Twitterフィードの編集インターフェースに到着するはずです。ページの右側にライブプレビューが表示され、左側のパネルでフィードの見栄えを設定できます。
カスタマイズ」と「設定」の2つのタブがある。
まずはカスタマイザーから。フィードレイアウト’オプションを選択すると、フィードレイアウト（リスト、メイソンリー、カルーセルなど）を選ぶことができます。
注： APIの制限により、Smash Balloonは最初1～30ツイートしか表示できませんが、時間が経つにつれて表示できるツイートが増えます。
これらの設定が終わったら、上部の「カスタマイザー」ボタンをクリックするだけで、メインメニューに戻ることができます。
もうひとつできることは、表示されているツイートの下に表示される「Load More」ボタンを有効化することです。大量のツイートがあるにもかかわらず、すべてを同じページに表示できない場合に便利な機能です。
Load More Button」オプションをクリックし、続いて「有効化」ボタンをクリックするだけです。その後、ボタンの外観をカスタマイズすることができます。
設定」タブに切り替えると、フィードソースの追加、ツイートフィルターの適用、高度な機能（カスタムCSSの追加など）のオプションが表示されます。
また、「フィードキャッシュをクリア」ボタンをクリックすると、以前のフィードキャッシュを削除できます。次にプラグインがTwitterフィードを表示する必要があるときは、古いキャッシュデータを使用する代わりに、X/Twitterのサーバーから最新のツイートを取得する必要があります。
フィルター」オプションをクリックして、ツイートにフィルターを追加してみましょう。
ここでは、返信やリツイートを含めるか、許可またはブロックされている単語に基づいてツイートを表示するか、特定のツイートを非表示にするかを選択できる。
Twitter Feedの見た目に満足したら、「保存」ボタンをクリックします。
Twitter Feedをあなたのページやウィジェットエリアに追加するには、右上の「Embed」ボタンをクリックするだけです。
その後、ポップアップが表示され、Twitterフィードを表示する方法が表示されます：ショートコード、ブロック、ウィジェット。
どの方法を選んだとしても、まず最初にショートコードをコピーする必要がある。
次に、Twitterフィードをページに埋め込みたい場合は、「+ ページに追加」ボタンをクリックします。
そうしたら、WordPressサイトから既存のページを選択し、「追加」をクリックします。
選択したページのWordPressブロックエディターが表示されます。
ページの任意の場所で「+」ブロック追加ボタンをクリックし、Twitterフィードブロックを選択します。
さて、先ほど作成したTwitterフィードはすぐには表示されないかもしれません。
このような場合は、ブロック設定サイドバーの「ショートコード設定」フィールドにショートコードを貼り付けてください。
その後、「変更を適用」をクリックする。
更新が完了したら、「更新」をクリックして変更を反映させます。
Twitterフィードのデモサイトはこんな感じです：
Twitter Feedをウィジェットエリアに表示したい場合は、’+ ウィジェットに追加’ オプションをクリックしてください。次にウィジェットエディターにリダイレクトされます。
そして、「Twitter Feed」ウィジェットを見つけて選択するだけです。
前の方法と同様に、ブロック設定のサイドバーにショートコードを貼り付け、「変更を適用」をクリックするだけです。
ライブプレビューに新しく作成したTwitterフィードが表示されます。
最後に「更新」をクリックして変更を確定する。
その後、ライブサイトにアクセスして、フィードがどのように見えるかを確認することができます：
方法3：Twitter Publishを使ってWordPressに最新ツイートを表示する（プラグインなし＋HTML）
最後の方法は、Twitter公開機能を使って最近のTwitter投稿を追加する方法です。
Twitter Publishでは、ツイート、動画、タイムライン、ボタン（フォロー ボタンやシェアボタンなど）など、様々なタイプのTwitterコンテンツの埋め込みコードを簡単に作成できます。
この方法では、WordPressブログやサイトに追加する前に、埋め込み要素の見た目をカスタマイズすることができます。2番目の方法ほど強力ではありませんが、無料なので紹介する価値はあります。
このチュートリアルでは、Twitter Publishを使ってタイムラインを埋め込む方法を紹介します。まず、TwitterPublishのサイトにアクセスし、TwitterプロフィールのURLを’埋め込みたいものは何ですか？’ボックスに貼り付けます。
それが終わったら、矢印のアイコンをクリックする。
その後、表示オプションを選択します：埋め込みタイムラインまたはX/Twitterボタン。
Twitterのタイムラインに最近のツイートを表示したいので、’埋め込みタイムライン’オプションを選択してください。
表示オプションを選択すると、最近のツイートの埋め込みコードが即座に作成されます。コードをコピー」をクリックすれば、すぐにカスタムHTMLコードを埋め込むことができます。
または、’カスタマイズオプションを設定’をクリックし、埋め込みTimelineの見え方をカスタマイズしてください。
ここでは、タイムラインの高さと幅をカスタマイズし、ライトモードとダークモードを選択し、必要に応じてツイートの言語翻訳を有効化することができます。
設定の下に、埋め込み要素がどのように表示されるかを見ることができます。完了したら、「更新」をクリックするだけです。
埋め込みコードにはTimelineで選択したカスタマイザー設定が含まれます。
コードをコピー」をクリックしてください。
WordPressダッシュボードに戻り、ページ、投稿、ウィジェットエリアのブロックエディターを開きます。
その後、エディター内の任意の場所で「+」ブロック追加ボタンをクリックし、カスタムHTMLウィジェットまたはブロックを選択するだけです。
ここで、先ほどの埋め込みコードをフィールドに貼り付ける。
完了したら、「プレビュー」ボタンをクリックして、フィードがどのように見えるかを確認できます。
その後、ページ、投稿、ウィジェットエリアに自由に要素を追加してください。その後、更新または公開するだけです。
デモサイトはこんな感じです：
ボーナスのヒントWordPressにソーシャルメディアフィードを追加する
ブランドやビジネスのために他のソーシャルメディア・プラットフォームを運営していますか？もしそうなら、Twitter以外のソーシャルフィードもサイトに表示したほうがよいでしょう。
WordPressサイトにさまざまなソーシャルフィードを表示することで、訪問者にどのプラットフォームであなたをフォローできるかを知らせることができ、フォロワー数を増やすことができます。
ソーシャルフィードを表示することは、通常のソーシャルアイコンボタンを表示するよりも重要な利点があります。あなたのソーシャルネットワークをフォローしないことで、訪問者がどのようなコンテンツを見逃すかを示すことができ、「見逃す恐れ」を作り出すことができる。
Smash Balloonを使えば、WordPressサイトでソーシャルメディアのフィードをすべて表示・カスタマイズできます。これにより、すべてのフィードがお使いのテーマで見栄えよく表示されます。
WordPressでさまざまなソーシャルフィードを表示する方法については、以下のチュートリアルをご覧ください：
- WordPressでカスタムFacebookフィードを作成する方法
- WordPressでカスタムInstagramフォトフィードを作成する方法
- WordPressでYouTubeチャンネルの最新動画を表示する方法
- WordPressでTikTok動画を埋め込む方法（簡単な方法）
- WordPressでGoogle、Facebook、Yelpのレビューを表示する方法
WordPressで最近のツイートを表示する方法について、この投稿がお役に立てば幸いです。また、WordPressにInstagramの写真を自動投稿する方法や、WordPressのソーシャルメディアプラグインのエキスパートによるベストセレクションもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Kate
Hi, I was following the first set of instructions, but when I paste my Twitter URL in the text box nothing happens. I don’t know if it matters that I have Divi Builder enabled on my wordpress site?
WPBeginner Support
If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.
管理者
Glenn
This seems to be an older article…I’m wondering how I can show my timeline..not my tweets but the people I follow. The Twitter Widgets page only shows Search, not my timeline or a list.
Thank you.
Glenn
Minhazul Islam
Is there any plugin to do the same task?
Greg McGee
I have successfully created a twitter feed on my wordpress site. Yaaay!!! Now the bad news. It disappears after 3 seconds. Booo!!! Where can I change the parameter that sets this limit? It is hiding from me very well. But I’m not all that smart, either.
Gopal sharma
This is the best tutorial i found ever..
onya icha
on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem
Simeon Opeyemi
Thanks. it worked for me!
gertrude
I added this but apart from a link to my tweeter it doesn’t do anything. I have wordpress 3.8.1 and activated the default theme, then switched back to the one I am using. Still nothing. If there is any way you guys can help it would be great. Thanks
WPBeginner Support
Trying switching off all plugins and then test, particularly if you are using any Twitter related plugin. If this does not work, then you need to break the widget code into two pieces. Paste the javascript part starting from the <script> in your theme’s header.php, and the link part in a text widget.
管理者
K.T. Lynch
For some reason the closing HTML tags are stripped out once I press save. This is appearing on my WP Sidebar:
Tweets de @lynchkt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
The “Tweets de @lynchkt” is a hyperlink but otherwise it’s not working.
WPBeginner Support
This could happen for many reasons. If you are using WordPress 3.8 then try to update to 3.8.1. Try switching to a default theme temporarily and see if you still get this error.
管理者
Ines TR
Hello!
I just see a buncg of words in my blog page after pasting the widget , why?
I saved it and tried several times but can´t fix the problem.
Abdul
How do I get it on a wp page?
WPBeginner Support
you can paste the same code in WordPress pages as well as posts.
管理者
Douglas Vautour
Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.
Ann
Hi!
Thank you for sharing this. My regular Twitter widgets just weren’t working!
Nancy Closson
I am looking for a widget that allows you to select tweets from one twitter account rather than show all or recent tweets. Is this customization possible and is that what you describe with the favorites list? thanks you
WPBeginner Support
yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.
管理者
gaston
very useful!!
solved it in a buzz!
thanks!
Shana Manuel
Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.
Founterior
It works just fine !!!
patty
Sweet. Thanks for this!
Bill Hutchison
Thank you for this. I have used widgets for this in the past but have been generally unsatisfied with the results. The seems to be the best solution for including Twitter in the sidebar.
Thanks again.
Joan
I have a question:
Is it possible to personalize the twitter widget weight? With the old twitter code was possible.
Thanks
Chris Race
Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!
Rickard
I don’t know, but every single solution I’ve tried to use is messing with the admin panel more often than anyone can find ok.
Is there anyway to fight the “waiting for platform.twitter.com” which breaks many functions in the WP-admin-panel?
I guess this happens because of a overload on platform.twitter.com(?) and pages in the wp-admin-panel will continue loading forever…
Might there be a way to set a time limit for the call, and if not found ignore it?
Editorial Staff
This should have no impact on your WordPress admin panel. You are adding this in the widgets which only loads in the front-end of your website.
管理者
Julien Maury
I cannot agree more. There is another great thing with widget, they use streams (see streaming APIs) so you can display A LOT of tweets without worrying about rate limits.
And if you want to get a special feature you’ll add data-chrome=”noheader,nofooter,noborders,transparent” in the link. These new parameters allow you to make widgets “design friendly”.
Gordon Chambers
Hi,
I’ve been trying the above but when I click save it changes the value added in the ID box to a shortened number. I have tried to add both my twitter accounts and it does the same?
Julien Maury
That’s weird. Check the quotes – they have to be real quotes not like in this comment section.