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

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

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

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

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

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

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

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

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

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

Webページを作るのは結構好きな@It_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

Homebrew

Homebrewを使いこなせ!Macへのインストールや使い方。

人生をもう一度やり直したいとつくづく思う@It_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

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

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

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま