WordPressでwidgetoon.js と count.jsoon を使ってツイートボタンを設定:メモ

できると思っていたことができなかったのでメモとして。

これぐらいテンプレートタグとか関数があるだろうと思っていましたら、案外ないもので。

とりあえずアーカイブやループ外に設置した場合でもある程度動くようにできたのでメモです。

なお、WordPressのバージョンは4.5.2ですが、このバージョンだけに対応ということではありません。

widgetoon.js と count.jsoon

いきなりですが、widgetoon.jsとcount.jsoonに関しては公式か検索で調べていただければと思います。

• widgetoon.js & count.jsoon

恐らくどのサイトを見ても同じように説明がされてますし、導入方法自体も私が書くよりも細かく有益な情報があると思いますので。

なお、今回は以下のページの、特に「スクリプトをヘッダーとフッターに設定する」の見出し以下の内容を参考にさせて頂きました。

廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方

導入方法

自分用なのでいきなり本題です。

まずfunctions.phpに以下を記述。

function add_widgetoon_script() {
 if( !is_admin() ){
  wp_enqueue_script('jsoon', '//jsoon.digitiminimi.com/js/widgetoon.js', array(), NULL);
 }
}
add_action('wp_enqueue_scripts', 'add_widgetoon_script');

適当にset_jsoon_script()などと専用で作ってしまっていますが、実際には既にwp_enqueue_scriptsにフックしている部分があるためそこに放り込んでいます。
widgetoon.jsの読み込みは、もちろんheader.phpに直接書いても構いません。

続いて同じくfunctions.phpに以下を記述。

function add_widgetoon_func() {
echo <<< EOM
<script>
widgetoon_main();
</script>
EOM;
}
add_action( 'wp_footer', 'add_widgetoon_func' );

実はこちらも適当でして、実際には既にフッターに読み込む用のjsをまとめて別ファイルにしていますので、そこにwidgetoon_main()を追加しただけです。
そしてこちらも、もちろんfooter.phpに直接書いても問題ありません。

少々手こずったのが以下の出力部分。

<?php
  function sns_title(){
    $title = '';
    if(is_front_page()) {
      if(!in_the_loop()){//TOPページのループ外なら
        $title = get_bloginfo('name');
      } else {//TOPページのループ内なら
        $title = get_the_title().' | '.get_bloginfo('name');
      }
    } elseif(is_archive()){
      if(!in_the_loop()){//アーカイブのループ外なら
        $title = get_the_archive_title();
      } else {//アーカイブのループ内なら
        $title = get_the_title().' | '.get_bloginfo('name');
      }
    } else {//それ以外の投稿ページや固定ページなど
      $title = get_the_title().' | '.get_bloginfo('name');
    }
    echo esc_html($title);
  }

  function sns_url(){
    $url = '';
    if(is_front_page()) {
      if(!in_the_loop()){//TOPページのループ外なら
        $url = get_home_url();
      } else {//TOPページのループ内なら
        $url = get_the_permalink();
      }
    } elseif (is_archive()){
      if(!in_the_loop()){//アーカイブのループ外なら
        if(empty($_SERVER['HTTPS'])){
          $url = 'http://'. $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
        } else {
          $url = 'https://'. $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
        }
      } else {//アーカイブのループ内なら
        $url = get_the_permalink();
      }
    } else {//それ以外の投稿ページや固定ページなど
      $url = get_the_permalink();
    }
    echo esc_url($url);
  }
?>

<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  data-url="<?php sns_url(); ?>"
  data-text="<?php sns_title(); ?> @cubismerより"
  data-count="horizontal"
  data-lang="ja">ツイート</a>

一応、ツイートボタンの設定以外でも使い回せるようにしてはいます。

以下は悩んだ部分を少々。

アーカイブなどの一覧ではループ外と内で渡す値を変える

アーカイブ自体のURLやtitleをツイートしたい場合も考えて、ループ外の場合はアーカイブの情報が出るようにしています。

しかしながらアーカイブ自体や並んだタイトル一覧に設置されたツイートボタンは、一体どれぐらいの方が押されるのか…。

カウント数を表示するという役割がありますので無駄とは考えていませんが、ここに気を使ってもあまり意味がないかなという気もしています。

アーカイブのurlを$_SERVER[“HTTP_HOST”]などで対応

アーカイブのurlを出力する仕組みがあると思っていました。

しかし無いようなので、$_SERVER["HTTP_HOST"]等で対応しました。

また、$_SERVER["HTTP_HOST"]を使うため自動でhttpとhttpsの切替表示ができないため、httpsかどうかの判定も入れています。
判別方法は以下のページを参考にしました。

• HTTPSじゃなかったらHTTPSにリダイレクト

タイトル

add_theme_support( 'title-tag' )による自動表示が出て来たため、ここに使われている関数を調べて使えば簡易にタイトルがいられるのでは、と_wp_render_title_tag()を試しました。

が、titleタグも出力されてしまいますし、そもそもアンダーバーの入った関数を勝手に取り出して使うのも抵抗があったため断念。

<title>WordPressでwidgetoon.js と count.jsoon を使ってツイートボタンを設定:メモ | webutubutu</title>

出力としては上記のような感じとなり、titleタグそのままですね。

コンテンツ下や抜粋下にツイートボタンを表示

特に必要という訳でもなかったのですが、WP Social Bookmarking Lightとの併用を考えて以下のようにコンテンツ下や抜粋下にツイートボタンを表示するものも作成。

functions.phpがゴチャゴチャしそうなので、前述のfunction sns_title()…のコードをすべて記述して一つのphpファイルにしてまとめます。
今回は仮でbtn.phpという名称にし、テーマフォルダに設置。

続いてfunctions.phpに以下を記述します。

function add_content_bottom_btn($the_content){
    ob_start();
    get_template_part('btn');
    $output = ob_get_contents();
    ob_end_clean();
    return $the_content.$output;
}
add_filter('the_content','add_content_bottom_btn',11,1);
add_filter('the_excerpt','add_content_bottom_btn',11,1);

これでthe_content()とthe_excerpt()の下にツイートボタンが表示されるはずです。

なお、WP Social Bookmarking Lightのwp_footer()にフックしている部分は以下のようになっていますので、優先度の数値を10より大きくすれば下に、10以下にすれば上に表示させることができます。

add_action('wp_footer', 'wp_social_bookmarking_light_wp_footer');

結び

コードを記載する場所や記述の仕方など、まだまだ良い形がわかっておらず悩んでしまいます。

しかし、何のかんので動くものができれば、そういった部分にも目を向ける余裕ができて先に進みやすいとも思えるようになりました。

Twitter検索の疑問点

TwitterにてURLで検索する場合、http://プレフィックありと無しで検索結果が変わります。

調査が足りていませんが、最近のものはhttp://プレフィックありでもなしでもヒットしますが、昔のものは無しではヒットしません。

Twitterのツイートでは見えない部分が影響しているのか、古いと対象から外れるのか、その辺りはよくわかりませんでした。

検索ではでずともツイート数の収集は問題ないようで、count.jsoonが出力する数値は0にはならず、ツイート数の表示という目的は十分に果たせています。