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

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

コメントをどうぞ!

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