WordPressでソーシャルメディアのフォロワー数を表示する方法

WordPressサイトにソーシャルメディアのフォロワー数を表示することは、ブランドの信頼性を高める強力な方法です。Instagram、Twitter、Facebookなどのプラットフォームで存在感を示していることが訪問者に伝われば、あなたのブランドが他の人たちから信頼されているという自信が生まれます。

この社会的証明によって、より多くの人々があなたをフォローし、あなたのコンテンツに関与し、複数のチャネルであなたのブランドとつながることができる。

WPBeginnerでは、ソーシャルメディアがウェブサイトへのトラフィックを促進する上で果たす役割を認識しています。そのため、ソーシャルメディア共有ボタンをサイトに追加し、さまざまなプラットフォームで製品やサービスを一貫して宣伝しています。これにより、視聴者とのつながりを維持し、ブランド認知度を向上させています。

この記事では、WordPressでソーシャルメディアのフォロワー数をテキストとして簡単に表示する方法を紹介する。私たちのステップバイステップのガイドは簡単で、コーディングを使用する必要はありません。

なぜソーシャルメディアのフォロワー数をサイトに表示するのか？

人気ブログ、インフルエンサー、ブランドの多くが、ソーシャルメディアのフォロワー数を誇らしげにサイトに表示していることにお気づきだろうか。

フォロワー数は、WordPressウェブサイトに社会的証明を追加するのに役立ちます。これにより、以前の顧客やフォロワーを証拠として示すことで、ユーザーの信頼を獲得し、ブランドアイデンティティを構築することができます。

さらに、ユーザーに便利な連絡方法を提供しながら、ソーシャルメディアのプロフィールでより多くのフォロワーを獲得するのに役立ちます。

残念なことに、ソーシャルメディアのフォロワー数を表示するのは、私たちが望むほど単純でも簡単でもありませんが、それは最も間違いなく可能です。

多くのソーシャルメディア・プラットフォームは、この情報を取得するためにAPIキーを必要とし、その方法はそれぞれ異なる。

幸いなことに、WordPressにはソーシャルメディアのフォロワー数を表示できるプラグインやソリューションがいくつかある。

そこで、WordPressサイトでソーシャルメディアのフォロワー数を表示するさまざまな方法をご紹介します。あなたに最適なものを選んでください：

方法1：プラグインを使ってソーシャルメディアのフォロワー数を表示する

この方法の方が簡単で、APIキーを取得できない場合は、APIキーの必須項目を省略することができる。

しかし、少し信頼性が低く、フォロワー数をリアルタイムで取得できない場合がある。というのも、ソーシャルメディア・プラットフォームは頻繁にAPIキーの方法を変更するため、古い方法を使用しているアプリケーションは壊れてしまうからだ。

良い点は、プラグインが手動でソーシャルメディアのフォロワーをテキストとして入力するフォールバックオプションを提供していることです。

まず、Wp Social Login and Register Social Counterプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードからWP Social ” Social Counterページに行き、プロバイダータブに切り替えます。

ここから、表示させたい各ソーシャルメディア・プラットフォームをオンにし、設定ボタンをクリックして設定する。

ポップアップが表示され、そのプラットフォームのソーシャルメディア・プロフィールの詳細を入力することができます。Facebookのフォロワー数を手動で入力するオプションもあります。

表示したいソーシャルメディアプラットフォームすべてについて、このプロセスを繰り返す。

完了したら、外観 ” ウィジェットページに移動し、サイドバーにWSLUソーシャルカウンターウィジェットを追加することができます。

変更を保存し、サイトをプレビューすることをお忘れなく。

投稿やページにソーシャルメディアのフォロワー数を表示したいですか？フォロワー数を表示したい投稿やページを編集し、コンテンツエディターで以下のショートコードを追加するだけです。

[xs_social_counter】。］

その後、「公開する」または「更新する」ボタンをクリックして、設定を保存することができます。

WordPressサイトにアクセスして、ソーシャルメディアのフォロワー数を表示できるようになりました。

方法2：Smash Balloonでソーシャルメディアのフィードを表示する

ソーシャルメディアのフォロワー数を表示するよりも簡単な方法は、Smash Balloonを使ってソーシャルフィードを表示することです。

Smash BalloonはWordPressに最適なソーシャルメディアプラグインです。ソーシャルメディアのコンテンツを美しいレイアウトでフィードとして表示することができます。

まず、Smash Balloonのウェブサイトをご覧ください。Instagram、Twitter、Facebook、YouTube、そしてソーシャルウォールを組み合わせたフィードなど、さまざまなソーシャルメディアフィードプラグインを提供している。

すべてのプラグインを入手できるAll Access Bundleをお勧めします。

登録後、Smash Balloonのアカウントにログインし、プラグインをコンピューターにダウンロードすることができます。

次に、Smash Balloonフィードプラグインを1つずつインストールします。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

このチュートリアルでは、すべてのソーシャルメディアのフィードをつなげて1つのものとして表示するソーシャルウォールを作成する方法を紹介します。

注： これを行うには、Smash Balloonのソーシャルウォール・プラグインとフィード・プラグインが必要です。

有効化したら、WordPressダッシュボードからソーシャルウォールメニュータブにアクセスし、上部にある「新規追加」ボタンをクリックします。

新しい画面が表示され、ソーシャルメディア・プラットフォームのリストと接続ボタンが表示されます。あなたのソーシャルウォールに表示したいフィードのあるプラットフォームの’ウォールに追加’ボタンをクリックしてください。

すでに作成済みでソーシャルウォールに追加したいフィードのリストが表示されます。

Smash Balloonでソーシャルメディアフィードを作成する方法については、以下のチュートリアルをご覧ください：

• WordPressでInstagramのフィードを表示する方法
• WordPressでFacebookの投稿を表示する方法
• WordPressで最新のツイートを表示する方法

フィードを選択したら、上部にある「Create Wall」ボタンをクリックします。

Smash Balloonビジュアルエディターが起動し、右側にソーシャルウォールのプレビュー、左側にカスタマイザーの設定が表示されます。

ここから、レイアウトやカラーパレットの変更、ボタンの追加などができます。詳しくは、WordPressにソーシャルメディアのフィードを追加する方法のチュートリアルをご覧ください。

最後に、一番上の「保存」ボタンをクリックして設定を保存します。次に、「埋め込み」ボタンをクリックします。

画面上にプロンプトが表示されるので、作成したソーシャルウォールのショートコードをコピーする。

次の投稿では、フィードエディターを終了し、ブロックエディターでソーシャルウォールを追加したいページまたは投稿を開きます。

ここから、画面左上の「ブロックを追加」（＋）ボタンをクリックし、ブロックメニューを開きます。そして、ソーシャルウォール・ブロックをページ/投稿に追加します。

先ほどコピー＆ペーストしたショートコードを、右側のブロックパネルにある「ショートコード設定」ボックスに貼り付けます。

最後に、’Publish’または’Update’ボタンをクリックして設定を保存します。これで、Facebook、Twitter、Instagramアカウントのフィードを持つソーシャルウォールがウェブサイトに追加されました。

方法3：コードを使って手動でフォロワー数を取得・表示する

この方法は少し高度で、初心者にはあまり効果がないかもしれない。しかし、ソーシャルメディアのフォロワー数をテキストとして取得するのに役立つだろう。

基本的に、ほとんどのソーシャルメディア・プラットフォームは、フォロワー数などのデータをサーバーから取得するために、アプリの作成とユーザーAPIキーを必須としている。

この方法では、APIキーを使ってTwitterとFacebookのフォロワー数を取得する方法を紹介する。

WordPressサイトにカスタムコードを追加する必要があります。WordPressでコードをコピー＆ペーストする方法をご覧ください。

コードを使用してFacebookのフォロワー数を表示する

Facebookのフォロワー数を取得するには、以下を実行する必要があります：

1. FacebookのAPIにアクセスするためにFacebookアプリを作成します。
2. アクセストークンを生成します。これはパスワードの役割を果たし、必要な情報を取得することができます。
3. Facebookアプリとアクセストークンを使って、WordPressでFacebookの「いいね！」を獲得しましょう。

1.Facebookアプリを作成する

まずはFacebookアプリを作成するところから始めましょう。メタ情報開発者のサイトに行き、「アプリを作成」ボタンをクリックするだけです。

その後、アプリの種類を選択するよう求められます。

ビジネス」をクリックし、「次へ」ボタンをクリックして次に進みます。

その後、アプリ名（何でも構いません）とメールアドレスを聞かれます。

ビジネスアカウント設定をスキップして、「アプリを作成」ボタンをクリックすることができます。

Facebookのパスワード入力を求められる場合があります。

アプリのダッシュボードにリダイレクトされます。

この画面には複数のオプションが表示されますが、私たちは個人的な使用目的でアプリを使用しているので、現時点ではこれらのオプションは必要ありません。

2.Facebook APIのアクセストークンの取得

次に、Graph APIエクスプローラーページにアクセスしてアクセストークンを生成し、ページIDを取得する必要がある。

まず、Facebookアプリセクションで作成したアプリを選択します。

その後、’Get Token’ドロップダウンメニューをクリックし、’Page Access Token’オプションを選択します。

アクセス許可のポップアップが表示されます。その中で、個人アカウントとして継続し、アクセストークンが必要なページを選択する必要があります。

次に、いくつかの権限と警告が表示されます。

これらを無視して「Done」をクリックしてもよい。

Facebookがアクセストークンを生成します。

アクセストークンをコピー＆ペーストして、メモ帳やテキストエディットのようなプレーンテキストエディターを使ってコンピューターに貼り付けるだけです。

出発する前に、次に必要なのはページIDだ。

これを取得するには、上記のフォームにページのURLスラッグを入力し、「送信」ボタンをクリックする必要があります。

メモ帳やテキストエディターなどのプレーンテキストエディターを使って、コンピューター上でページIDをコピー＆ペーストすることができます。

3.WordPressでFacebookの「いいね！」を表示する

まず、WordPressテーマのfunctions.phpファイルに以下のコードをコピー＆ペーストするか、WPCodeを使用する（推奨）：

function getFacebookLike( $fbid, $token ){ 
$json_string = @file_get_contents('https://graph.facebook.com/v14.0/'. esc_attr( $fbid ) .'/?fields=fan_count&access_token='. esc_attr( $token ) );
$json = json_decode($json_string, true); 
$like_count = isset( $json['fan_count'] ) ? $json['fan_count'] : 0;
return $like_count;
}

詳しくは、WordPressでカスタマイザーコードを追加する方法をご覧ください。

次に、WordPressテーマのテンプレートで、Facebookの「いいね！」数をテキストで表示したい場所に、以下のコードを貼り付けます：

<?php 
echo "<p>More than <strong>" . getFacebookLike( $fbid = 'Facebook page ID', 'access token' ) .  "</strong> users follow us on Facebook.</p> "; 
?>

FacebookページのIDとアクセストークンを、先ほどコピーした値で置き換えることをお忘れなく。

これで、あなたのサイトにアクセスして、コードが実際に動いているのを見ることができます。これがテストサイトでの様子です。

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

Twitterのフォロワーをテキストとしてカウントさせるには、以下の手順を踏む必要がある：

1. Twitterアプリを作成する。
2. Twitter APIキーを取得します。
3. WordPressのフォロワー数を取得する。

1.Twitterアプリの作成とAPIキーの取得

まず、Twitter開発者のサイトにアクセスし、新しいスタンドアロンアプリを作成する必要があります。

アプリの名前を入力するよう求められます。

好きな名前を選ぶことができる。

次に、アプリのAPIキーが表示される。

メモ帳やテキストエディットのようなプレーンテキストエディターを使って、これらのキーをコンピューターにコピーしてください。

2- WordPressでTwitterのフォロワー数を取得する

次に、テーマのfunctions.phpファイルに以下のコードを追加するか、 WPCode（推奨）を使用する必要があります：

function getTwitterFollowers($screenName = 'wpbeginner')
{
    // some variables
    $consumerKey = 'API key';
    $consumerSecret = 'API key secret';
    $token = get_option('cfTwitterToken');
 
    // get follower count from cache
    $numberOfFollowers = get_transient('cfTwitterFollowers');
  
    // cache version does not exist or expired
    if (false === $numberOfFollowers) {
        // getting new auth bearer only if we don't have one
        if(!$token) {
            // preparing credentials
            $credentials = $consumerKey . ':' . $consumerSecret;
            $toSend = base64_encode($credentials);
  
            // http post arguments
            $args = array(
                'method' => 'POST',
                'httpversion' => '1.1',
                'blocking' => true,
                'headers' => array(
                    'Authorization' => 'Basic ' . $toSend,
                    'Content-Type' => 'application/x-www-form-urlencoded;charset=UTF-8'
                ),
                'body' => array( 'grant_type' => 'client_credentials' )
            );
  
            add_filter('https_ssl_verify', '__return_false');
            $response = wp_remote_post('https://api.twitter.com/oauth2/token', $args);
  
            $keys = json_decode(wp_remote_retrieve_body($response));
  
            if($keys) {
                // saving token to wp_options table
                update_option('cfTwitterToken', $keys->access_token);
                $token = $keys->access_token;
            }
        }
        // we have bearer token wether we obtained it from API or from options
        $args = array(
            'httpversion' => '1.1',
            'blocking' => true,
            'headers' => array(
                'Authorization' => "Bearer $token"
            )
        );
  
        add_filter('', '__return_false');
        $api_url = "https://api.twitter.com/1.1/users/show.json?screen_name=$screenName";
        $response = wp_remote_get($api_url, $args);
  
        if (!is_wp_error($response)) {
            $followers = json_decode(wp_remote_retrieve_body($response));
            $numberOfFollowers = $followers->followers_count;
        } else {
            // get old value and break
            $numberOfFollowers = get_option('cfNumberOfFollowers');
            // uncomment below to debug
           die($response->get_error_message());
        }
  
        // cache for an hour
        set_transient('cfTwitterFollowers', $numberOfFollowers, 1*60*60);
        update_option('cfNumberOfFollowers', $numberOfFollowers);
    }
  
    return $numberOfFollowers;
}

WPBeginnerを自分のTwitterユーザー名に、APIキーを自分のAPIキーに置き換えることをお忘れなく。

その後、Twitterのフォロワー数を表示したいWordPressテーマに以下のコードを追加します：

<p>
More than <strong><?php echo getTwitterFollowers(); ?></strong> users follow us on Twitter.
</p>

あなたのサイトにアクセスして、Twitterのフォロワー数を確認することができます。

ボーナス：WordPressにソーシャルシェアボタンを追加する

ソーシャルメディアのフォロワー数を表示する以外に、ソーシャルシェアボタンを表示することもできます。これにより、ユーザーはあなたのWordPressブログのコンテンツを友人や家族と共有することができ、より多くの読者にリーチすることができます。

Social Snapプラグインをインストールして有効化することで、簡単にソーシャルシェアボタンを追加することができます。詳しくは、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

アクティベート後、Social Snap “ Settingsページにアクセスし、左の列から’Social Sharing’タブに切り替えます。新しい設定が開きますので、「ネットワークの管理」タブを選択してください。

次に、プロンプトから好みのソーシャルメディア・プラットフォームを選択し、タブを終了する。

次に、「インライン・ボタン」タブを展開し、ボタンの位置、配置、ラベル、形状、サイズを設定する。

そうしたら、’Display On’セクションまでスクロールダウンし、ボタンを表示したい場所を選択します。投稿日にのみソーシャルシェアボタンを表示したい場合は、’投稿’ボックスをチェックします。

最後に「変更を保存」ボタンをクリックして、設定を保存します。

ソーシャルシェアボタンの動作を確認するために、あなたのサイトの投稿日にアクセスしてください。詳しくは、WordPressにソーシャルシェアボタンを追加する方法のチュートリアルをご覧ください。

この記事がWordPressでソーシャルメディアのフォロワー数を表示するのにお役に立てば幸いです。WordPress用の完全なソーシャルメディアチートシートや、WordPressサイトをTelegramと統合する方法についてのガイドもご覧ください。

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.