[WordPress]FC2のカウンター･拍手･アクセスランキングを利用する

WordPressの固定ページに表示したFC2拍手ランキング

FC2のサービスであるFC2カウンター、FC2拍手、FC2アクセスランキング、FC2アクセス解析等のサービスは、FC2以外のブログ等でも無料で利用できます。

私はFC2ブログ時代に上記サービスを利用していましたが、今の環境(WordPress＋Simplicity)に移行後も、上記サービスを全て設定して利用することができましたので紹介します。

FC2カウンターの利用

1．タグコードの設置

これは簡単に設置できます。

FC2カウンターのページでアクセスカウンターの設置タグコードをコピーし、下のようにWordPressの[テキストウイジェット]をサイドバーに貼り付けます。タイトルや説明文は好みでつければ良いでしょう。

２．カウンターのサイズが小さい

最初、FC2ブログと同じカウンターデザインにしたのですが、新しいブログではFC2ブログに比べ文字が大きいので、相対的にカウンターが小さくなってしまいました。

FC2のFAQによるとカウンターのサイズは変えられないということなので、右のように元々大きいデザインのものに変更しました。

FC2拍手の利用

SNSを使用していない訪問者にも反応してもらえる拍手機能は有用ですが、FC2以外のブログで使うにはタグコードに手を加える必要があります。

1．タグコードの作成

FC2ブログ入れていたコードは

<!-- FC2拍手ボタン ここから -->
<a href="http://clap.fc2.com/post/efarm/?url=<%topentry_enc_link>&title=<%topentry_enc_utftitle>" target="_blank" title="拍手する"><img src="http://clap.fc2.com/images/button/orange/efarm?url=<%topentry_enc_link>&amp;lang=ja" alt="拍手をする" id=hakusyu_botan /></a>
<!-- FC2拍手ボタン ここまで -->

ですが、これをこのままWordPressに入れても動作しません

FC2のタグコードを手直し（第1案）

WordPressにFC2拍手を入れるのには、コードを手直しする必要があります。ネットで調べて下記（第1案）を挿入してみました。
参考サイト：WordPressにFC2拍手を設置する | 某氏の戯言

<!-- FC2拍手タグここから -->
<a href="http://clap.fc2.com/post/efarm/?url=<?php print get_permalink(); ?>&amp;amp;amp;title=<?php print urlencode(get_the_title()); ?>" title="拍手する by FC2">
<img src="http://clap.fc2.com/images/button/orange/efarm?url=<?php print get_permalink(); ?>"alt="拍手する" style="border:none;" /></a>
<!-- FC2拍手タグここまで -->

これでうまく行ったと暫く運営していたのですが、新しく拍手があった記事のランキング表のタイトルがURLで表示されるようになってしまいました。

更に手直し（第2案）

更にネットで詳しく調べると上記を対策した方があり、その第2案が下記です。
参考サイト：WP – FC2拍手の設置 | karak

<!-- FC2拍手タグここから -->
<a href="http://clap.fc2.com/post/efarm/?url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")); ?>" target="_blank" title="拍手する">
<img src="http://clap.fc2.com/images/button/orange/efarm?url=<?php echo urlencode(get_permalink()); ?>" alt="拍手する" style="border:none;vertical-align:middle;" /></a>
<!-- FC2拍手タグここまで -->

これでちゃんとタイトル名で表示されるようになりました。

2．拍手ボタンの表示

拍手ボタンの表示位置

拍手ボタンの配置については次のように考えました

• ソーシャルボタンの近くに配置
  設置場所は関連したソーシャルボタンの近くにすること決定しました。
• snsボタン、snsページ、拍手を一列に並べる
  これら3つを横に並べてコンパクトにしたい
• 一覧表示には表示しない
  フロントページなどの記事一覧には入れない

 sns.phpに拍手のコードを入れる

Sinplicityの場合sns-pages.phpにおいて、前記拍手ボタンのコードを他のボタンと同じようにlistの中身として追加します。

更にstylesheetで全てを横並びになるよう指定して下記のようにできました

3．拍手ランキングの表示

私は下記記事で紹介しているように、FC2のブログでは拍手ランキングのページを設けて大きな表にしていました。

[FC2ブログ]記事の拍手ランキングを追加

私はかってFC2ブログでFC2カウンター、FC2拍手、FC2アクセスランキング、FC2アクセス解析等のサービスを使用していましたが、これらはFC2ブログでなくても無料で利用できます。 当ブログの環境(WordPress＋Simplicity) においても、上記サービスを全て設定して利用することができましたので紹介します。

e-farm.org

2015-01-27 21:24

WordPressでも、同じやり方で固定ページに表示するようにしました。

FC2アクセスランキングの利用

WordPressの人気記事機能があるので要らないような気もしますが、月々のデータが残ってその変化を見られるのが良いので継続して使っています。

1．タグコードの設置

FC2の解析タグの自動化

FC2拍手のマニュアルでは、タグを各記事に入れよと書いてあり、FC2時代は記事の末尾に手で入れていましたが面倒でした。

記事中にいちいち記入しなくても良いようにする

要するに、ブラウザが読み込んだときに、投稿記事の＜body>～＜/body>の間に入っていればよいはずです。

Entry-body.phpに埋め込み

記事リストでの表示では含まれず、本文（[続きを読む]がある時はそれ以降）を表示すると入る所にしたいので、SimplictyテーマのEntry-body.phpに下記（4行目）のように埋め込みます。これで各記事には記入しなくてもよくなります。

<div id="the-content" class="entry-content">
  <?php //記事本文の表示
    the_content( get_theme_text_read_more() ); //デフォルト：続きを読む
    echo '<script src="http://117****4.ranking.fc2.com/analyze.js" type="text/javascript" charset="utf-8"></script>'; //fc2のランキングタグ; ?>
</div>

2．これまでの記事中のタグコードを一斉削除

FC2時代には各記事に入れていたので、インポートした記事に残っています。上記の自動化により、2重に入ることになるので記事中のタグコードを削除しなければなりません。

能率的に行うため、プラグイン Search Regex « WordPress Plugins を使いました。一斉に削除できます。

3．固定ページにランキングを表示

FC2ランキングで最大30位まで表示できますので、これもFC2時代と同じように30位までのランキング表を固定ページに掲載するようにしました。

やり方はFC２拍手と同様にアクセスランキングの固定ページを作成し、下記のような表部分の記述を貼り付けます。

<!-- FC2 ランキング表 -->
<div id="ranking-page" style="width: 600px;border: 2px #ffff00 solid;"  margin-left: auto; margin-right: auto;">
 <script src="http://117****4.ranking.fc2.com/accessory.js?rtype=page" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">//
  <!&#91;CDATA&#91; document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/font:\s?12px\/13px/ig,"font:13px\/14px"); /* フォントサイズ */ document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace("人気ページランキング",""); /* 見出し行を非表示に */ document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/\'MS UI Gothic\',\'Osaka-Mono\'/ig,""); /* fontの指定を消す */ document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/color: rgb\(0, 0, 204\)/ig,"color: rgb(17, 68, 170)");/* 文字色変更 ie用 */ document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/color: #0000cc/ig,"color: #1144aa");/* 文字色変更 */ // &#93;&#93;>
 </script>
</div>
<!-- /FC2 ランキング表 -->

上記の詳細は別記事で紹介したいと思っています。

結果、ブラウザの表示は下記のようになります。

FC2アクセス解析の利用

「FC2アクセス解析」は訪問者に見せるものがないせいか、何かしらのコマーシャルもどき（一時的にでるロゴなど）が入ります。

1．タグコード設置

設置法はアクセス解析したいページにタグを貼り付けるだけです。私は上記FC2ランキングと同様entry-body.phpに下記（3行目）のように入れていました。

 <?php //記事本文の表示
      the_content( get_theme_text_read_more() ); //デフォルト：続きを読む
      echo '<script language="javascript" src="http://analyzer54.fc2.com/ana/processor.php?uid=15****0" type="text/javascript"></script><noscript><span align="right"><img src="http://analyzer54.fc2.com/ana/icon.php?uid=15****0&ref=&href=&wid=0&hei=0&col=0" /></span></noscript>'; //fc2アクセス解析タグ

2．モバイル表示で相性問題発生

アクセス解析としては正常に動作し、暫くは使っていたのですが、Simplicityのモバイル表示と相性が悪いことがわかりました。右上に出るロゴの位置とメニューが競合するようなのです。

それで、Googleのアクセス解析も導入していますのでそれで十分と考え、利用をやめました。