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

スポンサードリンク

おすすめの記事♪

Medibang Paint

MediBang Paint Proの使い方。4コマ漫画を描く8つの手順。

[email protected]_is_Rです。 さて、最近は本当にMediBang Paint Proが流行っているから凄いなと思っています。 そこで、今回はMediBang

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかし[email protected]_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発[email protected]_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって[email protected]_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

あなたの前世は猫でしょう!

LINEスタンプを販売しよう。販売の手順や方法。

前は、猫より犬派だったけど、猫を飼いはじめて[email protected]_is_Rです。 今回は、LINEスタンプの販売方法について、記事を書いてみたいと思います。 LINEスタンプは、誰

Adobe Photoshop CC 2015.5の最新スゴすぎる新機能を3つ紹介!!

[email protected]_is_Rです。 2016年6月20日、Adobe CCが2015.5にバージョンアップしました。 そこで今回は、Adobe Photo

HTML CSS

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

[email protected]_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

上海

上海ガール、イラスト描きました!

[email protected]_is_Rです。 芸術の世界はとても厳しいと痛感しております。 さて、芸術の世界では自分をアピールすることが必要となってきます。その為には、自分の作品をたくさ

【初心者歓迎】クライアントサイドとサーバーサイドの違いを解説!!

[email protected]_is_Rです。 今回のテーマは、ちょっと細かいテーマですが、難しいこと考えずに気楽にいきましょう! 今回はクライアントサイドプログラムと、サーバーサイドプログ


コメントをどうぞ!

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




Games