| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
ツイート数カウント表示させてみる
あとで読むはてなブックマーク - ツイート数カウント表示させてみる | 2017年11月03日(金) | 0 | 0 | 記事編集

ツイート数カウント表示させてみる


以前行ったブログカスタマイズにて…

コメント欄のタブ切替化

コメント欄タブ化
タブ切替でコメント欄をコンパクト化 | ひいろんBLOG

タブにSNSコメント数を表示

コメント数表示
ここ最近のブログカスタマイズ | ひいろんBLOG

を済ませましたが、唯一Twitterのツイート数のみ未対応でして
若干モヤモヤした状態で放置していましたが…

ここ最近Wordpressで構築したパズドラ日記ばかりでなく
こちらのブログの方も動かしていこう…って事で
重い腰を上げて(?)スッキリさせてみようと思います[icon:音符]

ツイート数がTwitter提供のAPI廃止によって表示されなくなったのは
サイト運営者の方でしたらご承知の通り。。
参考リンク
持続的なプラットフォームのための難しい決断【Twitter開発者ブログ】
って事で「widgetoon.js & count.jsoon」なるサービスを利用してツイート数を取得します。

「widgetoon.js & count.jsoon」登録方法

「widgetoon.js & count.jsoon」にアクセスして
サイトURLをメールアドレスをフォームに入力するだけでOK。
その後登録したメールアドレス貼られたマイページのURLにアクセスし

登録完了とツイッター連携
ツイッターと連携させるだけです。
連携させなくても使えるみたいですがツイート回収速度が違うそうなので
(比較してないのでどの程度なのかは謎…爆)
連携させて使います。。

ちなみに1サイトにつき1アカウントのみとなるので(多分)
ひいろんの場合パズドラ日記用と別にツイッターアカウントを作る事に。。。


ツイート数表示方法


「widgetoon.js & count.jsoon」のAPIを使ってツイート数の表示を行います。

APIサンプル

http://jsoon.digitiminimi.com/twitter/count.json?url=【取得したいURL】
っつ〜事で
下記サイトさんを参考に…
jQueryとcount.jsoonを用いてTwitterのシェア数を取得するWordpressカスタマイズ方法【寝ログ】
jQueryコードを使ってツイート数の表示をさせます。

んで、ひいろんが施したのが下記になります。。

</body>の手前に…

<script type="text/javascript">
//Twitterのツイート数取得関数(URLのツイート数を指定したCSSセレクタに表示)
function fetch_twitter_count(url, selector) {
  jQuery.ajax({
    url:'http://jsoon.digitiminimi.com/twitter/count.json',
    dataType:'jsonp',
    timeout: 10000, //10sec
    data:{
      url:url
  },
  success:function(res){
    jQuery( selector ).html( res.count || 0 );
  },
  error:function(){
    jQuery( selector ).html('error');
  }
  });
}
 
jQuery(function(){
  //ツイート数取得関数の呼び出し
  fetch_twitter_count('{entry_permalink}', '.twitter-count');
});
</script>
※Serene Bachの独自タグ{entry_permalink}を使用してます。

表示させたい所に…

<span class="twitter-count">0</span>

こんな風に記してあげればOKです。

っつ〜事で…

無事に反映されました
無事に反映されました(^▽^

こうなってくるとカウント数付きオリジナルSNSボタンとか作りたくなってきちゃいますが…

まぁ、それは今後のお楽しみというところで(爆
2017年11月03日(金) 11:39 | ネット > 改造メモ | 0 | 0 | 記事編集
  • コメント[0]
  • Facebookコメント[]
  • はてブコメント[]
  • Twitter[]

まだこの記事へのコメントはありません。

コメントする

icons:

 
トラックバック

まだこの記事へのトラックバックはありません。

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
  • SEOブログパーツ
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:RX-8