Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで最近のツイートを表示する方法(ステップバイステップ)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで最近のツイートを表示したいですか?

X/TwitterをWordPressサイトに統合することで、ユーザーエンゲージメントを高めることができます。ブログの訪問者はあなたのツイートを簡単に発見することができ、Twitterで新しいフォロワーを獲得することもできます。

この投稿では、WordPressで最近のツイートを表示する方法を紹介する。

How to Display Recent Tweets in WordPress

なぜ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投稿またはページのブロックエディターを開きます。

新しい投稿やページを作成したい場合は、投稿/ページ ” 新規追加から行うことができます。

Clicking Add New Page in WordPress admin area

次に、先ほどコピーしたTwitterプロフィールのURLを「Type / to choose a block」エリアにペーストするだけです。

このハイライトは以下の通り。

Pasting a Twitter URL to the block editor

そうすると、ブロックはすぐにそのアカウントからの最近のツイートを表示するTwitterタイムラインブロックに変わります。

ブロック設定のサイドバーでは、モバイル表示によりレスポンシブにするために、小さい端末用にブロックのサイズを変更することを選択できます。

さらに、ユーザーにTwitterアカウントをフォローしてもらうために、ページや投稿にブロックを自由に追加してください。

更新」または「公開」をクリックすると、変更が反映されます。

Publishing a page with a Twitter Feed

この方法では、最近のツイートを縦長のスライダー付きボックス内に追加します。ボックスには最新の20件のツイートと、最後に「Twitterでもっと表示」ボタンが含まれます。

ツイッターのタイムラインはこんな感じ:

An example of a page with a Twitter Feed made with the built-in Twitter block

WordPressのブロックテーマを使っている場合は、これと同じ方法でフルサイトエディターにTwitterフィードを埋め込み、パターンやテンプレート部分に最近のツイートを表示することもできます。

詳しくはWordPressフルサイト編集の完全ガイドをご覧ください。

WordPressのウィジェットエリアに最近のツイートを表示する

クラシックWordPressテーマを使っていて、ウィジェットエリア(サイドバーのようなもの)に最新のツイートを表示したい場合は、以下の手順に従ってください。

まず、外観 ” ウィジェットにアクセスします。次に、選択したウィジェットエリアで「+ 新規追加」ボタンをクリックし、Twitterウィジェットを選択します。

Adding a Twitter widget in WordPress

ここから、Twitterアカウントまたは投稿のURLを適切なフィールドに貼り付けるだけです。

そして、『埋め込み』をクリックする。

Embedding a Twitter profile in a WordPress widget area

その後、ウィジェットを更新し、サイト上でツイートウィジェットをプレビューすることができます。

WordPressのサイドバーに表示されるタイムラインはこんな感じです:

Example of a Twitter widget in a WordPress sidebar

WordPressサイトに最近のツイートを追加する2つ目の方法は、Twitterプラグインを使う方法です。この方法をお勧めする理由は、前の方法よりもカスタマイズオプションが豊富で、フィードをページデザインに合わせて調整できるからです。

そのために、Smash Balloon Custom Twitter Feedsを使います。このプラグインは、様々なタイプの美しいソーシャルフィードを作成するのに役立ちます。ハッシュタグ、検索キーワード、メンション、タイムラインなどに基づいたツイートを表示することができる。

注: 無料のCustom Twitter Feedsプラグインもありますが、この投稿ではCustom Twitter Feeds Proバージョンを使用します。タイムラインフィルターや複数のTwitterフィードを1つにまとめるなど、より高度な機能が搭載されています。

まず、WordPressプラグインをインストールして有効化する必要があります。有効化したら、WordPressの管理エリアに移動し、Twitterフィード ” 設定に移動し、適切なフィールドにライセンスキーを貼り付けます。

その後、ライセンスを有効化し、「変更を保存」をクリックする必要があります。

Activating Smash Balloon's Custom Twitter Feeds Pro license key

Twitter Feed ” All Feedsにアクセスしてください。

次に、「+新規追加」ボタンをクリックします。

Adding a new Twitter Feed with Smash Balloon

初めてSmash Balloonを使ってTwitterフィードを追加する場合は、メールアドレスの確認が求められます。

接続』ボタンをクリックし、画面の指示に従ってください。

Connecting the user's email address with Smash Balloon

完了すると、Custom Twitter Feedsプラグインのページに戻り、フィードの種類を選択するよう求められます。

カスタムTwitterフィードでは、ユーザータイムラインフィード、ハッシュタグフィード、検索フィードのいずれかを選択して埋め込むことができます。この例では、最初のオプションを使用します。選択したら、’次へ’をクリックするだけです。

Creating a User Timeline Twitter Feed with Smash Balloon

次の画面で、WordPressサイトに埋め込みたいTwitterのハンドルネームを入力します。

その後、もう一度「Next」をクリックする。

Choosing a Twitter Feed source in Smash Balloon

Twitterフィードのテンプレートを選びましょう。7種類の中から選ぶことができ、もしあなたのページデザインに合わないと思ったら、後でいつでも変更することができます。

選択したら、「次へ」をクリックする。

Choosing a Smash Balloon Twitter Feed template

この段階で、Twitterフィードの編集インターフェースに到着するはずです。ページの右側にライブプレビューが表示され、左側のパネルでフィードの見栄えを設定できます。

カスタマイズ」と「設定」の2つのタブがある。

The Twitter Feed editing interface in Smash Balloon

まずはカスタマイザーから。フィードレイアウト’オプションを選択すると、フィードレイアウト(リスト、メイソンリー、カルーセルなど)を選ぶことができます。

注: APIの制限により、Smash Balloonは最初1~30ツイートしか表示できませんが、時間が経つにつれて表示できるツイートが増えます。

これらの設定が終わったら、上部の「カスタマイザー」ボタンをクリックするだけで、メインメニューに戻ることができます。

Customizing the Twitter Feed layout in Smash Balloon

もうひとつできることは、表示されているツイートの下に表示される「Load More」ボタンを有効化することです。大量のツイートがあるにもかかわらず、すべてを同じページに表示できない場合に便利な機能です。

Load More Button」オプションをクリックし、続いて「有効化」ボタンをクリックするだけです。その後、ボタンの外観をカスタマイズすることができます。

Customizing the Twitter Feed Load More Button in Smash Balloon

設定」タブに切り替えると、フィードソースの追加、ツイートフィルターの適用、高度な機能(カスタムCSSの追加など)のオプションが表示されます。

また、「フィードキャッシュをクリア」ボタンをクリックすると、以前のフィードキャッシュを削除できます。次にプラグインがTwitterフィードを表示する必要があるときは、古いキャッシュデータを使用する代わりに、X/Twitterのサーバーから最新のツイートを取得する必要があります。

Customizing the Twitter Feed settings in Smash Balloon

フィルター」オプションをクリックして、ツイートにフィルターを追加してみましょう。

ここでは、返信やリツイートを含めるか、許可またはブロックされている単語に基づいてツイートを表示するか、特定のツイートを非表示にするかを選択できる。

Customizing the filters to display the Twitter Feed in Smash Balloon

Twitter Feedの見た目に満足したら、「保存」ボタンをクリックします。

Twitter Feedをあなたのページやウィジェットエリアに追加するには、右上の「Embed」ボタンをクリックするだけです。

その後、ポップアップが表示され、Twitterフィードを表示する方法が表示されます:ショートコード、ブロック、ウィジェット

The Twitter Embed Feed popup in Smash Balloon

どの方法を選んだとしても、まず最初にショートコードをコピーする必要がある。

次に、Twitterフィードをページに埋め込みたい場合は、「+ ページに追加」ボタンをクリックします。

そうしたら、WordPressサイトから既存のページを選択し、「追加」をクリックします。

Selecting a page to embed the Twitter Feed in using Smash Balloon

選択したページのWordPressブロックエディターが表示されます。

ページの任意の場所で「+」ブロック追加ボタンをクリックし、Twitterフィードブロックを選択します。

Selecting the Smash Balloon Twitter Feed block in the block editor

さて、先ほど作成したTwitterフィードはすぐには表示されないかもしれません。

このような場合は、ブロック設定サイドバーの「ショートコード設定」フィールドにショートコードを貼り付けてください。

その後、「変更を適用」をクリックする。

Inserting a shortcode in the Smash Balloon Twitter Feed block

更新が完了したら、「更新」をクリックして変更を反映させます。

Twitterフィードのデモサイトはこんな感じです:

An example of the Twitter Feed made with Smash Balloon

Twitter Feedをウィジェットエリアに表示したい場合は、’+ ウィジェットに追加’ オプションをクリックしてください。次にウィジェットエディターにリダイレクトされます。

そして、「Twitter Feed」ウィジェットを見つけて選択するだけです。

Adding the Twitter Feed Smash Balloon widget in the widget editor

前の方法と同様に、ブロック設定のサイドバーにショートコードを貼り付け、「変更を適用」をクリックするだけです。

ライブプレビューに新しく作成したTwitterフィードが表示されます。

Inserting the Smash Balloon Twitter Feed shortcode in the widget editor

最後に「更新」をクリックして変更を確定する。

その後、ライブサイトにアクセスして、フィードがどのように見えるかを確認することができます:

Example of the Twitter Feed widget made with Smash Balloon

方法3:Twitter Publishを使ってWordPressに最新ツイートを表示する(プラグインなし)

最後の方法は、Twitter公開機能を使って最近のTwitter投稿を追加する方法です。

Twitter Publishでは、ツイート、動画、タイムライン、ボタン(フォローボタンやシェアボタンなど)など、様々なタイプのTwitterコンテンツの埋め込みコードを簡単に作成できます。

この方法では、WordPressブログやサイトに追加する前に、埋め込み要素の見た目をカスタマイズすることができます。2番目の方法ほど強力ではありませんが、無料なので紹介する価値はあります。

このチュートリアルでは、Twitter Publishを使ってタイムラインを埋め込む方法を紹介します。まず、TwitterPublishのサイトにアクセスし、TwitterプロフィールのURLを’埋め込みたいものは何ですか?’ボックスに貼り付けます。

それが終わったら、矢印のアイコンをクリックする。

Inserting a Twitter URL in the Twitter Publish website

その後、表示オプションを選択します:埋め込みタイムラインまたはX/Twitterボタン。

Twitterのタイムラインに最近のツイートを表示したいので、’埋め込みタイムライン’オプションを選択してください。

Twitter Publish's display options

表示オプションを選択すると、最近のツイートの埋め込みコードが即座に作成されます。コードをコピー」をクリックすれば、すぐにカスタムHTMLコードを埋め込むことができます。

または、’カスタマイズオプションを設定’をクリックし、埋め込みTimelineの見え方をカスタマイズしてください。

Customizing the Twitter Feed made with Twitter Publish

ここでは、タイムラインの高さと幅をカスタマイズし、ライトモードとダークモードを選択し、必要に応じてツイートの言語翻訳を有効化することができます。

設定の下に、埋め込み要素がどのように表示されるかを見ることができます。完了したら、「更新」をクリックするだけです。

Clicking Update in the Twitter Publish website

埋め込みコードにはTimelineで選択したカスタマイザー設定が含まれます。

コードをコピー」をクリックしてください。

Copying a Twitter Publish embed code

WordPressダッシュボードに戻り、ページ、投稿、ウィジェットエリアのブロックエディターを開きます。

その後、エディター内の任意の場所で「+」ブロック追加ボタンをクリックし、カスタムHTMLウィジェットまたはブロックを選択するだけです。

Selecting the Custom HTML block in the block editor

ここで、先ほどの埋め込みコードをフィールドに貼り付ける。

完了したら、「プレビュー」ボタンをクリックして、フィードがどのように見えるかを確認できます。

Pasting the Twitter Publish HTML code in the block editor

その後、ページ、投稿、ウィジェットエリアに自由に要素を追加してください。その後、更新または公開するだけです。

デモサイトはこんな感じです:

An example of Twitter Feed made with the Twitter Publish website

ボーナスのヒントWordPressにソーシャルメディアフィードを追加する

ブランドやビジネスのために他のソーシャルメディア・プラットフォームを運営していますか?もしそうなら、Twitter以外のソーシャルフィードもサイトに表示したほうがよいでしょう。

WordPressサイトにさまざまなソーシャルフィードを表示することで、訪問者にどのプラットフォームであなたをフォローできるかを知らせることができ、フォロワー数を増やすことができます。

ソーシャルフィードを表示することは、通常のソーシャルアイコンボタンを表示するよりも重要な利点があります。あなたのソーシャルネットワークをフォローしないことで、訪問者がどのようなコンテンツを見逃すかを示すことができ、「見逃す恐れ」を作り出すことができる。

Smash Balloonを使えば、WordPressサイトでソーシャルメディアのフィードをすべて表示・カスタマイズできます。これにより、すべてのフィードがお使いのテーマで見栄えよく表示されます。

Customize TikTok feed layout

WordPressでさまざまなソーシャルフィードを表示する方法については、以下のチュートリアルをご覧ください:

WordPressで最近のツイートを表示する方法について、この投稿がお役に立てば幸いです。WordPressのSEO(検索エンジン最適化)についての究極のガイドや、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

32件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Kate says

    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 says

      If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.

      管理者

  3. Glenn says

    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

  4. Greg McGee says

    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.

  5. onya icha says

    on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem

  6. gertrude says

    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 says

      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.

      管理者

  7. K.T. Lynch says

    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 says

      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.

      管理者

  8. Ines TR says

    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.

  9. Douglas Vautour says

    Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.

  10. Nancy Closson says

    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

  11. Bill Hutchison says

    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.

  12. Joan says

    I have a question:

    Is it possible to personalize the twitter widget weight? With the old twitter code was possible.

    Thanks

  13. Chris Race says

    Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!

  14. Rickard says

    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?

  15. Julien Maury says

    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 says

      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 says

        That’s weird. Check the quotes – they have to be real quotes not like in this comment section.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。