zenbackのスクリプトを解析してみた(2/3)


前回、以下の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("&","&amp;");
      str = str.replace("\"","&quot;");
      str = str.replace("'","&#039;");
      str = str.replace("<","&lt;");
      str = str.replace(">","&gt;");
      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もぱっと見でコードの重複が多いし。

本当はこのまま解析を続けようかと思ったのですが、余りに長くなってしまったので次回に続きます…

関連記事

コメントを残す

メールアドレスが公開されることはありません。