自分の指定した任意の場所でJavascriptを実行させる Tips

前回の記事『Blogger カスタマイズ Tipsまとめ』では、Bloggerの基礎的な部分を構築する方法を紹介しました。今回はBloggerを利用するときに覚えておくと便利なTipsと、ブログをCustomizeするのに無くてはならないJavascriptの有効活用について紹介致します。

指定した任意のセレクタでJavascriptを実行させる方法

ブログを書いていると、たまに同じ事を繰り返し行う作業が煩わしく感じる時があるかと思います。そこで、テンプレートとして登録しておけば、時間短縮と作業効率化につながりますよね。

jQueryを利用して、自分が指定した「id」や「class」上で、決められた処理を行わせるTipsを覚えておくと何かと便利かと思いますので簡単に紹介します。
まずは、「head」タグ内にjQueryを読みこませるCodeを記述します。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

指定したセレクタで実行させるSample Code（scriptタグは省略します）

(function () {

    $(document).ready(function () {

        var ins = $('指定したセレクタ');

        var add = '記事に挿入したいタグ';

        for (i = 0; i < ins.length; i++) {

            $(ins).eq(i).after(add);

        }

    })

}());

var url = location.href;

//記事ページ

if (url.match(//d{4}/d{2}/[^.]+.html/)) {

    //実行させる内容

    $(document).ready(function () {

        //指定したセレクタ

        var ins = $('.post-footer');

        var add = '記事に挿入したいタグ';

        for (i = 0; i < ins.length; i++) {

            $(ins).eq(i).after(add);

        }

    })

}

TOPページの場合は、前回紹介した「CDATAセクション」の記述を使って、テンプレートで指定してあげればいいので、記事内でのみ動作するようにしてあります。Firebugのコンソールなどを使用して、そのまま記事内で実行させると「class="post-footer"（デフォルトだとシェアボタンの部分）」の下に「記事に挿入したいタグ」と表示されます。

つまり「var ins = $('ここでセレクタを指定');」「var add = 'ここで実行したいCodeを記述';」
「$(ins).eq(i).after(add);」ここの「.after」を「.before」にすると指定したセレクタの上で実行されるといった感じです。

Javascriptを活用したSNSシェアボタンの設置

簡単でスピーディな情報拡散ツールとして、SNSを利用することは最近では当たり前になっていますね。各種SNSへの連携は、WEB上へ情報提供するものとしては必要不可欠なものです。Bloggerでも標準でShareButtonが付いていますが、見慣れた公式のSNSボタンに変更および追加します。

利用するサービスは、それぞれ違ってくるかと思いますが、Sampleとして使っているCodeを紹介します。（デフォルトの状態でも使えるように若干変更してあります）

<script type='text/javascript'>  

// <![CDATA[

(function () {

    var Twitter_ID = 'あなたのツイッターIDを入力';


    function generate_button_text(url, title) {

        var hatena_btn, twitter_btn, gplus_btn, tumblr_btn, ameba_btn, mixi_btn, fb_share_btn, facebook_btn, twitter_follow_btn;

        hatena_btn = '<a href="' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加">' + '<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;"/></a>';

        twitter_btn = '<div style="display:inline-block;width: 97px;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="' + Twitter_ID + '">Tweet</a></div>';

        gplus_btn = '<span style="width: 62px;display: inline-block;"><div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div></span>';

        tumblr_btn = '<a onclick="return popitup(this.href);" href="http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title) + '" ' + 'title="Share on Tumblr" ' + 'style="display:inline-block;overflow:hidden;width:20px;height:20px;' + 'background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;" ' + 'data-text="' + title +  '" data-url="' + url + '"></a>';

        ameba_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&title=' + title + '&type=now" style="outline: none;" title="アメーバなうで紹介">' + '<img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_now.png" alt="なうで紹介"></a>';

        mixi_btn = '<a rel="nofollow" target="_blank" onclick="return popitup(this.href,632,456);" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&type=mixi" title="mixiチェック">' + '<img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_check_1.png" alt="mixiチェック"></a>';

        fb_share_btn = '<div style="display:inline-block;vertical-align: top;"><a name="fb_share"></a></div>';

        facebook_btn = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(url) + '&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" ' + 'frameborder="0" style="border:none;overflow:hidden;width:100px;height:21px;" allowTransparency="true"></iframe>';

        twitter_follow_btn = '<a href="http://twitter.com/' + Twitter_ID + '" class="twitter-follow-button" data-show-count="false" data-width="132px" data-lang="ja">Follow @' + Twitter_ID + '</a>';

        return [hatena_btn, twitter_btn, gplus_btn, tumblr_btn, ameba_btn, mixi_btn, fb_share_btn, facebook_btn, twitter_follow_btn].join('&nbsp');

    }

    $(document).ready(function () {

        var infos = [],

            target_node;

        $.getScript('http://b.st-hatena.com/js/bookmark_button.js');

        $.getScript('http://platform.twitter.com/widgets.js');

        $.getScript('http://platform.tumblr.com/v1/share.js');

        $.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share');

          window.___gcfg = {lang: 'ja'};

           (function() {

            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

            po.src = 'https://apis.google.com/js/plusone.js';

            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

          })();

       if (location.href.match(//d{4}/d{2}/[^.]+.html/)) {

            $('div.post-footer-line span.post-timestamp a.timestamp-link').each(function (idx, node) {

                infos[idx] = [node.toString(), $("div.post h3.post-title").eq(idx).text()];

            });

            target_node = $('.post-footer');

        }

        $.each(infos, function (idx, elm) {

            target_node.eq(idx).append(generate_button_text(elm[0], elm[1]));

        });

    });

}());


<!--Simple Popup Plugin v3.2 / RH Mods-->

var swin = null;

function popitup(mypage, w, h, pos, myname, infocus) {

    if (w != parseInt(w) || w <= 0) w = 500;

    if (h != parseInt(h) || h <= 0) h = 500;

    if (myname == null) {

        myname = "swin"

    };

    myleft = 0;

    mytop = 0;

    if (myleft == 0 && mytop == 0 && pos != "random") {

        pos = "center"

    };

    if (pos == "random") {

        myleft = (screen.width) ? Math.floor(Math.random() * (screen.width - w)) : 100;

        mytop = (screen.height) ? Math.floor(Math.random() * ((screen.height - h) - 75)) : 100;

    }

    if (pos == "center") {

        myleft = (screen.width) ? (screen.width - w) / 2 : 100;

        mytop = (screen.height) ? (screen.height - h) / 2 : 100;

    }

    settings = "width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no";

    swin = window.open(mypage, myname, settings);

    if (infocus == null || infocus == "front") {

        swin.focus()

    };

    return false;

}

<!--/Simple Popup Plugin-->

// ]]>

</script>

先に説明した任意の場所にjQueryを使ってSNSボタンを生成するものになっており、作成されるボタンは、「はてなブックマーク」、「ツイッターtweet」、「Google+1」、「tumblr」、「Amebaなう」、「mixiチェック」、「Facebookシェア」、「Facebookいいね！」、「ツイッターFollow」ボタンになっています。

実際に利用される場合

• 「var Twitter_ID = 'あなたのツイッターIDを入力';」でIDを入力
• 「target_node = $('.post-footer');」の部分を自分の好きなセレクタへ指定
  （そのままでもOK）
• 「infos[idx] = [node.toString(), $("div.post h3.post-title").eq(idx).text()];」の「div.post h3.post-title」は、前回の記事のように「title」タグを「h2」へ変更した場合「div.post h2.post-title」へ書き換える

必要ないものは、「return [hatena_btn, twitter_btn, gplus_btn, tumblr_btn, ameba_btn, mixi_btn, fb_share_btn, facebook_btn, twitter_follow_btn].join('&nbsp');」の中から関連するbtnを消せば表示され無くなります。
Simple Popup Pluginは、tumblrとmixiチェック用に小さな画面をPopupさせるもので、「a」タグに「onclick="return popitup(this.href,632,456);"」と入れてあげることで作用します（数字はwidthとheightで大きさも指定できます）
参考Link

ソーシャルブックマーク＆投稿ボタンの設置方法 | SEOモード

他サービスのボタンを設置したいという方は
SEOモードさんが詳しく紹介されているので参考にしてみてください。

個別で各種SNSボタンを設置してフッターを有効利用する

ぼくの場合、上記SNSボタンはBloggerの設定＞フォーマット＞投稿テンプレートで

<div id="honbun"><span class="imgs"></span><p></p></div>

<div id="honbun-footer"></div>

このように設定し、「<div#honbun-footer」に表示されるようにしています。
そこで、「.post-footer」部分にも個別でSNSボタンを設置して、次回紹介しようと考えているレコメンドリンクを表示させるようにしています。
今回は、個別でSNSボタンを設置する方法を紹介します。

手順

ダッシュボードからデザイン＞HTML の編集「ウィジェットのテンプレートを展開」にチェック

</span> <div class='post-share-buttons goog-inline-block'>

        <b:if cond='data:post.sharePostUrl'>

          <b:include data='post' name='shareButtons'/>

        </b:if>

      </div> </div>

この部分の「<b:include data='post' name='shareButtons'/>」がデフォルトのShareボタンになります。この</div> </div>で囲んである部分の前にCodeを入れてあげることで、個別にボタンの作成ができます。
「はてなブックマークボタン」

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class="hatena-bookmark-button" expr:data-hatena-bookmark-title='data:post.title + " : " + data:title' data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加">

<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />  

</a>

「ツイッターtweetボタン」

<a class='twitter-share-button' data-count='true' data-lang='ja' data-via='あなたのツイッターIDを入力' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>

<b:if cond='data:post.isFirstPost'>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

</b:if> 

ツイッターIDは入力しなくてもOK（Mentionが追加されるか否か）

「Facebookいいね！ボタン」

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:21px;'/>

「Evernoteクリップボタン」

<span>

<a expr:onclick='&quot;Evernote.doClip({providerName:&quot;&quot; + data:title + &quot;&quot;, title:&quot;&quot; + data:post.title + &quot;&quot;, url:&quot;&quot; + data:post.url + &quot;&quot;}); return false;&quot;' href='#'>

<img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/>

</a>

</span>

<b:if cond='data:post.isFirstPost'>

<script src='http://static.evernote.com/noteit.js' type='text/javascript'/>

</b:if>

デフォルトのGoogle+1ボタンの横幅が大きいので<br/>タグを最初に入れると綺麗に並びます。
<b:if cond='data:post.isFirstPost'></b:if>で囲んであるのは、JavaScriptを最初の一回だけ読み込ませて記事毎に繰り返して呼び出さないようにしています。

Facebookページ、Google+ページとの連携

Facebookページは、Facebookユーザーとの交流する場所として作成しておき、Blogの更新通知など様々な用途があります。アカウントがある方は、作っておいて損はないでしょう。

Facebookページの作成は、こちらから『Facebookページを作成』
作成後、いいね！ボックスの設置を行いましょう。

Google+ページもg+ユーザーへの交流と情報共有の場所として有用なものになります。
Google+ページの作成は、こちらから『Google+ ページを作成』
作成後、『プレビュー登録』を行えば、Webサイトから「Google+ページ」にリンクを張れる「Google+ バッジ」を使用出来ます。

『Google+ ページをサイトにリンク - Google+ Platform — Google Developers』

ページを下にスクロールさせた時にTOPまで戻るボタンの設置

マウスのスクロールで画面下にTOPへ戻るボタンが出現するJavascriptの設置方法です。

<script type="text/javascript">

// <![CDATA[

var scrolltotop={

 //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

 //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).

 setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

 controlHTML: '<img src="自分の好みの画像をUploadしてURLを指定する" style="width:画像の幅を指定px; height:画像の高さを指定px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

 controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner

 anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

 state: {isvisible:false, shouldvisible:false},

 scrollup:function(){

  if (!this.cssfixedsupport) //if control is positioned using JavaScript

   this.$control.css({opacity:0}) //hide control immediately after clicking it

  var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)

  if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists

   dest=jQuery('#'+dest).offset().top

  else

   dest=0

  this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

 },


 keepfixed:function(){

  var $window=jQuery(window)

  var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx

  var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety

  this.$control.css({left:controlx+'px', top:controly+'px'})

 },


 togglecontrol:function(){

  var scrolltop=jQuery(window).scrollTop()

  if (!this.cssfixedsupport)

   this.keepfixed()

  this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false

  if (this.state.shouldvisible && !this.state.isvisible){

   this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])

   this.state.isvisible=true

  }

  else if (this.state.shouldvisible==false && this.state.isvisible){

   this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

   this.state.isvisible=false

  }

 },


 init:function(){

  jQuery(document).ready(function($){

   var mainobj=scrolltotop

   var iebrws=document.all

   mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode

   mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')

   mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')

    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

    .attr({title:'Scroll Back to Top'})

    .click(function(){mainobj.scrollup(); return false})

    .appendTo('body')

   if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text

    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text

   mainobj.togglecontrol()

   $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){

    mainobj.scrollup()

    return false

   })

   $(window).bind('scroll resize', function(e){

    mainobj.togglecontrol()

   })

  })

 }

}


scrolltotop.init()

// ]]>

</script>

自分の好みの画像をUploadしてURLを指定し、widthとheightを入力するだけで設置できます。

画像をクリックした時に拡大表示されるLightBoxの導入

Blogger標準機能として、Google+のようなLightBoxが設定＞フォーマットのライトボックスで画像をアピールというところにあります。但し、アップロードした全ての画像に適応されるため、あまりお勧めできません。

「いいえ」にすることで、機能をOFFにできます。

そこで、比較的軽量で動作が俊敏なFancyZoom 1.1を利用しています。

cabel.name: FancyZoom 1.1

This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, avail ...

設置方法

1．ダウンロードした画像をフォルダごと外部ファイルとしてアップロード
2．FancyZoom.js内の44行目（var zoomImagesURIの行）で画像フォルダへの絶対パスを入力
3．FancyZoom.js、FancyZoomHTML.jsの2つのファイルをアップロード
4．「head」タグ内にアップロードした2つのjsファイルを「script」タグで指定する（絶対パス）

<script src='/FancyZoom.js' type='text/javascript'/>

<script src='/FancyZoomHTML.js' type='text/javascript'/>

5．その下に以下のJavascriptを入力する

<script type='text/javascript'>

  if (window.addEventListener)

    window.addEventListener(&quot;load&quot;, setupZoom, false);

  else if (window.attachEvent) // for IE

    window.attachEvent(&quot;onload&quot;, setupZoom);

  else

    window.onload = setupZoom;

</script>

6．「head」タグ内に以下の「meta」タグを追記する

<meta http-equiv="Imagetoolbar" content="no" />

使用方法

「img」タグを「a」タグで囲ってあげます。

<a href="../big.png"><img  title="画像のタイトル（任意）"  src="../small.png" /></a>

画像のUpload場所にGoogle codeを使用したところ、読み込みが遅くIEでは機能しませんでした。
Firefoxだと上手く表示されるので、もしIEをお使いの方がいらっしゃったらブラウザを替えて見てみて下さい。

以上でJavascript関係の紹介は終了です。
最後まで読んでいただき、ありがとうございました。