*

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


ちわ、秋田@豊作(@housakuakita‎)です。

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

 

 

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

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

 

 

プラグイン作成の基礎知識はこのサイトの「自作プラグインのススメ 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');

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

関連記事

Facebook 広告「面積の20%を超えるテキスト」との戦い!

知っている方は当然のように知っている話なのですが・・・お恥ずかしい...

記事を読む

新年あけましておめでとうございます。2015年の目標等

あけましておめでとうございます。 本年もよろしくおねがいいたしま...

記事を読む

Facebookでブロックされたので、レポートしてみます。

つい数ヶ月前まで仲良くしていたのですが、業務上で嫌悪感を頂かれてし...

記事を読む

Blog facebook twitter Google+ YouTube vine Instagram を整理してみた

え〜今日から Instagram を再開しました。動画が熱い! ...

記事を読む

WordPress、JetPackでGoogle+と連携した後にやる事

WordPress には便利なプラグイン JetPack ってのが...

記事を読む

新着記事

四国へ行こう 行こうシリーズ[153/100]

今回は四国へ行こう。歌詞は四国の皆さんが作ってくれた歌詞になっています...

記事を読む

松山へ行こう 行こうシリーズ[152/100]

松山城へ行こう 行こうシリーズ に引き続き松山城本丸公園でガズレレ仲間...

記事を読む

松山城へ行こう 行こうシリーズ[151/100]

もうだいぶ過ぎてしまいましたが、11月11日ガズレレの日イベントに沢山...

記事を読む

熊本へ行こう ロンドン100連発[150/100]

土曜日の深夜からベトナムはホーチミンに行って来ました。 旅の目的...

記事を読む

くまモンに会おう ロンドン100連発[149/100]

昨晩はスポーツジムの催し物で、少し歌って来ました。地下鉄のギタリスト土...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

*

四国へ行こう 行こうシリーズ[153/100]

今回は四国へ行こう。歌詞は四国の皆さんが作ってくれた歌詞になっています...

松山へ行こう 行こうシリーズ[152/100]

松山城へ行こう 行こうシリーズ に引き続き松山城本丸公園でガズレレ仲間...

松山城へ行こう 行こうシリーズ[151/100]

もうだいぶ過ぎてしまいましたが、11月11日ガズレレの日イベントに沢山...

熊本へ行こう ロンドン100連発[150/100]

土曜日の深夜からベトナムはホーチミンに行って来ました。 旅の目的...

くまモンに会おう ロンドン100連発[149/100]

昨晩はスポーツジムの催し物で、少し歌って来ました。地下鉄のギタリスト土...

→もっと見る

PAGE TOP ↑