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のページに飛んだりなどさせてみても面白いかもしれません。

スポンサードリンク

関連コンテンツ

オススメ記事

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

コメントをどうぞ!

メールアドレスが公開されることはありません。