ソーシャルメディアからの集客を加速するでっかいソーシャルボタンの付け方

ソーシャルメディアからの集客を加速するでっかいソーシャルボタンの付け方

このページにも付いているソーシャルボタン。

これを付ける為のプラグインの作成を行います。

プラグイン作成の基礎知識はこのサイトの「自作プラグインのススメ WordPress をより深く、安全にカスタマイズする為に」を参考にして下さい。

javaScript の取得

jqueryのプラグイン jquery.socialbutton を使います。

jQuery本体は本家から、jquery.socialbuttonプラグインはこちらのこちらからダウンロードして利用下さい。

ダウンロードした js ファイルを「/wp-content/」の下に「js」フォルダを作成し、アップロードします。

プラグインへの記述

ワードプレスがロードされ、ヘッダー部分が呼ばれた時に上記でダウンロードした js ファイルも読み込まれるようにします。

ワードプレスの関数 add_action() を利用します。

add_action() は add_action(アクションする場所,動かす関数名) と記述します。

今回はヘッダが呼ばれた時に動かすので、wp_head で関数を動かす記述を「my-plug-in.php」に記述します。

function my_plug_in_read_js(){
   echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>";
   echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>";
}
add_action('wp_head','my_plug_in_read_js');

※/wp-content/js/ は、ルートに WordPress をインストールしている場合、ディレクトリを切っている場合は、適宜書き換えをお願いします。

WordPress は、色々な人が独自に開発出来るようになっている為、同じ JavaScript を沢山読んでしまうケースがあります。それを避けるため、wp_enqueue_script() という関数が用意され、同じ JavaScript を呼ばないで済むようになっています。今回は説明を簡単にする為に wp_enqueue_script() は使っていません。

記述したら、ページを読み込みし直し、ソースを閲覧して「jquery.socialbutton」が読まれている事を確認します。

ボタンの選定

利用したいボタンの JavaScriptを記述します。

このサイトの場合、ツイート、Google+ 、FaceBook なので、「socialbutton.js」を作り、以下を記述し「/wp-content/js/」以下に配置します。

jQuery(function() {
jQuery('#twitter').socialbutton('twitter', { button: 'vertical', });
jQuery('#google_plusone').socialbutton('google_plusone', { lang: 'ja', size: 'tall' });
jQuery('#facebook_like').socialbutton('facebook_like', { button: 'box_count' });
jQuery('#facebook_share').socialbutton('facebook_share', { button: 'box_count' });
});

配置が終りましたら、「my-plug-in.php」に一行追記します。

function my_plug_in_read_js(){
   echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>";
   echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>";
   echo "<script type="text/javascript" src="/wp-content/js/socialbutton.js"></script>";
}
add_action('wp_head','my_plug_in_read_js');

表示させる DIV の設置

投稿の上もしくは下にボタンを配置します。

配置が終りましたら、「my-plug-in.php」に以下を追記します。

function my_plug_in_view_socialbutton($content){
    $css =    "<style type='text/css'>\n
               <!-- \n
               .shareblock { \n
               margin:5px 0; \n
               } \n
               .shareblock div { \n
               float:left; \n
               margin-right:5px; \n
               } \n
               .clearfix:after { \n
               clear:both; \n
               content:&quot;.&quot; \n
               display:block; \n
               height:0; \n
               visibility:hidden; \n
               } \n
               .clearfix { \n
               min-height:1px; \n
               } \n
               .clear { \n
               clear:both; \n
               } \n
               -->  \n 
               </style>\n\n";
    $btnstr = "<div class='shareblock clearfix'>\n
               <div id='twitter'></div><!-- //ツィッター// -->\n
               <div id='google_plusone'></div><!-- //google+// -->\n
               <div id='facebook_like'></div><!-- //facebook like// -->\n
               <div id='facebook_share'></div><!-- //facebook share// -->\n
               </div>\n";

    $rtn = $css.$btnstr.$content;
    return $rtn;
}
add_action('the_content','my_plug_in_view_socialbutton');

HTML 的にはあまり正しくないですが、CSS を直接記述してしまいます。

これにより投稿の上にソーシャルボタンのでかい奴が表示されます。

また、

<?php echo my_plug_in_view_socialbutton('')?>
<div style="clear: both;"></div>

この記述をするとテーマ内で何時でも使えるので、好きな場所にソーシャルボタンの配置が可能となります。

最終的なプラグインファイルのソース

function my_plug_in_read_js(){
   echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>";
   echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>";
   echo "<script type='text/javascript' src='/wp-content/js/socialbutton.js'></script>";
}
add_action('wp_head','my_plug_in_read_js');


function my_plug_in_view_socialbutton($content){
    $css =    "<style type='text/css'>\n
               <!-- \n
               .shareblock { \n
               margin:5px 0; \n
               } \n
               .shareblock div { \n
               float:left; \n
               margin-right:5px; \n
               } \n
               .clearfix:after { \n
               clear:both; \n
               content:&quot;.&quot; \n
               display:block; \n
               height:0; \n
               visibility:hidden; \n
               } \n
               .clearfix { \n
               min-height:1px; \n
               } \n
               .clear { \n
               clear:both; \n
               } \n
               -->  \n 
               </style>\n\n";
    $btnstr = "<div class='shareblock clearfix'>\n
               <div id='twitter'></div><!-- //ツィッター// -->\n
               <div id='google_plusone'></div><!-- //google+// -->\n
               <div id='facebook_like'></div><!-- //facebook like// -->\n
               <div id='facebook_share'></div><!-- //facebook share// -->\n
               </div>\n";

    $rtn = $css.$btnstr.$content;
    return $rtn;
}
add_action('the_content','my_plug_in_view_socialbutton');

※このサイトはこのページの方式では付けていません。