Warning: The magic method InvisibleReCaptcha\MchLib\Plugin\MchBasePublicPlugin::__wakeup() must have public visibility in /home/c2194382/public_html/funnyhome.net/wp-content/plugins/invisible-recaptcha/includes/plugin/MchBasePublicPlugin.php on line 37
【Cocoon】誰でも簡単にTwitterのシェア数を表示させる方法【カスタマイズ】

【Cocoon】誰でも簡単にTwitterのシェア数を表示させる方法【カスタマイズ】

ブログ

 

突然ですが、ブログにSNSのシェア数を表示させていますか?

あれ?Twitterのシェア数なくなくない??

実はCocoonは、以下の理由からTwitterのツイート数取得に対応していません。
  • Twitter社自体がツイート数取得APIをやめてしまった
  • count.jsoonのツイート数も反映されない場合がある

でも今からご説明する3STEPを踏めば、誰でもこんな風にTwitterのシェア数を表示することが出来るようになります。

 

本記事はサーバー上のフォルダとPHPファイルを編集します。

サーバーとかPHPファイルとか聞いて「うわ、、」と思った方、筆者のPCレベルは「何もしてないのに動かなくなったぁ!」です。

そんなパソコン弱者でもとても簡単に出来ます。安心してね。

注意

・PHPファイルはサイトを構成している大事なファイルですので、編集をする前に必ずバックアップを取ってください。

・親テーマではなく子テーマを編集してください。

 

因みに災害準備の記事はこちらからどうぞ

 

Sponsored Links

SNSのシェア数の表示方法

そもそもSNSのシェア数はどうやって表示すればいいのか?

以下の手順で進めば秒で終わります。

①シェア数の表示チェックを入れる

WordPressの編集画面で『Cocoon設定→SNSシェア→シェア数の表示』に行きます。

シェア数の表示欄は下へスクロールすると出てきますので、これにチェックを入れて「変更をまとめて保存」を押してください。

以上です。

ボトムアイコンにもシェア数を表示したいときは、ボトムシェアボタンのチェックも入れて保存してください。

 

Twitterのシェア数の表示方法

STEP1:count.jsoonに登録する

上記のボタンからwidgetoon.js&count.jsoonのサイトに飛んで、「サイト登録申請」を押してください。

 

  • 同意のチェックボタン
  • サイトURL
  • メールアドレス

上記3点を入力後、「サイト登録」を押してください。

以上です。

登録処理に1~2営業日掛かりますので、その間に他の設定をやっておきましょう。

因みに筆者は翌日には登録されました。金曜に申請したら土日を挟んだ月曜以降の登録になるかもです。

count.jsoonってどんなサイト?
  • 米twitter社のツイート数をカウントするサービス
  • 登録以前の過去のツイートも収集してくれる
  • ツイッターアカウントとの連携が可能
  • 非公開モードで投稿されたツイートはカウントされない
  • 1年以上利用がない場合、サイトアカウントの削除の可能性
  • 凍結、無効の場合はツイートの回収が停止
  • 利用料金⇒無料。(毎秒スパムレベルの投稿数は要相談)

 

Sponsored Links

 

STEP2:functions.phpにコードの追加

functions.phpを編集するので、作業前に必ずバックアップを取ってください。

バックアップの取り方はこちらからどうぞ

 

WordPressの編集画面から『外観→テーマエディター→functions.php』まで行って、下記のソースコードを貼り付けて、「ファイルを更新」を押してください。

『編集するテーマを選択』はCocoon childを選択してください。

//count.jsoonからTwitterのツイート数を取得
function fetch_twitter_count($url){
$url = rawurlencode( $url );
$subscribers = wp_remote_get( "http://jsoon.digitiminimi.com/twitter/count.json?url=$url" );
$res = '0';
if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
$body = $subscribers['body'];
$json = json_decode( $body );
$res = ($json->{"count"} ? $json->{"count"} : '0');
}
return $res;
}

 

因みにハイライト表示の記事はこちらからどうぞ

 

Sponsored Links

 

STEP3:tmpフォルダ編集

サーバー編

①親テーマからシェアボタンファイルをコピーする

ConoHa WINGで説明をします。

お使いのサーバー(エックスサーバー、ロリポップ、さくらインターネット、ConoHa WING 等)にログイン後、Cocoon親テーマの『tmp』フォルダを目指してください。

ConoHa WINGの場合は、まず『サイト管理→ファイルマネージャー』の手順で進んでください。

進んだら『****@localhost→public_html→自分のサイトURL→wp-content→themes→cocoon-mastertmp』の順でtmpフォルダまで行ってください。

cocoon-child-masterフォルダと間違えないよう注意!

 

『sns-share-buttons.php』ファイル上で右クリック&コピーで、ファイルをコピーしてください。

sns-follow-buttons.phpファイルと間違えないよう注意!

 

②子テーマにシェアボタンファイルを貼り付ける

『wp-content→themes→cocoon-child-master→tmp』の順でtmpフォルダまで行き、先ほどコピーしたファイルを貼り付けてください。

※画面の何もないところで右クリックをするとメニューが出てくるので『ペースト』を選んで下さい。

 

※tmpフォルダがない時は、、、

cocoon-child-masterフォルダ内で新規フォルダをクリックしてフォルダを作ってください。フォルダ名は『tmp』で。

 

Sponsored Links

 

WordPress編

①sns-share-buttons.php

WordPressの編集画面から『外観→テーマエディター→tmp→sns-share-buttons.php』まで行って、sns-share-buttons.phpをクリックしてください。

『編集するテーマを選択』はCocoon childを選択してください。

サーバーでの手順が上手くいっていればテーマエディターにtmpが表示されます。

 

②ソースコードの置き換え

『ctrl+F』で出てきた検索バーに下記のソースコードを入力してください。

<?php echo get_twitter_count(); ?>

 

上記の検索で出てきたオレンジ色の箇所を以下のソースコードと置き換えてください。

<?php echo fetch_twitter_count( get_permalink() ); ?>

「ファイルを更新」を押して終了です。お疲れさまでした!

 

親テーマを直接編集することでもっと簡単に出来る方法もあるみたいですが、それをしてしまうと親テーマがアップデートした場合に編集内容が無効になってしまったり、カスタマイズを原因とする不具合が起こった際に復旧が難しいので、あまりお勧めはしません。

 

参考にさせていただきました

 

まとめ

はい!Twitterのシェア数を表示する方法をご紹介しました。

筆者は大体1週間程度で全記事のTwitterのシェア数が反映されました。気長に待ってみてください。

因みにこのラディッツもどきが言ってる「シェア数6がゴミ」発言ですが、全部ゾムビットが自分でシェアした数です。トホホ。人様にシェアしていただいた数はいくつであろうと家宝でございますよ。

ゾムビット
ゾムビット

同情するならシェアを(して)くれ!

 

本記事のまとめ
  • SNSのシェア数の表示方法
  • Twitterのシェア数の表示方法
  • count.jsoonに登録
  • functions.phpにコードの追加
  • サーバー編集
  • sns-share-buttons.php編集

 

ゾムビット
ゾムビット

素人なりに頑張って反映させたのに、丸アイコンに変えたからシェア数表示やめたっていうね。

 

それでは今回はこの辺で。もぜってぇ見てくれよな☆

丸アイコンでもシェア数は表示されますが、不格好です。

コメント