PR PR
宝島社
¥990 (2023/12/22 16:35時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

zenbackコードを記事下に綺麗に貼る方法

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年4月29日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

スポンサーリンク

スポンサーリンク

zenbackコードを綺麗に記事直下に貼る方法

zenbackコードを記事直下に表示した画面
zenbackコードを記事直下に表示した画面

以前から、
zenbackは使用させて頂いていましたが、
サイドバーにWidgetとして設置していました。

ですが、
記事直下に表示さすべく挑戦録を残しておきます。

*zenbackは記事の個別ページを解析して、
          関連記事関連リンクを表示します。

サイドバーにzenbackを貼るということは、
トップページに表示されるという事でもあります。

ということは、
どの記事を開いても常にサイドバーに表示されている状態になります。
この場合、
記事の解析がしにくく精度のあまり高くない関連記事や関連リンクが、
表示されることがあるようです。
関連記事の精度を上げる「Zenbackタグ」

関連記事が最大の要なので、『能ある鷹は爪隠す』状態で勿体ない状態…。

それを解消するために、
zenbackからスクリプトコードをもらってきます。

<!--  zenback code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>

そしたら直上に、

&lt;!-- zenback_title_begin --&gt;

を追記。
さらに、

</h3>
</b:if>

そ直下に、以下を追記。

&lt;!-- zenback_title_end --&gt;

次に、

<data:post.body/> 

を見つけて、
その上下に以下の様に記載します。

&lt;!-- zenback_body_begin --&gt;       
<data:post.body/>                
&lt;!-- zenback_body_end --&gt;

あとは、
以下タグが近くにあると思うのでタグを見つけます。

<div style='clear: both;'/> <!-- clear for photos floats -->

その下に、
zenbackからもらってきた
以下スクリプトコードを記載します。

<!--  zenback code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'/>  
&lt;!-- zenback_title_begin --&gt;
<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>  
&lt;!-- zenback_title_end --&gt;
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>      
&lt;!-- zenback_body_begin --&gt;       
<data:post.body/>                
&lt;!-- zenback_body_end --&gt;
<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 == &quot;item&quot;'>
<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'>
&lt;!-- {
blog_url:&#39;(Blogger名).blogspot.com/&#39;
,tags:[]
,related_title:&#39;関連記事&#39;
,recent_title:&#39;最近の記事&#39;
,thumbs:0
,post_page_only:1
} --&gt;
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 == &quot;item&quot;'>
<!-- 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 -->

zenback

スポンサーリンク
タイトルとURLをコピーしました