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

WordPressでソーシャルメディアのフォロワー数をテキストで簡単に表示したいですか？

ソーシャルメディアのフォロワー数を表示することで、サイトに社会的証明を加えることができ、ブランド・アイデンティティを強化し、ビジネスの成長に役立ちます。

この投稿では、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にソーシャルメディアのフィードを追加する方法のチュートリアルをご覧ください。

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

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

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

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

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

最後に、’公開する’または’更新’ボタンをクリックして、設定を保存します。これで、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’タブに切り替えます。新しい設定が開きますので、”Manage Networks “タブを選択してください。

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

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

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

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

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

この投稿がWordPressでソーシャルメディアのフォロワー数を表示するのにお役に立てば幸いです。また、WordPress用の完全なソーシャルメディアチートシートや、検索エンジンからより多くのオーガニックトラフィックを得るためのWordPress SEOガイドもご覧ください。

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.