1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。
せっかく作ったんだから、シェアするのだよ、みんな。

そこで今回は、Twitter や Facebook、GooglePlus、はてなブックマーク、Pocket にシェアするボタンの作成方法を記事にしました。
これから記述していく方法に沿って作っていただければ、簡単にカウント数付きのSNSシェアボタンを自作することができます。

もちろん、厄介なTwitterのツイート数も取得します!

目次
  1. SNS Count Cache
  2. Twitterのツイート数を取得する為に
  3. Facebook のシェア数を取得する為に
  4. それぞれのシェア数を表示

SNS Count Cache

今回は、SNS Count Cacheというプラグインを使用します。
WordPressの「新規追加」から「SNS Count Cache」を検索し、今すぐインストールをクリックして追加しておきましょう。
SNS Count Cache

ただ、TwitterとFacebookに関しましては、ちょっと手間がかかります。
以下でその方法を紹介します。

Twitterのツイート数を取得する為に

では、Twitterのツイート数を取得しましょう。が、今は公式のツイートボタンではツイート数の取得ができなくなってしまったんですね。これだいぶ前の話です。
そこで、ツイート数を取得するには「widgetoon.js & count.jsoon」を使います。

widgetoon.js & count.jsoonを使う

「widgetoon.js & count.jsoon」は、株式会社ディジティ・ミニミが運営する、Twitterのツイート数を提供してくれるサービスです。
widgetoon.js & count.jsoon

count.jsoon&widgetoon

では、登録してみましょう。
上記のリンクからサイトへ飛びましたら「サイト登録申請」をクリックします。
count.jsoon&widgetoon

利用規約を一読して「ご利用規約に同意しました。」にチェックを入れます。
後は、使用したいサイトのURLと、自分のメールアドレスを入力します。

「サイト登録」をクリックした後、1日〜2日後にメールが届きます。
登録までに時間がかかるので、気長に待ちましょう。

メールが届いたら、そのメールのリンクからマイページへ飛ぶことができます。
そこで、自分のTwitterと連携させておくことをおすすめします。
その方が早く取得できるとかできないとか。その真相は……知らん。
count.jsoon&widgetoon

「SNS Count Cache」でTwitterの設定

では、WordPressの方を操作していきます。

左側のメニューから「SNS Count Cache」→「設定」をクリックします。
「シェア基本キャッシュ機能」という項目を探します。初期設定ではTwitterのチェックが外れていると思いますので、チェックを入れて「設定の更新」をクリックします。
SNS Count Cache

すると「シェア基本キャッシュ機能 – Twitter」という項目が現れますので、「widgetoon.js & count.jsoon」を選択して「設定の更新」をクリックします。
SNS Count Cache

Facebook のシェア数を取得する為に

では、Facebookのシェア数を取得するには、「Facebook Developers」にて、新しいアプリを登録します。
facebook

Facebookにログインし、上の画像のように「新しいアプリを追加」をクリックすると、次のようなフレームが開きます。
名前(サイト名など)とメールアドレスを入力し、「アプリIDを作成してください」をクリックします。
facebook

「ダッシュボード」を選択し、「アプリID」と「app secret」を確認します。
app secretが、表示されていなければ、右端の「表示」をクリックして、facebookのパスワードを入力すると表示されます。
facebook

今度はWordPressの方を設定をしていきましょう。
左側のメニューから「SNS Count Cache」→「設定」をクリックします。
「シェア基本キャッシュ機能 – Facebook」という項目を探します。

SNS Count Cache

先ほどの「アプリID」と「app secret」を、ここに貼り付けましょう。すると、Facebookのシェア数を取得できるようになります。

それぞれのシェア数を表示

GooglePlus、はてなブックマーク、Pocketについては特に何もする必要はありません。そのままコードを貼り付ければ、シェア数が表示されます。

if(function_exists( 'scc_get_share_twitter' )) echo scc_get_share_twitter();
if(function_exists( 'scc_get_share_facebook' )) echo scc_get_share_facebook();
if(function_exists( 'scc_get_share_gplus' )) echo scc_get_share_gplus();
if(function_exists( 'scc_get_share_hatebu' )) echo scc_get_share_hatebu();
if(function_exists( 'scc_get_share_pocket' )) echo scc_get_share_pocket();

上記のコードで、シェア数を表示させることができます。が、これでは数字のみしか表示されません。

そこで、コードを以下のように改変しましょう!

PHP

<div class="social-like">
  //Twitter
  <div class="social-like__item">
    <a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="_blank">
      <div class="social-like__count">
        <?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?>
      </div>
      <div class="social-like__btn social-like__btn--color-twitter">
        Tweet
      </div>
    </a>
  </div>

  //Facebook
  <div class="social-like__item">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="_blank">
      <div class="social-like__count">
        <?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>
      </div>
      <div class="social-like__btn social-like__btn--color-facebook">
        Facebook
      </div>
    </a>
  </div>

  //GooglePlus
  <div class="social-like__item">
    <a href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank">
      <div class="social-like__count">
        <?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?>
      </div>
      <div class="social-like__btn social-like__btn--color-googleplus">
        GooglePlus
      </div>
    </a>
  </div>

  //はてブ
  <div class="social-like__item">
    <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" target="_blank">
      <div class="social-like__count">
        <?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>
      </div>
      <div class="social-like__btn social-like__btn--color-hatebu">
        はてブ
      </div>
    </a>
  </div>

  //Pocket
  <div class="social-like__item">
    <a href="https://getpocket.com/edit?url=<?php the_permalink() ?>" target="_blank">
      <div class="social-like__count">
        <?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?>
      </div>
      <div class="social-like__btn social-like__btn--color-pocket">
        Pocket
      </div>
    </a>
  </div>
</div>

CSS

.social-like {
  padding: 0;
  text-align: center;
  font-size: 13px;
}

.social-like__item {
  display: inline-block;
  padding: 0 5px;
}

.social-like__count {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #999;
  margin-bottom: 3px;
  position: relative;
  color: #000;
}

.social-like__btn {
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

.social-like__btn.social-like__btn--color-twitter {
    background: #1da1f2;
}
.social-like__btn.social-like__btn--color-facebook {
    background: #3b5998;
}
.social-like__btn.social-like__btn--color-googleplus {
    background: #dd4f43;
}
.social-like__btn.social-like__btn--color-hatebu {
    background: #00a4de;
}
.social-like__btn.social-like__btn--color-pocket {
    background: #ee4056;
}

以上のコードで、画像のようになります。
SNSシェアボタン

クリックしたあなた、これは画像なのでクリックしても意味ないです。
後は、アイコンを表示させてみたり、数値をクリックすると実際につぶやかれたTwitterのページに飛んだりなどさせてみても面白いかもしれません。

スポンサードリンク

関連コンテンツ

オススメ記事

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

HTML5とCanvasを使うべ!

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、こんかいもはじめていきましょう! これまでの講座《こうざ》では、JavScriptの基本《きほん》について学び、キャラクターの操作《そうさ》ができるよ

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です