スポンサーリンク
zenbackコードを綺麗に記事直下に貼る方法
 |
| zenbackコードを記事直下に表示した画面 |
以前から、
zenbackは使用させて頂いていましたが、
サイドバーにWidgetとして設置していました。
ですが、
記事直下に表示さすべく挑戦録を残しておきます。
＊zenbackは記事の個別ページを解析して、
関連記事や関連リンクを表示します。
サイドバーにzenbackを貼るということは、
トップページに表示されるという事でもあります。
ということは、
どの記事を開いても常にサイドバーに表示されている状態になります。
この場合、
記事の解析がしにくく精度のあまり高くない関連記事や関連リンクが、
表示されることがあるようです。
→関連記事の精度を上げる「Zenbackタグ」
関連記事が最大の要なので、『能ある鷹は爪隠す』状態で勿体ない状態…。
それを解消するために、
zenbackからスクリプトコードをもらってきます。
<!-- zenback code -->
<b:if cond='data:blog.pageType == "item"'>
<!-- X:S ZenBackWidget --><script type="text/javascript">// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if>
<!-- End of zenback code -->
BloggerのテンプレートはXHTMLとやらなので、
”CDATA”とやらを記述。
if文は、
単一記事のページのみ表示する為に追加。
次に、
HTMLの編集ですが、
その前に必ずバックアップをします。
まず、
精度を高める為に、
以下の部分を探してください。。
<b:includable id='post' var='post'>
上記タグの少し下に以下タグがあると思います。
<b:if cond='data:post.title'>
そしたら直上に、
<!-- zenback_title_begin -->
を追記。
さらに、
</h3>
</b:if>
そ直下に、以下を追記。
<!-- zenback_title_end -->
次に、
<data:post.body/>
を見つけて、
その上下に以下の様に記載します。
<!-- zenback_body_begin -->
<data:post.body/>
<!-- zenback_body_end -->
あとは、
以下タグが近くにあると思うのでタグを見つけます。
<div style='clear: both;'/> <!-- clear for photos floats -->
その下に、
zenbackからもらってきた
以下スクリプトコードを記載します。
<!-- zenback code -->
<b:if cond='data:blog.pageType == "item"'>
<!-- X:S ZenBackWidget --><script type="text/javascript">// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if>
<!-- End of zenback code -->
テンプレートによって若干違う部分があるかもしれませんが、
探すタグは同じだと思います。
（シンプルテンプレートは確実に同じだと思います。）
以下に、
全体像のコードを自分の備忘録として残しておきます。
<b:includable id='post' var='post'>
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<!-- zenback_title_begin -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<a expr:href='data:post.url'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</a>
</h3>
</b:if>
<!-- zenback_title_end -->
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<!-- zenback_body_begin -->
<data:post.body/>
<!-- zenback_body_end -->
<div style='clear: both;'/> <!-- clear for photos floats -->
<div class='linkwithin_div'/>
<b:include data='posts' name='related-posts'/>
<!-- 関連記事 開始 -->
<b:if cond='data:blog.isMobile'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both; margin-top: 0px;'>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class='related-posts-widget'>
<!-- {
blog_url:'(Blogger名).blogspot.com/'
,tags:[]
,related_title:'関連記事'
,recent_title:'最近の記事'
,thumbs:0
,post_page_only:1
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</b:if>
</b:if>
<!-- 関連記事 終了 -->
<script src='http://jpn3.fukugan.com/rssimg/rssimg_iframe.php?key=72938c557ab84d76ac844894c627ce3d' type='text/javascript'/>
<!-- zenback code -->
<b:if cond='data:blog.pageType == "item"'>
<!-- X:S ZenBackWidget --><script type="text/javascript">// <![CDATA[
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A(Blogger名).blogspot.com/&nsid=112351448469097807%3A%3A112589542933953795&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if>
<!-- End of zenback code -->
コメント