WordPressでTwitterのカウントを表示させる方法
この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
ソーシャルブックマークってWordPressを使っていればかなりの確率で当たり前のように表示されていますね。
今の時代ないブログを探す方が難しいかもしれません。
その中でカウントを表示している場合としてない場合もあります。
表示している場合でもなぜかTwitterのカウントだけ表示してない場合が多いですね。
今回は、そのTwitterのカウントをどうやったら表示できるようになるのかという部分を解説します。
2015年11月21日からTwitterのツイートボタンの仕様が変更され、ツイート数の取得が不可能になりちょっと手間を加える必要があるのです。
2015年11月21日以前のソーシャルブックマーク
2015年11月21日以前は、このように何もしなくても簡単にプラグインを追加するだけで表示できました。
しかし、Twitterが表示をやめてから表示しないソーシャルブックマークが増えてきましたね。
今のソーシャルブックマーク
当サイトでは上記画像のように表示していません。
しかし、分析するためにプラグインを入れてカウントを確認できるようにしています。
繰り返し投稿する場合においての目安にしているのです。
使っているプラグインは、SNS Count Cacheを使っています。
Twitterのカウントを表示させる方法
Twitterでカウントを表示させるにはcount.jsoonの登録が必要です。
こちらのAPIはdigitiminimiという会社がリリースしたAPIです。このAPIを利用するにはサイトとメールアドレスを登録する必要があります。
しばらくすると「登録完了メール」送られてくるので、記載されているURLにアクセスしてください。
※弊社の場合は6時間程で連絡がきました。
Twitterアカウントを連携するリンクが表示されるので、「連携する」をクリックすれば完了です。
ここまでですべて表示するわけではないですね
まだやることは、多いですよ
ちょっと難易度高いと思いますが・・・
落ち着いてやればできないというレベルではないです。
ソーシャルブックマークのタグを変更する
どのテーマを使っていたとしても子テーマでカスタマイズすべきなのですが、テーマによって書き換える場所は異なります。
Lightningを使っている方は少々面倒です。
プラグインのVK All in One Expansion Unitを使って表示するようになっているのでアップデートの度に修正が必要になります。
回避するためには、子テーマのフォルダ内にbookmark.phpなどのファイルを作成して改造する方がいいかもです。
その場合は、場合によって スタイルシートの変更も必要になる場合があります。
下記のコードではその一例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php if ( ( is_single() && (trim( $GLOBALS["stdata12"] ) === '') ) || ( is_page() && (trim( $GLOBALS["stdata69"]) ) !== '') ) { if ( trim( $GLOBALS["stdata25"] ) !== '' ) { //Twitterアカウント $twitter_name = '&via='.esc_attr( $GLOBALS["stdata25"] ); }else{ $twitter_name = ''; } if ( trim( $GLOBALS["stdata118"] ) !== '' ) { //Twitterハッシュタグ $twitter_tag = '&hashtags='.esc_attr( $GLOBALS["stdata118"] ); }else{ $twitter_tag = ''; } $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); if(function_exists('scc_get_share_twitter')){ $plug = "smanone"; }else{ $plug = ""; } ?> <ul class="socialList" style="list-style-type:none; text-align: center;"> <!--ツイートボタン--> <li class="socialList__item"> <a class="socialList__link icon-twitter" style="text-decoration: none;" onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fab fa-twitter-square"></i><br /><span class="snstext <?php echo $plug; ?>" >Twitter</span><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" >Twitter</span>':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a> </li> <!--Facebookボタン--> <li class="socialList__item"> <a class="socialList__link icon-facebook" data-layout="button_count" style="text-decoration: none;" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fab fa-facebook"></i><br /><span class="snstext <?php echo $plug; ?>" >Facebook</span> </a> </li> <!--ポケットボタン--> <li class="socialList__item"> <a class="socialList__link icon-pocket" data-pocket-count="horizontal" data-layout="button_count" onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;"><i class="fab fa-get-pocket"></i><br /><span class="snstext <?php echo $plug; ?>" >Pocket</span><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'<span class="snstext pcnone" >Pocket</span>':'<span class="snscount">'.scc_get_share_pocket().'</span>'; ?></a></li> <!--はてブボタン--> <li class="socialList__item"> <a class="socialList__link icon-hatebu" style="text-decoration: none;" href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-layout="touch-counter" title="<?php the_title(); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><br /><span class="snstext <?php echo $plug; ?>" >はてブ</span> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'<span class="snstext pcnone" >はてブ</span>':'<span class="snscount"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>'; ?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> <!--LINEボタン--> <li class="socialList__item"> <a class="socialList__link icon-line" style="text-decoration: none;" href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><i class="fab fa-line"></i><br /><span class="snstext" >LINE</span></a> </li> <!--FEEDLYボタン--> <li class="socialList__item"> <a class="socialList__link icon-feedly" style="text-decoration: none;" href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Fsocial908.com%2Fnature%2Ffeed%2F' target='blank' rel="noopener"><i class="fas fa-rss-square"></i><br /><span class="snstext <?php echo $plug; ?>" >FEEDLY</span></a> </li> </ul> <?php } |
上記画像は、コードを使った場合の変更事例です。
上記コード以外に子テーマのフォルダ内のstyle.css single.phpの２つのファイルのカスタマイズもしています。
表示はまだ完全でなくスタイルシートをもう少しカスタマイズする予定ですが・・・
Twitterのところだけを変更するのであれば下記のコードと差し替えてください。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-lang="ja">ツイート</a> <script> widgetoon_main(); </script> |
Twitterの部分だけというのがわからない場合は、やらない方が賢明です。
TCDテーマの場合は、bookmark.phpの1部をカスタマイズしてください。
下記のコードが変更事例の１つです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<li> <script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-lang="ja">ツイート</a> <script> widgetoon_main(); </script> </li> <li class="facebook_button"> <div class="fb-like" data-href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"></div> </li> |
TCDテーマのソーシャルブックマークの表示は上記のような状態です。
数種類あって選択可能なのですが、個人的にGoogle+のブックマークの名残りが残っていてチェック外すのが面倒だなって思ってます。
アップデートで消してくれるとうれしいのですが・・・
SNS Count Cacheとは？
Facebook・Twitter・はてなブックマーク・Pocket・Pinterest・LinkedInへのシェア状況が表示されるようになります。
筆者の場合は、Facebook・Twitter・はてなブックマーク・Pocketの４つのみ確認しています。
ただ設定が大変です。
FacebookとTwitterではアプリを作成して連携する必要があります。
プラグインが開くべき場所のヒントはくれますが、やったことない方にとっては困難かもしれないですね。
ちゃんと設定できると上記画像のようにシェア数を表示してくれます。
はてなブックマーク・Pocketは、1度登録したらそのままですが、FacebookやTwitterの場合は、繰り返し投稿することでシェア数は増えていきます。
このプラグインを使うことでどの記事がどこでどのようにシェアされているのかということを分析するための1つの目安にできますね。
ポイントは、伸びている記事をさらに伸ばすことです。
まとめ
Twitterのカウント数を表示する方法って簡単にできる人もいれば難しくてこれって何？
って思う方も多いかもしれませんね
わからない場合は、無理に表示させようとしないことです。
多くの場合は、テーマを触ることになるので失敗すると真っ白になって WordPressそのものが表示できなくなるのです。
対処法を知っていれば問題ないでしょうが、リスクもあり難易度は高いです。
それでもやりたい場合は、仕事としてご依頼ください。
経営者として考えるならそこまで分析していけるほど潜在顧客に記事が読まれていることにプラスして売り上げも上がっている場合ならお金を払ってカスタマイズする価値はあると思います。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存