WordPressでTwitterフォロワー数をテキストとして表示する方法

ウェブサイト訪問者との信頼関係を築きたいですか？最も簡単な方法の1つは、Twitter（X）のフォロワー数を表示することです。しかし、WordPressサイトに追加しようとすると、ほとんどのソーシャルメディアウィジェットはかさばり、サイトの速度を低下させ、見た目も良くないことに気づくでしょう。

良いニュースは？それらの重いウィジェットは必要ありません。

何百ものWordPressサイトを扱ってきた結果、Xのフォロワー数をテキストとして追加するクリーンでシンプルな方法を見つけました。サイトのデザインを乱雑にするのではなく、うまく機能する方法です。✨

このガイドでは、WordPressでTwitterフォロワー数をテキストとして表示する方法をステップバイステップで説明します。

WordPressでTwitterフォロワー数をテキストで表示する理由

Twitter（X）のフォロワー数をテキストで表示すると、訪問者との信頼関係をすぐに築くことができます。他の人があなたをフォローしているのを見ると、あなたのビジネスを信頼できると見なし、ニッチ分野の専門家として認識される可能性が高まります。

これは、ソーシャルプルーフの一般的な形式です。多くの人気ブログ、インフルエンサー、そして有名ブランドのWordPressサイトは、ソーシャルメディアでどれだけの人が自分をフォローしているかを誇らしげに表示しています。

現在、多くのベストソーシャルメディアプラグインでは、埋め込みフィード、ボタン、バナーなどで合計フォロワー数を表示できます。

ただし、場合によっては、フォロワー数をプレーンテキストで表示したい場合があります。これにより、フォロワー数をブログ記事、フッター、またはWordPressウェブサイトの他の場所に自由に追加できます。

これを踏まえて、WordPressでTwitterのフォロワー数をテキストとして表示する方法をご紹介します。これから説明するすべてのステップの概要を以下に示します。

1. X APIキーとシークレットを取得する
2. WordPressサイトにカスタムコードを追加する
3. Bonus Tip: More X Tricks!
   1. X共有およびリツイートボタンを追加する
   2. ポップアップを使用してXページを宣伝する
4. よくある質問：Xフォロワー数をテキストとして表示
5. 関連記事: WordPress ユーザー向けソーシャルメディアガイド

さあ、始めましょう。

ステップ1：X APIキーとシークレットを取得する

フォロワー数を取得するには、APIキーとシークレットを作成してX APIにアクセスする必要があります。

まず、X開発者ポータルにアクセスし、「無料アカウントにサインアップ」をクリックしてください。

これで、X APIの使用方法に関する情報を入力できます。

できるだけ多くの詳細を提供することをお勧めします。Xはこれらの情報をレビューし、APIの利用方法を理解できない場合はアカウントを削除する可能性があるためです。

その後、利用規約を読むのを忘れないでください。続行してもよろしければ、「送信」ボタンをクリックしてください。

開発者ポータルが表示されます。

左側のメニューで、「プロジェクトとアプリ」セクションをクリックして展開します。次に、「概要」を選択して、すぐに使用できるプロジェクトアプリを表示します。

キーボタンをクリックしてAPIキーとシークレットにアクセスし、次に「APIキーを表示」ボタンをクリックします。

X には API キーと API シークレットが表示されるようになります。この情報は今回限り表示されるものですので、安全な場所に保存してください。さらにセキュリティを高めるために、パスワードマネージャーの使用をお勧めします。🔐

APIキーシークレットを紛失した場合は、再生成する必要があります。これにより、以前のものは無効になります。

「再生成」ボタンをクリックするだけで、新しいAPIキーとシークレットを作成できます。

ステップ2：WordPressサイトにカスタムコードを追加する

Xのフォロワー数をサイトに追加する最も簡単な方法は、PHPコードを使用することです。

セキュリティ上の理由から、WordPressではPHPコードをページや投稿に直接追加することは許可されていませんが、ショートコードは許可されています。これは、カスタムショートコードを作成し、それをPHPコードにリンクできることを意味します。

WordPressでカスタムショートコードを追加する最も簡単な方法は、WordPressでカスタムショートコードを追加することです。WPCodeを使用します。このプラグインを使用すると、必要なだけ多くのショートコードを作成し、それらをPHPコードのさまざまなセクションにリンクできます。

一部のパートナーウェブサイトでは、WPCodeを使用してカスタムコードスニペットを追加しています。コード管理の簡素化、エラーの削減、サイトの整理に役立つと喜んでいます。

プラグインに関する詳細については、WPCode の完全なレビューをご覧ください。

まず最初に行うべきことは、無料のWPCodeプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、コードスニペット » スニペットの追加に移動しましょう。

ここには、ウェブサイトに追加できる既製のスニペットがすべて表示されます。これには、WordPressのコメントを完全に無効にする、WordPressがデフォルトでサポートしていないファイルをアップロードするなど、さまざまなスニペットが含まれています。

新しいスニペットを作成しているので、「カスタムコードを追加（新規スニペット）」にマウスカーソルを合わせ、「スニペットを使用」をクリックします。

表示されるポップアップで、コードの種類を選択する必要があります。

このチュートリアルでは、「PHPスニペット」を選択できます。

コードスニペットエディタが表示されます。

ここで、最初に行うことは、カスタムコードスニペットのタイトルを入力することです。これは、WordPressダッシュボードでスニペットを参照するのに役立つものであれば何でも構いません。

コードエディターで、次のPHPコードを貼り付けるだけです。

/**
 * Fetches the X (Twitter) follower count and caches it.
 *
 * @param string $screenName The X handle to fetch followers for.
 * @return int|string The number of followers or the last known count on error.
 */
function wpb_get_twitter_followers($screenName = 'wpbeginner') {
    // Your X API credentials from your developer account.
    // Replace with your actual keys.
    $apiKey    = 'YOUR_API_KEY';
    $apiKeySecret = 'YOUR_API_KEY_SECRET';

    // Get the follower count from a temporary cache to speed up your site.
    $numberOfFollowers = get_transient('wpb_twitter_followers');

    // If the cache is empty or expired, fetch new data from the API.
    if (false === $numberOfFollowers) {
        
        // Prepare credentials for authentication.
        $credentials = base64_encode( $apiKey . ':' . $apiKeySecret );

        // Make a request to the X API for an authentication token.
        $auth_response = wp_remote_post('https://api.twitter.com/oauth2/token', array(
            'method'      => 'POST',
            'httpversion' => '1.1',
            'blocking'    => true,
            'headers'     => array(
                'Authorization' => 'Basic ' . $credentials,
                'Content-Type'  => 'application/x-www-form-urlencoded;charset=UTF-8',
            ),
            'body'        => array( 'grant_type' => 'client_credentials' ),
        ));

        $keys = json_decode(wp_remote_retrieve_body($auth_response));

        // If we have a valid token, proceed to get follower count.
        if (isset($keys->access_token)) {
            $token = $keys->access_token;

            // Now, make the request for user data using the token.
            $api_url = "https://api.twitter.com/1.1/users/show.json?screen_name=$screenName";
            $data_response = wp_remote_get($api_url, array(
                'httpversion' => '1.1',
                'blocking'    => true,
                'headers'     => array(
                    'Authorization' => "Bearer $token",
                ),
            ));

            if (!is_wp_error($data_response)) {
                $followers = json_decode(wp_remote_retrieve_body($data_response));
                if (isset($followers->followers_count)) {
                    $numberOfFollowers = $followers->followers_count;
                    // Cache the result for 1 hour and save a fallback option.
                    set_transient('wpb_twitter_followers', $numberOfFollowers, 1 * HOUR_IN_SECONDS);
                    update_option('wpb_twitter_followers_fallback', $numberOfFollowers);
                }
            }
        }
    }

    // If the API call fails for any reason, use the last successfully saved count.
    if (false === $numberOfFollowers) {
        return get_option('wpb_twitter_followers_fallback', 0);
    }

    return $numberOfFollowers;
}

/**
 * Creates the WordPress shortcode [x_followers].
 */
function wpb_x_followers_shortcode_function() {
    // Change 'wpbeginner' to your X username.
    $count = wpb_get_twitter_followers('wpbeginner');
    
    // Make sure we have a number before formatting it for display.
    if (is_numeric($count)) {
        return number_format_i18n($count);
    }
    
    return ''; // Return nothing if there's an error.
}
add_shortcode('x_followers', 'wpb_x_followers_shortcode_function');
?>

これで、コード内のプレースホルダーAPI認証情報を、Xデベロッパーポータルから保存した情報に置き換える必要があります。

これらの行を見つけます：

    $apiKey    = 'YOUR_API_KEY';
    $apiKeySecret = 'YOUR_API_KEY_SECRET';

'YOUR_API_KEY'と'YOUR_API_KEY_SECRET'を実際のキーに置き換えてください。

次に、wpb_x_followers_shortcode_function内のこの行を見つけます。

$count = wpb_get_twitter_followers('wpbeginner');

表示したいフォロワーがいるXのユーザー名に'wpbeginner'を置き換える必要があります。これは公開されている任意のXアカウントで構いません。

Xのユーザー名を取得するには、新しいタブでXのプロフィールを開くだけです。

ユーザー名は URL とプロフィールヘッダーで見つけることができます。

これで、WPCodeエディターページに戻ることができます。

ここで、「非アクティブ」トグルをクリックするだけで、「アクティブ」に変わります。

その後、「スニペットを保存」ボタンをクリックしてください。

このコードは、カスタムショートコード `[x_followers]` を自動的に作成します。

これで、サイトのどこにでもこのショートコードを追加して、フォロワー数をソーシャルプルーフとして表示できます。

使用するには、カウントを表示したい任意のページ、投稿、またはウィジェットエリアを編集するだけです。

ブロックエディターでは、「+」ボタンをクリックして「ショートコード」と入力するだけです。表示されたら、「ショートコード」ブロックを選択して、ページまたは投稿に追加できます。

[x_followers]ショートコードをショートコードブロックに貼り付けるだけです。

短縮コードは数値のみを表示することに注意してください。そのため、数値の周りにコンテキストを追加することをお勧めします。たとえば、「Twitterフォロワーは[x_followers]人です！」のように記述できます。

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

ページのセットアップが完了したら、「更新」または「公開」ボタンのいずれかをクリックして、フォロワー数をライブにすることができます。

これで、WordPressウェブサイトにアクセスすると、フォロワー数がライブで表示されます。

ボーナスのヒント：その他のXのトリック！

WordPressサイトにTwitter（またはX）のフォロワー数を表示する方法を学んだので、Xマーケティングをさらに最適化するのは良い考えです。

X共有およびリツイートボタンを追加する

サイトにX（旧Twitter）のシェアボタンとリツイートボタンを追加すると、トラフィックを増やし、リーチを広げるのに役立ちます。Xには毎月2億1700万人以上のユーザーがいるため、コンテンツを宣伝するのに最適な場所です。

これらのボタンにより、ユーザーはあなたの投稿を簡単に共有できるため、フォロワー以外の人々にリーチできます。これにより、ブログへの訪問者が増えるだけでなく、コンテンツが信頼され、好かれていることが他の人に示され、ブランドの信頼性が高まります。

これを行うには、Twitterの共有ボタンとリツイートボタンを追加する方法に関するガイドをご覧ください。

ポップアップを使用してXページを宣伝する

次に、ポップアップでページを宣伝することで、Xプロフィールの表示を強化し、より多くのフォロワーを獲得できます。

OptinMonsterは、邪魔にならずに、注目を集めるポップアップを簡単に作成できます。これは、市場で最も強力なリードジェネレーションソフトウェアの1つであり、訪問者にXでフォローするように促す美しいポップアップをデザインできます。

WPBeginnerでは、ポップアップ、スライドイン、フローティングバーのすべてにOptinMonsterを利用しています。そのスマートなターゲティングルールにより、適切な人に適切なメッセージを表示できるため、ソーシャルメディアのフォロワーやメールリストの成長に不可欠なものとなっています。

詳細については、OptinMonsterのレビュー全文をお読みください。

ステップバイステップガイドについては、ポップアップで WordPress の Twitter ページを宣伝する方法をご覧ください。

OptinMonsterは、ソーシャルメディアのポップアップ以外にも、メールリストの構築、コンテンツアップグレードの提供、お問い合わせフォームの表示などに役立ちます。

よくある質問：Xフォロワー数をテキストとして表示

この方法では、フォロワー数はどのくらいの頻度で更新されますか？

このガイドの方法では、約1時間に1回フォロワー数を更新するキャッシュシステムを使用します。これにより、X APIへの継続的なリクエストでサイトが遅くなることなく、数値を最新の状態に保つことができます。

このカスタムコードを追加すると、私のウェブサイトは遅くなりますか？

いいえ。このアプローチは軽量です。カウントをプレーンテキストとして表示し、キャッシュを使用することで、重いソーシャルメディアプラグインやウィジェットによくあるパフォーマンスの問題を回避します。

ウェブサイトに完全なTwitterフィードを追加する最良の方法は何ですか？

数値以上の情報が必要な場合は、最も簡単な方法はプラグインです。コードに触れることなく、インタラクティブでカスタマイズ可能なTwitter（X）フィードを埋め込むことができるSmash Balloonをお勧めします。

関連記事: WordPress ユーザー向けソーシャルメディアガイド

このチュートリアルがお役に立ち、WordPressでTwitterフォロワー数をテキストとして表示する方法を学べたことを願っています。次に、これらのガイドも読むことをお勧めします。

• WordPressに最適なTwitterプラグイン
• WordPressでカスタムInstagram写真フィードを作成する方法
• WordPressにPinterestの「ピンする」ボタンを追加する方法
• WordPressでソーシャルメディアのフォロワー数を表示する方法
• ソーシャルメディアコンテストを実行してサイトを成長させる方法
• WordPress向けソーシャルメディア完全チートシート

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