前回、以下のURLでzenbackのブログパーツ本体を取得しているところまで解析しました。
http://widget.zenback.jp/?callback=jsonp1328934279143&base_uri=http%3A%2F%2Fnanoappli.com%2Fblog& rand=276590972233&nsid=101368938457261269%3A%3A101368959663646496&stage=1&motouri=... |
今回は、上記URLのレスポンスを確認して行きます。
早速ですが、レスポンスの内容をfirebugで見た結果です。
9kbyte以上と結構なボリュームのレスポンスが返ってきているのが分かります。
非常に長いですが、JSONPなのでjavascriptの関数を1つコールしてるだけです。
jsonp1328934279143("...."); |
このままでは理解できないので、例によって関数の実行結果を取得します。
全部で1400行以上にわたる長編なので、適当に区切りを入れます。
大枠は「1:小さなscript」 + 「2:CSS」 + 「3:HTML」 + 「4:script本編」の4部構成になっています。
1:小さなscript
<script type="text/javascript"> zb_jq("div.zenback-twitterbtn > a:first").click(function() { this.disabled = true; var title = (document.title || ""); if (title) { title += " → "; } window.top.location = "http://widget.zenback.jp/_t/twitter_post_redirect/?url=http%3A//nanoappli.com/blog/&title="+encodeURIComponent(title); }); //end click </script> |
2:css
<style type="text/css"> /* zenback default style ----------------------------------------------------------------------*/ .zenback { font-size:13px; padding:12px 0; line-height:18px; } .zenback .zenback-module{ clear:both; padding-bottom:12px; } .zenback .zenback-heading{ font-size:14px; margin:0 0 0 10px; padding-left:23px; float:left; display:inline; } .zenback .zenback-entries .zenback-heading { background:url(http://widget.zenback.jp/_p/images/icon-article.png?v=86b06) 0 center no-repeat #7fc527; } .zenback .zenback-links .zenback-heading { background:url(http://widget.zenback.jp/_p/images/icon-link.png?v=c4ac4) 0 center no-repeat #b0c906; } .zenback .zenback-mixi .zenback-heading { background:url(http://widget.zenback.jp/_p/images/mixi_icon.png?v=26695) 4px center no-repeat #f5b868; } .zenback .zenback-evernote .zenback-heading { background:url(http://widget.zenback.jp/_p/images/evernote_icon.png?v=a2195) 4px center no-repeat #7fc527; } .zenback .zenback-keywords .zenback-heading { background:url(http://widget.zenback.jp/_p/images/icon-key.png?v=be6c2) 0 center no-repeat #C58E68; } .zenback .zenback-facebook .zenback-heading { background:url(http://widget.zenback.jp/_p/images/facebook_icon.png?v=f82ea) 4px center no-repeat #3B5998; } .zenback .zenback-entries ul { border-top:1px solid !important; border-top-color:#7fc527 !important; padding-top:7px !important; } .zenback .zenback-links ul { border-top:1px solid !important; border-top-color:#b0c906 !important; padding-top:7px !important; } .zenback .zenback-keywords ul { border-top:1px solid !important; border-top-color:#C58E68 !important; padding-top:7px !important; } .zenback .zenback-keywords ul:after { content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both; } .zenback .zenback-facebook ul { border-top:1px solid !important; border-top-color:#3B5998 !important; padding-top:7px !important; } .zenback .zenback-facebook ul:after { content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both; } .zenback img { border:none !important; } .zenback .zenback-pending{ background:#f6f6f6 !important; text-align:center !important; margin:0 0 10px 0 !important; color:#555 !important; padding:5px 0 !important; clear:both !important; border-top:1px solid !important; border-top-color:#7fc527 !important; } .zenback .zenback-keywords-pending { background:#f6f6f6 !important; text-align:center !important; margin:0 0 10px 0 !important; color:#555 !important; padding:5px 0 !important; clear:both !important; border-top:1px solid !important; border-top-color:#C58E68 !important; } .zenback .zenback-heading span {/* tab */ color:#ffffff !important; padding:2px 5px 0 !important; line-height:170% !important; font-weight:bold !important; vertical-align:middle !important; display:block !important; float:left !important; border-left:1px solid #fff !important; } .zenback .zenback-entries .zenback-heading span{ background:#7fc527 !important; } .zenback .zenback-links .zenback-heading span{ background:#b0c906 !important; } .zenback .zenback-mixi .zenback-heading span{ background:#f5b868 !important; } .zenback .zenback-evernote .zenback-heading span{ background:#7fc527 !important; } .zenback .zenback-keywords .zenback-heading span{ background:#C58E68 !important; } .zenback .zenback-facebook .zenback-heading span { background:#3B5998 !important; } .zenback .zenback-module ul { padding:5px 10px 0 10px !important; margin:0 0 10px 0 !important; clear:both !important; word-wrap:break-word !important; zoom:1 !important; } .zenback li { list-style:none !important; /*display:block !important;*/ text-align:left !important; float:none !important; } .zenback ul.zenback-list { zoom:1; margin:0 !important !important; } .zenback ul.zenback-list li {/* icon list */ /* padding-left:24px !important; margin-bottom:5px !important; background:transparent url(http://widget.zenback.jp/_p/images/icon-listmark.gif?v=31a7b) no-repeat 0 3px !important; */ } .zenback .zenback-entries ul.zenback-list li { padding-left:24px !important; margin-bottom:5px !important; background:transparent url(http://widget.zenback.jp/_p/images/icon-listmark.gif?v=31a7b) no-repeat 0 3px !important; } .zenback .zenback-links ul.zenback-list li { padding-left:24px !important; margin-bottom:5px !important; background:transparent url(http://widget.zenback.jp/_p/images/icon-listmark-link.gif?v=08139) no-repeat 0 3px !important; } .zenback .zenback-keywords ul.zenback-list li { float:left !important; padding-left:15px !important; padding-right:5px !important; /*background:transparent url(http://widget.zenback.jp/_p/images/key.png?v=3b51a) no-repeat 0 3px !important;*/ background: #ebebeb !important; margin: 0 8px 8px 0 !important; padding: 2px 10px 2px !important; border: 1px solid #fff !important; -moz-box-shadow: 3px 3px #b2b2b2; -webkit-box-shadow:3px 3px #b2b2b2; box-shadow:3px 3px #b2b2b2; filter: progid:DXImageTransform.Microsoft.Shadow(strength=3, direction=135, color='#b2b2b2'); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=3, Direction=135, Color='#b2b2b2')"; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; } .zenback .zenback-keywords ul.zenback-list li:hover { background: #cbcbcb !important; } .zenback .zenback-keywords ul.zenback-list li a{ color:#1e3bf7 !important; text-decoration:none !important; background:none !important; } .zenback .zenback-keywords ul.zenback-list li a:hover { color:#1e3bf7 !important; text-decoration:none !important; background: #cbcbcb !important; } .zenback li img { margin-right:3px !important; vertical-align:middle !important; } /* more read */ .zenback .zenback-morereadbtn{ text-align:center !important; border:1px solid #c5c5c5 !important; } .zenback .zenback-morereadbtn a{ display:block !important; padding:3px 0 !important; } .zenback .zenback-morereadbtn a:hover{ } .zenback-itemdate { font-size:11px; color:#999; } /* powerd by */ .zenback .zenback-powered { border-top-style:solid; border-top-width:1px; border-top-color:#7fc527; padding:0; text-align:right; zoom:1; display:block; height:auto; visibility:visible; } .zenback .zenback-powered:after { content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both; } .zenback .zenback-powered span { background-color:#7fc527; color:#ffffff; padding:0.3em 0.4em; font-weight:bold; display:block; float:right; } .zenback .zenback-powered span img { vertical-align: middle; padding: 0px !important; margin: 0px !important; } /* start of the 'powered by topsy' */ .zenback .zenback-powered-topsy { padding: 0; text-align: right; zoom: 1; display: block !important; height: auto !important; visibility: visible !important; } .zenback .zenback-powered-topsy:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } .zenback .zenback-powered-topsy span { color: #ffffff !important; padding: 0.3em 0.4em !important; font-weight: bold !important; display: block !important; float: right !important; } .zenback .zenback-powered-topsy span img { vertical-align: middle; margin: 0px !important; padding: 0px !important; } /* end of the 'powered by topsy' */ .zenback-hatebu,.zenback-twitter{ } /* Twitter hatebu common */ .zenback .zenback-hatebu .zenback-social .zenback-heading,.zenback .zenback-twitter .zenback-heading{ } .zenback .zenback-heading a{ background:none !important; text-decoration:none !important; } .zenback .zenback-hatebubtn, .zenback .zenback-twitterbtn, .zenback .zenback-mixibtn, .zenback .zenback-evernotebtn, .zenback .zenback-facebookbtn { clear:both; padding:5px 0 !important; margin:0 0 5px 0 !important; background:transparent url(http://widget.zenback.jp/_p/images/line-dashed.gif?v=435f8) 0 bottom repeat-x; text-align:center; } .zenback .zenback-hatebubtn a, .zenback .zenback-heading a, .zenback .zenback-twitterbtn a, .zenback .zenback-mixibtn a, .zenback .zenback-facebookbtn a { text-decoration:none; } .zenback .zenback-hatebubtn img,.zenback .zenback-twitterbtn img{ vertical-align:bottom !important; } .zenback .zenback-headingwrap{ display:inline; } /* Twitter */ .zenback .zenback-twitter .zenback-heading { background:url(http://widget.zenback.jp/_p/images/icon-twitter.gif?v=11fc1) 3px center no-repeat #44c2e4; } .zenback .zenback-twitter .zenback-heading span { background-color:#44c2e4; } .zenback .zenback-twitter .zenback-heading span em{ font-weight:normal !important; font-style:normal !important; font-size:86% !important; text-align:right !important; margin:0 !important; padding:0 !important; text-decoration:none !important; } .zenback .zenback-twitterbtn{ border-top:1px solid #44c2e4; } .zenback .zenback-twitter-name { margin-right:5px; } .zenback .zenback-twitter-status { clear: both; } .zenback-twitter ul.zenback-list li { margin-bottom:5px !important; background:none !important; padding-left:0 !important; } /* Twitter design */ .zenback .zenback-twitter ul{ /*border-top:1px solid #44c2e4 !important;*/ padding-top:5px !important; /*color:#000 !important;*/ } .zenback-twitter ul.zenback-nodesign li { min-height:48px !important; margin-bottom:10px !important; padding-bottom:7px !important; border-bottom:1px solid #eeeeee !important; padding:0 0 5px 0 !important; text-indent:0 !important; } * html .zenback-twitter ul.zenback-nodesign li { height:48px !important; } .zenback-twitter ul.zenback-nodesign li img.zenback-twitter-icon { float: left !important; margin: 0px 5px 0px 0px !important; } .zenback-twitter ul.zenback-nodesign li a { text-decoration:underline !important; font-weight:normal !important; background:none !important; font-style:normal !important; color:#0000FF !important; } .zenback-twitter ul.zenback-nodesign li a:hover { text-decoration:none !important; background:none !important; font-weight:normal !important; background:none !important; font-style:normal !important; } .zenback-twitter ul.zenback-nodesign li .zenback-itemdate a{ font-size:11px !important; color:#999 !important; text-decoration:none !important; font-weight:normal !important; font-style:normal !important; background:none !important; padding:0 !important; } .zenback-twitter ul.zenback-nodesign li .zenback-itemdate a:hover { text-decoration:underline !important; color:#999 !important; font-weight:normal !important; font-style:normal !important; background:none !important; } .zenback-twitter ul.zenback-nodesign li .web-intents img { float: none !important; margin: 0px !important; padding: 0px !important; display: inline !important; } /* hatebu */ .zenback .zenback-hatebu .zenback-heading { background:url(http://widget.zenback.jp/_p/images/icon-hatebu.gif?v=0e165) 3px center no-repeat #5279e7; } .zenback .zenback-hatebu .zenback-heading span { background-color:#5279e7 !important; } .zenback .zenback-hatebu .zenback-heading span em{ font-weight:normal !important; font-style:normal !important; font-size:86% !important; text-align:right !important; margin:0 !important; padding:0 !important; text-decoration:none !important; } .zenback .zenback-hatebubtn{ border-top:1px solid #5279e7 !important; } .zenback .zenback-hatebu ul { /*border-top:1px solid #5279e7 !important;*/ padding-top:5px !important; color:#000 !important; } .zenback .zenback-hatebu ul li{ margin-bottom:5px !important; } /* hatebu design */ .zenback-hatebu ul.zenback-nodesign { background:#edf1fd !important; margin:0 0 5px 0 !important; padding:5px 10px 5px 10px !important; } .zenback-hatebu ul.zenback-nodesign li { font-size:85% !important; margin-bottom:2px !important; background:none !important; padding-left:0 !important; } .zenback-hatebu ul.zenback-nodesign li img { vertical-align: middle !important; margin: 0px !important; padding: 0px !important; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-date { margin-right:3px; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-name { margin-right:3px; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-tag { font-size:80%; margin-right:3px; } .zenback-hatebu ul.zenback-nodesign a { text-decoration:underline !important; font-weight:normal !important; background:none !important; font-style:normal !important; color:#0000FF !important; } .zenback-hatebu ul.zenback-nodesign a:hover { text-decoration:none !important; background:none !important; font-weight:normal !important; background:none !important; font-style:normal !important; } /* socialbar */ .zenback .zenback-socialbar .zenback-heading { background: url(images/icon-social.gif) 3px center no-repeat #5279e7 !important; } .zenback .zenback-socialbar .zenback-heading span { background-color: #5279e7 !important; } .zenback .zenback-socialbar .zenback-socialbtn div { float: left !important; height: 30px !important; } .zenback .zenback-socialbar .zenback-socialbtn:after { content: "." !important; display: block !important; visibility: hidden !important; height: 0.1px !important; font-size: 0.1em !important; line-height: 0 !important; clear: both !important; } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-twitter { } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-twitter iframe { float: left !important; } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-twitter-count { list-style-type: none !important; background: none !important; position: relative !important; float: left !important; padding: 0px 5px 0px 0px !important; margin: 0px !important; } .zenback .zenback-socialbar .zenback-socialbtn div div.zenback-socialbar-twitter-count-element { display: inline-block !important; position: relative !important; margin: 0 0 0 5px !important; -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -ms-box-sizing: border-box !important; height: 20px !important; max-width: 100% !important; } .zenback .zenback-socialbar .zenback-socialbtn div div.zenback-socialbar-twitter-count-element i { position: absolute !important; visibility: visible !important; line-height: 0 !important; width: 0 !important; height: 0 !important; left: 0 !important; top: 50% !important; margin: -4px 0 0 -4px !important; border: 4px transparent solid !important; border-right-color: #AAA !important; border-left: 0 !important; } .zenback .zenback-socialbar .zenback-socialbtn div div.zenback-socialbar-twitter-count-element u { position: absolute !important; visibility: visible !important; line-height: 0 !important; width: 0 !important; height: 0 !important; left: 0 !important; top: 50% !important; border: 4px transparent solid !important; margin: -4px 0 0 -7px !important; border-right-color: white !important; } .zenback .zenback-socialbar .zenback-socialbtn div div.zenback-socialbar-twitter-count-element span { visibility: visible !important; font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif !important; text-align: center !important; color: #333 !important; padding: 2px 5px 4px 5px !important; background: white !important; border: #BBB solid 1px !important; -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important; border-radius: 3px !important; min-height: 18px !important; _height: 18px !important; min-width: 15px !important; _width: 15px !important; } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-twitter-follow { clear: both !important; } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-hatebu { } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-mixicheck { } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-evernote { } .zenback .zenback-socialbar .zenback-socialbtn div.zenback-socialbar-facebook { } /* socialbar design */ .zenback-socialbar div.zenback-nodesign { margin: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 10px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-twitter { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-twitter iframe { margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-twitter span { margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-hatebu { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-hatebu iframe { margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-mixicheck { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-mixicheck a { margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-mixicheck a:hover { background: none !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-mixicheck img { vertical-align: middle !important; margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-evernote { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-evernote a { margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-evernote a:hover { background: none !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-evernote img { vertical-align: middle !important; margin: 0px !important; padding: 0px !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-google-plusone { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-facebook { margin: 0px !important; padding-top: 0px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; vertical-align: middle !important; } .zenback-socialbar div.zenback-nodesign div.zenback-socialbar-facebook iframe { margin: 0px !important; padding: 0px !important; } /* zenback-news ----------------------------------------------------------------------*/ .zenback #zenback-news{ display: block; clear:both; margin-bottom:12px; margin-top:12px; } .zenback #zenback-news .news-title { padding-bottom: 5px; } .zenback #zenback-news .newstitle{ position:absolute; top:-24px; left:-3px; } * html .zenback #zenback-news .newstitle{ top:-21px } *+html .zenback #zenback-news .newstitle{ top:-21px; } .zenback #zenback-news .zenback-newslist{ padding:5px 10px; margin:0; } .zenback #zenback-news .zenback-newslist .zenback-newsitem{ padding:0; margin:5px 0; } .zenback #zenback-news .zenback-newslist .zenback-newsdate{ padding:3px 10px 3px 0; } .zenback #zenback-news .zenback-newslist .zenback-newsdate img { vertical-align: middle !important; margin: 0px !important; padding: 0px !important; } .zenback #zenback-news .newstitle-label { position:absolute; top:-26px; left:82px; } .zenback .newstitle-label span { font-size: 14px; color: #7FC527 !important; line-height: 170% !important; font-weight: bold !important; vertical-align: middle !important; display: block !important; float: left !important; } * html .zenback #zenback-news .newstitle-label { top:-100px } *+html .zenback #zenback-news .newstitle-label { top: -100px } #zenback-ads { text-align: left !important; border:3px solid #80c527 !important; border-radius:5px !important; -webkit-border-radius:5px !important; -moz-border-radius:5px !important; } #zenback-ads .ads-tweet-content { padding: 10px 5px 10px 5px !important; margin: 0 !important; min-height: 48px !important; } #zenback-ads p { padding: 5px !important; margin: 0 !important; display: block !important; } #zenback-ads p span.metadata { border-top: 1px solid #e6e6e6 !important; display: block !important; width: 100% !important; clear: both !important; margin-top: 8px !important; padding-top: 8px !important; height: 40px !important; } #zenback-ads p span.metadata span.author { font-size: 13px !important; } #zenback-ads p span.account { font-weight: bold !important; margin: 10px !important; } #zenback-ads p span.metadata span.author a { line-height: 22px !important; font-size: 20px !important; padding: 0px !important; text-decoration: none !important; } #zenback-ads p span.metadata span.author img { float: left !important; margin: 0 10px 0 0px !important; width: 48px !important; height: 48px !important; } #zenback-ads a { text-decoration: none !important; } #zenback-ads a:hover { text-decoration: underline !important; } #zenback-ads .link a { text-decoration: underline !important; } #zenback-ads p span.line{ border-top: 1px solid #fff !important; border-top: 1px solid #e6e6e6 !important; } /* zenback customize style ----------------------------------------------------------------------*/ /* module background color */ .zenback { } /* title color */ .zenback .zenback-heading span, .zenback .zenback-powered span { color:#ffffff; } /* title background color */ .zenback .zenback-heading { border-bottom-color:#7fc527; } .zenback .zenback-entries .zenback-heading span, .zenback .zenback-entries .zenback-heading { background-color: #7fc527; } .zenback .zenback-entries ul { border-top-color:#7fc527; } .zenback .zenback-links .zenback-heading span, .zenback .zenback-links .zenback-heading { background-color:#b0c906; } .zenback .zenback-links ul { border-top-color:#b0c906; } .zenback .zenback-keywords .zenback-heading span, .zenback .zenback-keywords .zenback-heading { background-color:#C58E68; } .zenback .zenback-keywords ul { border-top-color:#C58E68; } .zenback .zenback-facebook .zenback-heading span, .zenback .zenback-facebook .zenback-heading { background-color:#3B5998; } .zenback .zenback-facebook ul { border-top-color:#3B5998; } .zenback .zenback-powered { border-top-color:#7fc527;} .zenback .zenback-heading span, .zenback .zenback-powered span { background-color:#7fc527;} </style> |
3:HTML
<div class="zenback" style="display:none;"> <div class="zenback-socialbar zenback-module"> <div class="zenback-socialbtn zenback-nodesign"> <div class="zenback-socialbar-twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://nanoappli.com/blog/" data-count="none" data-via="zenback" data-lang="en">Tweet</a> <div class="zenback-socialbar-twitter-count-element"> <i></i> <u></u> <span type="button">0</span> </div> </div> <div class="zenback-socialbar-hatebu"> <a href="http://b.hatena.ne.jp/entry/http://nanoappli.com/blog/" class="hatena-bookmark-button" 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> </div> <div class="zenback-socialbar-google-plusone"> <div id="zenback-google-plusone"></div> </div> </div> </div> <div class="zenback-entries zenback-module"> <div class="zenback-heading"><span>関連記事</span></div> <ul class="zenback-list"> <li><a href="http://nanoappli.com/blog/archives/123">記事タイトル... « nanoblog</a></li> <li><a href="http://nanoappli.com/blog/archives/50">記事タイトル... « nanoblog</a></li> <li><a href="http://nanoappli.com/blog/archives/94">記事タイトル... « nanoblog</a></li> <li><a href="http://nanoappli.com/blog/archives/163">記事タイトル... « nanoblog</a></li> <li><a href="http://nanoappli.com/blog/archives/270">記事タイトル... « nanoblog</a></li> </ul> </div> <div class="zenback-links zenback-module" style="display:block !important; height:auto !important; visibility:visible !important;"> <div class="zenback-heading"><span>関連リンク</span></div> <ul class="zenback-list"> <li><a href="http://blog.yoshitomo.org/archives/364" target="_blank">AdSence のクリックできる部分が変更</a></li> <li><a href="http://veadardiary.blog29.fc2.com/blog-entry-2445.html" target="_blank">起動しているアプリのアイコンがメニューバーに表示され、クリックで最前面に出すアプリを変更するアプリケ...</a></li> <li><a href="http://www.hattrick-supporter.com/archives/51266036.html" target="_blank">掲示板をちょっと変更</a></li> <li><a href="http://d.hatena.ne.jp/orangeclover/20091213/1260705242" target="_blank">Google Analyticsのクリック表示が消えない - みちしるべ</a></li> <li><a href="http://www.hide10.com/archives/3211" target="_blank">クリックで拡大表示</a></li> </ul> </div> <div class="zenback-keywords zenback-module" style="display:block !important; height:auto !important; visibility:visible !important;"> <div class="zenback-heading"><a href="http://zenback.itmedia.co.jp/" target="_blank"><span>関連キーワード</span></a></div> <ul class="zenback-list"> <li><a href="http://zenback.itmedia.co.jp/keywords/クリック/" target="_blank">クリック</a></li> <li><a href="http://zenback.itmedia.co.jp/keywords/掲示板/" target="_blank">掲示板</a></li> <li><a href="http://zenback.itmedia.co.jp/keywords/フォーラム/" target="_blank">フォーラム</a></li> <li><a href="http://zenback.itmedia.co.jp/keywords/ページ/" target="_blank">ページ</a></li> <li><a href="http://zenback.itmedia.co.jp/keywords/インストール/" target="_blank">インストール</a></li> </ul> </div> <div id="zenback-news" style="display:block !important; height:auto !important; visibility:visible !important;"> <div class="news-title"> <a href="http://blog.zenback.jp/2011/10/classified.html" target="_blank"> <img src="http://widget.zenback.jp/_p/images/classified.png?v=8a087" alt="zenback"> </a> </div> <div id="zenback-ads"> <div class="ads-tweet-content"> <div class="components-middle"> <p> <span class="tweet_body"> </span> </p> </div> </div> </div> </div> <br /> <div class="zenback-powered"> <span> <a href="http://sixapart.jp/zenback/" target="_blank"> <img src="http://widget.zenback.jp/_p/images/poweredby.gif?v=8eb9c" alt="Powered by zenback" /> </a> </span> </div> </div> <div id="zenback-script-container"> </div> |
4:script本編
<script type="text/javascript"> var _gaq = _gaq || []; (function () { var zb_escape_html = function (str) { str = str.replace("&","&"); str = str.replace("\"","""); str = str.replace("'","'"); str = str.replace("<","<"); str = str.replace(">",">"); return str; }; var zb_load_script = function (options) { var script = document.createElement('script'); script.src = options.url; script.type = 'text/javascript'; script.charset = 'utf-8'; if (options.async) { script.async = true; } if (window.ActiveXObject) { // for IE script.onreadystatechange = function () { if (this.readyState === 'onloaded' || this.readyState === 'complete') { options.onload && options.onload(); } }; } else { // for other script.onloaddone = false; // for opera script.onload = function () { if (!this.onloaddone) { options.onload && options.onload(); this.onloaddone = true; } }; } if (options.element) { var s = options.element; s.appendChild(script); } else { // default insert var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); } }; var _zb_print_error = function (msg) { window.console && console.error(msg); }; var zb_load_jsonp = function (params, callback) { if (!params || !callback) { throw new Error('Invalid Parameter'); } try { var cb_key = params.callbackKey || 'callback'; var cb_value = params.callbackValue || 'callback'; var url = (params.url + (params.url.match(/\?/) ? '&' : '?')); url += (cb_key + '=' + cb_value); var frame = document.createElement("iframe"); frame.style.display = "none"; document.body.appendChild(frame); var doc = frame.contentWindow.document; var count = 0; // for Opera frame[frame.readyState/*IE*/ ? "onreadystatechange" : "onload"] = function () { if (this.readyState && this.readyState !== 'complete' || count++) { return; } if (doc['__zb_jsonp__']) { callback(null, doc['__zb_jsonp__']); } else if (params.retry && params.retry >= 1) { var timeout = params.timeout || 1000; setTimeout(function () { zb_load_jsonp({ url: params.url ,callbackKey: cb_key ,callbackValue: cb_value ,retry: params.retry - 1 ,timeout: timeout }, callback)}, timeout); } else { callback({ message: 'Failed load jsonp' }); } setTimeout(function () { try { frame && frame.parentNode && frame.parentNode.removeChild(frame); } catch (e) { _zb_print_error(e.message); } }, 0); }; doc.open(); doc.write('<' + 'script type="text/javascript">' + 'function ' + cb_value + ' (v) { document["__zb_jsonp__"] = v };' + '</' + 'script>' + '<' + 'script type="text/javascript" src="' + url + '"></' + 'script>'); doc.close(); return frame; } catch (e) { callback(e); } }; var zb_abort_jsonp = function (frame) { try { frame && frame.parentNode && frame.parentNode.removeChild(frame); } catch (e) { _zb_print_error(e.message); } }; var script_container = document.getElementById('zenback-script-container'); var zb_ga_track_settings = function () { _gaq.push(['zb._setAccount', 'UA-17145123-2']); _gaq.push(['zb._trackPageview']); _gaq.push(['zb._trackEvent', 'widgetNSID', '353091eea229c2955b2271a0c215dd8bcb210a67']); _gaq.push(['zb_ads._setAccount', 'UA-17145123-5']); }; var zb_ga_track_entries = function () { zb_jq('.zenback-entries .zenback-list a').click(function () { _gaq.push(['zb._trackEvent', 'kanren_entries', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_links = function () { zb_jq('.zenback-links .zenback-list a').click(function () { _gaq.push(['zb._trackEvent', 'kanren_links', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_keywords = function () { zb_jq('.zenback-keywords .zenback-list a').click(function () { _gaq.push(['zb._trackEvent', 'kanren_keywords', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_newsitem = function () { zb_jq('.zenback-newsitem a').click(function () { _gaq.push(['zb._trackEvent', 'zenback_news', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_twitter_widget = function () { zb_jq('.zenback-twitter .zenback-list a').click(function() { _gaq.push(['zb._trackEvent', 'twitter', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_mixi = function () { zb_jq('.zenback-socialbar .zenback-socialbar-mixicheck a').click(function () { _gaq.push(['zb._trackEvent', 'mixi', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_evernote = function () { zb_jq('.zenback-socialbar .zenback-socialbar-evernote a').click(function () { _gaq.push(['zb._trackEvent', 'evernote', encodeURI(this.href), 'http://nanoappli.com/blog/']); }); }; var zb_ga_track_hatena_bookmark = function () { _gaq.push(['zb._trackEvent', 'hatena_bookmark', encodeURI(this.href), 'http://nanoappli.com/blog/']); }; var zb_ga_track_googleplusone = function (obj) { _gaq.push(['zb._trackSocial', 'google+1', obj.state, obj.href]); }; var zb_ga_track_twitter_tweet = function (url) { _gaq.push(['zb._trackSocial', 'twitter', 'tweet', url]); }; var zb_ga_track_twitter_follow = function () { _gaq.push(['zb._trackSocial', 'twitter', 'follow']); }; var zb_ga_track_fb_comments = function (comment) { _gaq.push(['zb._trackSocial', 'facebook', 'comment', comment.href]); }; var zb_ga_track_fb_uncomments = function (comment) { _gaq.push(['zb._trackSocial', 'facebook', 'uncomment', comment.href]); }; zb_load_script({ url: ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js' ,async: true ,onload: function () { zb_ga_track_settings(); zb_ga_track_entries(); zb_ga_track_links(); zb_ga_track_newsitem(); zb_ga_track_keywords(); zb_ga_track_twitter_widget(); zb_ga_track_mixi(); zb_ga_track_evernote(); } }); zb_load_script({ url: 'http://platform.twitter.com/widgets.js' ,element: script_container ,async: true ,onload: function () { var zb_extract_param_from_uri = function (uri, paramName) { if (!uri) { return ''; } var uri = uri.split('#')[0]; // Remove anchor. var parts = uri.split('?'); // Check for query params. if (parts.length == 1) { return ''; } var query = decodeURI(parts[1]); // Find url param. paramName += '='; var params = query.split('&'); for (var i = 0, param; param = params[i]; ++i) { if (param.indexOf(paramName) === 0) { return unescape(param.split('=')[1]); } } }; if (window.twttr) { window.twttr.events.bind('tweet', function (event) { if (event) { var targetUrl; if (event.target && event.target.nodeName == 'IFRAME') { targetUrl = zb_extract_param_from_uri(event.target.src, 'url'); } zb_ga_track_twitter_tweet(targetUrl); } }); window.twttr.events.bind('follow', function (event) { event && zb_ga_track_twitter_follow(); }); } } }); zb_load_script({ url: 'http://b.st-hatena.com/js/bookmark_button.js' ,element: script_container ,async: true ,onload: function () { } }); window.___gcfg = { lang: 'ja' ,parsetags: 'explicit' }; zb_load_script({ url: 'https://apis.google.com/js/plusone.js' ,element: script_container ,async: true ,onload: function () { gapi.plusone.render('zenback-google-plusone', { 'size': 'medium' ,'count': 'true' ,'callback': 'zb_ga_track_googleplusone' }); } }); var zb_render_ad_view = function (params) { var result = false; try { var $zb_ads_body = zb_jq('#zenback-ads span.tweet_body'); var $zb_ads_text_a = zb_jq('<a></a>') .attr('href', params.link_url) .attr('target', '_blank') .addClass('zenback-ads-ad') .click(params.ga_click_tracking_code); var $zb_ads_link_span = zb_jq('<span></span>') .addClass('link'); $zb_ads_link_span.append($zb_ads_text_a.clone().text(params.view_url)); $zb_ads_text_a.text(params.ad_text); var $zb_ads_metadata_span = zb_jq('<span></span>') .addClass('metadata'); var $zb_ads_author_span = zb_jq('<span></span>') .addClass('author'); var $zb_ads_twitter_a = zb_jq('<a></a>') .attr('href', params.twitter_url) .attr('target', '_blank') .addClass('zenback-ads-twitter') .click(params.ga_click_tracking_code); var $zb_ads_twitter_a_clone = $zb_ads_twitter_a.clone() .text('@' + params.twtiter_screen_name); var $zb_ads_img = zb_jq('<img />') .attr('src', params.twitter_icon_url) .attr('alt', params.twtiter_screen_name); $zb_ads_twitter_a.append($zb_ads_img); var $zb_ads_strong = zb_jq('<strong></strong>') .append($zb_ads_twitter_a_clone); $zb_ads_author_span.append($zb_ads_twitter_a) .append($zb_ads_strong) .append(zb_jq('<br />')) .append(zb_jq('<span></span>').text(params.twtiter_screen_name)); $zb_ads_metadata_span.append($zb_ads_author_span); $zb_ads_body.append($zb_ads_text_a) .append(zb_jq('<br />')) .append($zb_ads_link_span) .append($zb_ads_metadata_span) .show(); result = true; } catch (e) { _zb_print_error(e.message); } return result; }; var zb_show_default_ad_view = function (ga_category) { var ga_category = ga_category || 'default'; var link_url = 'http://zenback.jp/?s=ads_fl01'; var view_url = 'http://zenback.jp'; var result = zb_render_ad_view({ link_url: link_url ,view_url: view_url ,ad_text: 'zenbackは自分のブログの記事と、過去の自分の記事、他のブログ記事、TwitterやFacebookなどソーシャルメディアをつなげるウィジェットです。多くのブログサービスに対応。設置はコードをコピペするだけ、5分で完了します。ご利用は無料です。' ,twitter_url: 'http://twitter.com/zenback' ,twitter_icon_url: 'http://a1.twimg.com/profile_images/1185414381/zenback_icon_normal.png' ,twtiter_screen_name: 'zenback' ,ga_click_tracking_code: function () { _gaq.push(['zb_ads._trackEvent', ga_category, 'click', link_url]); } }); if (result) { _gaq.push(['zb_ads._trackPageview', ga_category, link_url]); } else { _zb_print_error('Failed the default ad rendering.'); } }; var zb_load_twitter_favorites = function (twitter_id, load_count, callback) { try { var retry = 4; var favorites_api_base_url = 'https://api.twitter.com/1/favorites.json'; var favorites_api_call_url = favorites_api_base_url + '?id=' + twitter_id + '&count=' + load_count; zb_load_jsonp({ url: favorites_api_call_url, retry: retry }, function (err, jsonp) { if (err) { callback(err); return; } callback(null, jsonp); }); } catch (e) { callback(e); } }; var zb_select_ad_tweet = function (free_tweets, filler_tweets, callback) { try { if (!free_tweets || !filler_tweets) { callback({ message: 'Invalid parameter' }, null); return; } var timestamp = (+new Date()); var select_index = timestamp % 40; if (select_index < free_tweets.length) { callback(null, { ad: free_tweets[select_index] ,ga_category: 'zbcf' }); } else { if (filler_tweets.length === 0) { callback({ message: 'Nothing filler' }, null); } else { callback(null, { ad: filler_tweets[timestamp % filler_tweets.length] ,ga_category: 'zbcf2' }); } } } catch (e) { _zb_print_error(e.message); callback(e); } }; var zb_show_ad_view = function (tweet, ga_category) { if (!tweet) { return; } var link_url = 'https://twitter.com/#!/' + tweet.user.screen_name + '/status/' + tweet.id_str; var view_url = link_url; var url_regex = /((?:https?):\/\/[!-~]+)/m; if (tweet.text.match(url_regex)) { link_url = RegExp.$1; view_url = RegExp.$1; } var twitter_url = 'http://twitter.com/' + tweet.user.screen_name; var result = zb_render_ad_view({ link_url: link_url ,view_url: view_url ,ad_text: tweet.text ,twitter_url: twitter_url ,twitter_icon_url: tweet.user.profile_image_url ,twtiter_screen_name: tweet.user.screen_name ,ga_click_tracking_code: function () { _gaq.push(['zb_ads._trackEvent', ga_category, 'click', tweet.id_str]); } }); if (result) { _gaq.push(['zb_ads._trackPageview', ga_category, tweet.id_str]); } else { _zb_print_error('Failed the free ad rendering.'); } }; try { var ads_free_id = 'zbcf'; var ads_free_load_number = 40; zb_load_twitter_favorites(ads_free_id, ads_free_load_number, function (err, data) { if (err) { _zb_print_error(err.message); zb_show_default_ad_view(); return; } var ads_free_tweets = data; var ads_filler_id = 'zbcf2'; var ads_filler_load_number = 40; zb_load_twitter_favorites(ads_filler_id, ads_filler_load_number, function (err, data) { if (err) { _zb_print_error(err.message); zb_show_default_ad_view(); return; } var ads_filler_tweets = data; zb_select_ad_tweet(ads_free_tweets, ads_filler_tweets, function (err, data) { if (err) { _zb_print_error(err.message); zb_show_default_ad_view(); return; } zb_show_ad_view(data.ad, data.ga_category); }); }); }); } catch (e) { _zb_print_error(e.message); zb_show_default_ad_view(); } })(); </script> |
CSS長いよ。あと、javascriptもぱっと見でコードの重複が多いし。
本当はこのまま解析を続けようかと思ったのですが、余りに長くなってしまったので次回に続きます…
関連記事
コメントを残す