WordPressにTwitter共有・リツイートボタンを追加する方法

素晴らしい記事を公開したのに、オンラインでの反響がほとんどないほどイライラすることはありません。

WPBeginnerを長年成長させてきた中で、人々があなたのコンテンツを共有しやすくすればするほど、より多くの共有が得られることを学びました。

Twitter (X) は、コンテンツを拡散し、認知度を高めるための最も効果的なプラットフォームの1つであり続けています。

だからこそ、WPBeginnerチームはTwitterで積極的に活動しており、コンテンツが簡単に共有できるようにしています。このガイドでは、WordPressサイトにTwitter共有ボタンとリツイートボタンを追加する、コード不要の簡単な2つの方法を紹介し、自身の投稿でのソーシャル共有を促進します。🤳

WordPressにTwitter共有ボタンとリツイートボタンを追加する理由

最近のマーケティング統計調査によると、Twitter (X) の月間アクティブユーザーは2億5000万人を超えています。これは、あなたのウェブサイトを宣伝するのに最適な場所です。

ただし、ソーシャルメディアでコンテンツを共有しても、すでにあなたのアカウントをフォローしているユーザーにしかリーチできません。新しいオーディエンスにリーチしたい場合は、人々にあなたのコンテンツを共有したりリツイートしたりしてもらう必要があります。

これは、あなたのブランドを知らなかった可能性のある人々にあなたのブランドを紹介することで、ブログトラフィックを増やすことができます。コンテンツの再投稿も強力なソーシャルプルーフの形式です。誰かがフォロワーと投稿やツイートを共有すると、それはしばしば推薦と見なされます。

それでは、WordPressでX共有ボタンとリツイートボタンを簡単に追加する方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

• Method 1: Add a Twitter Share Button With Novashare (Straightforward)
  • ステップ1：Novashareのインストールと有効化
  • ステップ2：Twitterシェアボタンを作成する
  • ステップ3：共有ボタンの外観をカスタマイズする
• Method 2: Let Users Retweet Your Tweets With Smash Balloon (Feature-Rich Option)
  • ステップ1：Twitter Feed Proの設定
  • ステップ2：WordPress用のライブTwitterフィードを作成する
  • ステップ 3: WordPress Twitter フィードをカスタマイズする
  • ステップ 4: Twitter フィードを WordPress に追加する
• WordPressでTwitterを使用するその他の方法を学ぶ

方法1: Novashareを使用してWordPressにTwitter共有ボタンを追加する方法

私の経験上、WordPressにTwitter (X) シェアボタンを追加する最も簡単な方法は、Novashareプラグインを使用することです。これは、サイトにさまざまな種類の共有ボタンを追加できる、WordPressのベストソーシャルメディアプラグインの1つです。これには、LinkedIn、Facebook、Xが含まれます。

💡 注意: WPBeginnerチームは、このプラグインについて広範な調査を行いました。詳細については、包括的なNovashareレビューをご覧ください。

他のかさばるプラグインとは異なり、Novashare はパフォーマンスに重点を置いており、多くの人気の WordPress テーマと連携して動作します。これにより、ページの速度、スタイル、シンプルさを気にするサイトオーナーに最適です。

ステップ1：Novashareのインストールと有効化

最初の手順は、プラグインをインストールして有効化することです。

Novashare プラグインは、公式 Novashare ウェブサイトから購入する必要があります。

その後、チェックアウトプロセスをそのまま進めると、Novashareダッシュボードにアクセスできます。

次に、購入確認画面が表示され、Novashareライセンスキーと.zipファイルを確認できます。

ファイルをダウンロードし、ライセンスキーをコピーして、安全な場所に保管してください。

次に、WordPress管理エリアで、プラグイン » 新規追加に移動してプラグインをインストールします。

Novashare .zip ファイルをアップロードし、「今すぐインストール」をクリックしてプロセスを開始し、次に「有効化」をクリックします。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

アクティベートしたら、ライセンスキーをアクティベートする必要があります。これは、設定 » Novashare に移動することで実行できます。

次の画面で、「ライセンス」をクリックできます。

その後、フィールドにキーを入力し、「ライセンスを保存」をクリックするだけです。

これで、NovashareでTwitter共有ボタンを作成する準備が整いました。

ステップ2：Twitterシェアボタンを作成する

Novashareでソーシャルメディアシェアボタンを作成するには、「インラインコンテンツ」または「フローティングバー」サブメニューのいずれかで作業できます。

それが何を意味するか疑問に思っていますか？主な違いは次のとおりです。

• インラインコンテンツ: デフォルトでは、これらは中サイズを使用し、選択した内容に応じて、ボタンを上部または下部（または両方）に表示します。ブロックまたはショートコードを使用して、ページ上のどこにでも配置することもできます。

• フローティングバー：デスクトップでは画面の左側に表示され、モバイルでは画面下部に固定されます。デフォルトでは小さなボタンサイズを使用しますが、画面サイズによっては配置が少し変わることがあります。

このガイドでは「インラインコンテンツ」スタイルを使用するので、トグルを切り替えて有効にします。

または、フローティングバータブに移動して有効にすることもできます。

好みのシェアボタンをオンにしたら、その下にある「ソーシャルネットワーク」セクションを探します。ここで、Xアイコンをクリックして選択します。

これで完了です。ただし、この設定を保存する前に、Twitter共有ボタンをカスタマイズしたいと思うでしょう。

ステップ3：共有ボタンの外観をカスタマイズする

「インラインコンテンツ」タブを下にスクロールすると、Twitter (X) シェアボタンの外観やサイト上での表示方法をカスタマイズするためのいくつかのオプションが見つかります。

「表示」セクションで、どの投稿タイプにTwitter共有ボタンを表示するかを選択できます。希望するものをチェックするだけです。たとえば、このチュートリアルでは「投稿」で有効にします。

次に、ボタンが表示される場所を決定できます。コンテンツの上、コンテンツの下、またはコンテンツの上と下の両方です。

「フィードに表示」機能を使用すると、RSSフィード内にもボタンを表示できます。

次に、「モバイルブレークポイント」は、例えば1200pxのように、モバイルスタイルが適用されるタイミングを設定します。一方、「ブレークポイントの上/下を非表示」設定は、画面サイズに基づいてボタンの表示を制御します。

ページをさらに下にスクロールすると、「デザイン」のサブセクションがあります。カスタマイズできるのは次のとおりです。

• ボタンのスタイル: ソリッド、インバース、ボーダードラベル、ボーダードボタン、ミニマルラベル、ミニマル
• ボタンレイアウト：自動幅、1〜6列
• ボタンの配置: 左、右、中央
• ボタンのサイズ: 小、中、大
• ボタンの形状：角丸、丸みを帯びた、円形

その後、ボタンの色を変更したい場合があります。その場合は、カラーピッカーツールを操作して色を選択してください。

このチュートリアルでは、ボタンをよりインタラクティブに感じさせるために「ホバー時の反転」機能を有効にしました。これにより、ユーザーがボタンにカーソルを合わせたときにボタンの色が反転するホバーエフェクトが追加され、クリック可能であることを視覚的に示します。

さらに面白くするために、カラーピッカーツールを使用してボタンのホバーカラーを選択できます。ボタンのマージンとラベル表示を調整する設定もあります。

「デザイン」サブセクションのすぐ下に、「シェア数」があります。

ここでは、すべてのネットワークでの合計共有数を表示できます。そして、ボタンの前または後のように、表示場所を変更したい場合があります。色をWordPressサイトに合わせて調整することもできます。

プラットフォームごとの共有数も表示したいですか？「ネットワーク共有数」を有効にしてください。

ただし、一部のソーシャルメディアプラットフォームは、共有カウントデータをサポートしなくなったことに注意してください。そのため、数値が表示されない場合があります。

最後に、「コールトゥアクション」のサブセクションがあります。

ボタンに短いテキストラベルを追加して、読者にボタンの機能（例：「この記事をシェア」または「今すぐツイート」）をガイドできます。

フォントサイズや色をサイトのスタイルに合わせてカスタマイズすることもできます。

調整が完了したら、「変更を保存」ボタンをクリックできます。

これで完了です！Novashareは、投稿にTwitter（X）共有ボタンをすぐに表示します。私のテストウェブサイトからの例を次に示します。

方法2：Smash Balloonを使用してWordPressでユーザーにツイートをリツイートさせる方法

ページや投稿にシンプルな共有ボタンを追加したい場合は、Novashareが適しています。しかし、訪問者に最近のツイートをリツイートするように促したい場合もあります。これにより、エンゲージメントを高め、コンテンツをさらに広めることができます。

リツイートを増やす最良の方法は、Smash Balloon Twitter Feed Proを使用することです。このTwitterフィードプラグインを使用すると、Twitter（X）のフィード全体を任意のページ、投稿、またはウィジェット対応エリアに追加できます。

💡 注: プラグインの詳細については、WPBeginnerチームによる完全なSmash Balloon レビューをご覧ください。

各ツイートには、Twitterアクション用の独自のメニューがあります。

これは、訪問者が「リツイート」ボタンをクリックするだけでツイートを再投稿できることを意味します。

さらに良いことに、フィードは自動的に更新されるため、訪問者がエンゲージできる新しいツイートが常にあります。これにより、頻繁に訪問するユーザーにとっても、サイトを新鮮で魅力的なものに保つことができます。

ステップ1：Twitter Feed Proの設定

まず、SmashBalloonのウェブサイトでSmashBalloonアカウントを作成する必要があります。「開始する」ボタンをクリックし、プランを選択して、画面の指示に従ってプロセスを完了してください。

サインアップが完了すると、独自のSmash Balloonダッシュボードとライセンスキーが発行されます。このタブを開いたままにするか、ライセンスキーを安全な場所にコピーしておいてください。すぐに必要になります。

これで、Smash Balloon's Twitter Feed Proをインストールして有効化する準備ができました。

WordPress管理ダッシュボードから、プラグイン » 新規プラグインを追加に移動しましょう。

次の画面で、検索バーを使用してSmash Balloon Twitter Feedプラグインをすばやく検索しましょう。

検索結果で、「今すぐインストール」をクリックし、次に「有効化」をクリックします。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するWPBeginnerのガイドを参照してください。WordPressプラグインのインストール方法。

プラグインをインストールしたら、Twitter Feed » 設定に移動します。「ライセンスキー」フィールドにSmash Balloonライセンスキーを入力できます。

この情報は、Smash Balloon を購入した際に届いた確認メールと、Smash Balloonアカウントで確認できます。

ライセンスキーを追加したら、「有効化」ボタンをクリックしてください。

ステップ2：WordPress用のライブTwitterフィードを作成する

それが完了したら、カスタムTwitterフィードを作成する準備が整いました。開始するには、Twitter Feed » All Feedsに移動し、「新規追加」ボタンをクリックします。

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

これを行うには、単に「接続」ボタンをクリックし、画面の指示に従ってください。

完了すると、プラグインページに戻ります。Smash Balloon には、作成できるさまざまな種類の Twitter フィードが表示されます。

より多くのリツイートを希望する場合は、「ユーザータイムライン」を選択して「次へ」をクリックしてください。

次の画面で、@記号の後にTwitter（X）アカウントの名前を入力する必要があります。

準備ができたら、「次へ」をクリックしてSmash Balloonのメインエディタを開きます。

次に、Twitterフィードで使用するテンプレートを選択できます。

例えば、「Simple Carousel」を選択して、ツイートをレスポンシブスライダーで表示することができます。最も最近のツイートのみを宣伝したい場合は、「Latest Tweet」テンプレートを選択することもできます。

このチュートリアルでは「デフォルト」テンプレートを使用しますが、お好きなテンプレートを選択できます。

決定したら、「次へ」をクリックします。

Smash Balloon には、カスタマイズの準備ができた ソーシャルメディアフィードのプレビューが表示されます。

ステップ 3: WordPress Twitter フィードをカスタマイズする

テンプレートの外観に満足していませんか？変更するには、左側のメニューから「テンプレート」を選択するだけです。

次に「変更」ボタンをクリックできます。

ここで新しいレイアウトを選択できるポップアップが開きます。

新しいテンプレートを選択してから、「更新」をクリックしてください。

それが完了したら、「カスタマイズ」リンクをクリックする必要があります。

これで、Smash Balloon のメイン設定に戻ります。

左側のメニューの次のオプションは「フィードレイアウト」なので、クリックしてください。

ここで、Twitterフィードの高さを変更したり、訪問者が最初に表示するツイートの数を変更したりできます。また、グリッド、Masonry、またはCarouselレイアウトを切り替えることもできます。

変更を加えるとプレビューが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。

使用しているレイアウトによっては、Smash Balloon がデスクトップ、タブレット、モバイルデバイスに表示する列数を変更できる場合があります。

スマートフォンやタブレットは通常、画面が小さく処理能力も低いため、モバイルデバイスでは列数を少なく表示したい場合があります。これにより、サイトを モバイルフレンドリーに保つことができます。

デバイスに基づいてこれをカスタマイズするには、「列」セクションのドロップダウンメニューを使用するだけです。

フィードレイアウトの設定に満足したら、もう一度「カスタマイズ」リンクをクリックしてメイン設定画面に戻ります。

ここで、「カラー スキーム」をクリックできます。

デフォルトでは、Smash BalloonはWordPressテーマから継承された色を使用しますが、代わりに「ライト」または「ダーク」の配色に切り替えることができます。

もう 1 つのオプションは、「カスタム」を選択して独自のカラー スキームを作成し、コントロールを使用して背景色を変更したり、テキストの色を変更したりすることです。

変更に満足したら、もう一度「カスタマイズ」リンクをクリックします。メイン設定画面に戻ったら、「ヘッダー」をクリックする必要があります。

デフォルトでは、Smash Balloon はフィードに「標準」ヘッダーを追加します。これには、「フォロー」ボタンと、利用可能な場合はTwitterのプロフィールが表示されます。

Twitterのプロフィールを非表示にしたい場合は、「プロフィールを表示」トグルをクリックして無効にします。

または、「テキスト」を選択すると、「Twitterにいます」というヘッダーがフィードに追加されます。

「テキスト」ボックスに入力することで、これを独自のメッセージに置き換えることができます。

メッセージに満足したら、ヘッダーのサイズと色を変更できます。

その後、Smash Balloonのメイン設定画面に戻り、「ツイート」を選択します。ここで、「ツイートスタイル」と「個々の要素を編集」を選択できます。

「ツイートスタイル」を選択した場合、ボックスレイアウトと通常レイアウトのどちらかを選択できます。

「ボックス」を選択すると、各ツイートに色の背景を作成できます。境界線の半径を大きくして角を丸くしたり、ボックスシャドウを追加したりすることもできます。

「通常」を選択した場合、さまざまなソーシャルメディア投稿を区切る線の太さと色を変更できます。

変更に満足したら、「ツイート」をクリックするだけです。

これで前の画面に戻ります。

この場合、「個々の要素を編集」をクリックできます。

これで、Twitter Feed Proが各ツイートに含めるすべてのコンテンツ（著者、ツイートテキスト、Twitterロゴなど）が表示されます。

できるだけ多くのリツイートを獲得するために、リツイートアイコンを際立たせるのは良い考えです。これを行うには、「ツイートアクション」の横にある矢印をクリックします。

ここで、「サイズ」ドロップダウンを使用してツイートアクションを大きくしたり、色を変更したりできます。

Smash Balloonは、これらの変更を「リツイート」アイコンだけでなく、すべてのツイートアクションに適用することに注意してください。

ツイートアクションの外観に満足したら、「Elements」テキストをクリックするだけです。

これで前の画面に戻ります。

他の個々の要素をカスタマイズするには、このプロセスを繰り返してください。

要素のチェックを外すことで、要素を非表示にすることもできます。

不要なコンテンツを非表示にすることも、リツイートアクションを際立たせるのに役立つトリックです。

ツイートの外観に満足したら、メインのSmash Balloon設定画面に戻り、「もっと読み込む」ボタンを選択できます。

これは非常に重要なボタンなので、サイトのデザインに合わせて背景色、ホバー状態、ラベルなどを変更してカスタマイズしたい場合があります。

「もっと読み込む」のデフォルトテキストを、[テキスト]フィールドに入力して独自のメッセージに置き換えることもできます。

その他のオプションとして、無限スクロールを有効にすると、訪問者がフィードの終わりに達したときに新しいツイートが自動的に表示されます。これにより、訪問者はより多くのツイートを探索するようになり、追加のリツイートを獲得できる可能性があります。

この機能を有効にするには、単に「無限スクロール」スライダーをクリックして、グレー（無効）から青（有効）に切り替えます。

「トリガー距離」を変更することもできます。これは、Smash Balloonが新しいツイートをいつ読み込むかを指示します。ただし、デフォルトの設定はほとんどのWordPressウェブサイトでうまく機能するはずです。

その後、Smash Balloon のメイン設定画面の最後のオプションは「ライトボックス」です。

デフォルトでは、Twitter Feed Pro は、訪問者がライトボックスポップアップでフィードの画像や動画をスクロールできるようにします。

これにより、訪問者はフィードの画像に詳しくなったり、ウェブサイトを離れることなく動画を視聴したりできるため、追加のリツイートを獲得できます。

それを踏まえて、ライトボックスは有効のままにしておくことをお勧めします。

ただし、この機能を無効にしたい場合は、青い「有効」トグルをクリックして灰色にしてください。

Twitterフィードの外観に満足したら、「保存」をクリックすることを忘れないでください。その後、WordPressウェブサイトにTwitterフィードとリツイートボタンを埋め込む準備が整います。

ステップ 4: Twitter フィードを WordPress に追加する

ショートコードまたはTwitterフィードブロックを使用して、Twitterフィードをウェブサイトに追加できます。最も簡単な方法なので、まずSmash Balloonブロックを使用してフィードを任意のページまたは投稿に追加する方法を見てみましょう。

複数のフィードを作成した場合、埋め込みたいフィードのコードを見つける必要があります。

この情報を取得するには、Twitterフィード » すべてのフィードに移動し、「ショートコード」列のコードをコピーします。このコードをサイトに追加する必要があるため、メモしておいてください。

次の画像では、[custom-twitter-feeds feed=2]を使用する必要があります。

その後、Twitter フィードを埋め込みたいページまたは投稿を開きます。次に、「+」アイコンをクリックして新しいブロックを追加し、「Twitter Feed」と入力し始めます。

右側のブロックが表示されたら、クリックしてブログ投稿に追加します。

デフォルトでは、ブロックにTwitterフィードのいずれかが表示されます。別のフィードを使用したい場合は、右側のメニューで「ショートコード設定」を探してください。

ここで、ショートコードを追加してから「変更を適用」をクリックします。

ブロックにTwitterフィードが表示され、投稿を公開または更新するだけでウェブサイトで公開できます。

別のオプションとして、フィードをウィジェット対応エリアやサイドバーのようなサイト全体のデザイン要素に追加することもできます。これにより、訪問者はウェブサイトのどのページからでも最新の投稿をリツイートできるようになります。

ブロックテーマを使用している場合は、ページや投稿で示したのと同じアプローチを使用して、フルサイトエディターのテンプレートまたはテンプレートパーツのいずれかにTwitterフィードブロックを直接追加できます。

これを行う方法の詳細な手順については、WordPressのフルサイト編集に関する初心者向けガイドをご覧ください。

ブロックテーマを使用していない場合は、WordPressダッシュボードの外観 » ウィジェットに移動し、青い「+」ボタンをクリックする必要があります。

それが完了したら、適切なウィジェットを見つけるために「Twitter Feed」と入力する必要があります。

次に、フィードとリツイートボタンを表示したい領域にドラッグします。

このウィジェットには、Smash Balloonで作成したフィードのいずれかが表示されます。

代わりに別のTwitterフィードを表示するには、フィードのコードを「ショートコード設定」ボックスに入力し、「変更を適用」をクリックしてください。

「更新」ボタンをクリックすると、ウィジェットが公開されます。詳細については、WordPressでウィジェットを追加して使用する方法のステップバイステップガイドをご覧ください。

最後に、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアにフィードとリツイートボタンを埋め込むことができます。

Twitter Feed » All Feeds に移動し、「ショートコード」列のコードをコピーするだけです。これで、サイトのウィジェット対応エリアにショートコードを追加できます。

詳細については、WordPressにショートコードを追加する方法に関する詳細ガイドをご覧ください。

WordPressでTwitterを使用するその他の方法を学ぶ

この記事が、WordPressにTwitter共有ボタンとリツイートボタンを追加するのに役立ったことを願っています。

WordPressサイトを宣伝するためにTwitter（X）プロフィールを最大限に活用したいですか？あるいは、サイトにもっとTwitterコンテンツを追加したいですか？

以下のガイドをご覧ください：

• WordPressにTwitterカードを追加する方法：初心者向けガイド
• WordPressで壊れたTwitterカード画像を修正する方法
• WordPressでポップアップを使ってTwitterページを宣伝する方法
• WordPressでTwitterフォロワー数を表示する方法
• WordPressでファイルダウンロード用の「ツイートで支払い」ボタンを追加する方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。