*

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


ちわ、秋田@豊作(@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 ってのが...

記事を読む

新着記事

三保の松原へ行こう ロンドン100連発[146/100]

あっという間に9月ですね。暑い夏もこれで終わってくれればいいのに〜って...

記事を読む

神戸牛を食べよう ロンドン100連発[145/100]

また台風ですね、明日は清水でガズレレ のイベントがあるので、三保の松原...

記事を読む

メリケンパークへ行こう ロンドン100連発[144/100]

ガズレレのガズさん、イベントやるたびに集客が増えて凄い事になってます。...

記事を読む

神戸へ行こう ロンドン100連発[143/100]

みなさ〜ん、お盆休みいかがすごされてますかぁ〜。秋田はお盆休みですがコ...

記事を読む

札幌で海鮮丼 ロンドン100連発[142/100]

少し前に「今年も半年終わったかなぁ〜」と思っていたのですが、もう7月も...

記事を読む

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

トラックバック用URL:

コメントフィード




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

*

三保の松原へ行こう ロンドン100連発[146/100]

あっという間に9月ですね。暑い夏もこれで終わってくれればいいのに〜って...

神戸牛を食べよう ロンドン100連発[145/100]

また台風ですね、明日は清水でガズレレ のイベントがあるので、三保の松原...

メリケンパークへ行こう ロンドン100連発[144/100]

ガズレレのガズさん、イベントやるたびに集客が増えて凄い事になってます。...

神戸へ行こう ロンドン100連発[143/100]

みなさ〜ん、お盆休みいかがすごされてますかぁ〜。秋田はお盆休みですがコ...

札幌で海鮮丼 ロンドン100連発[142/100]

少し前に「今年も半年終わったかなぁ〜」と思っていたのですが、もう7月も...

→もっと見る

PAGE TOP ↑