【Blogger】Amazonの広告を記事の下に入れるのに、ちょっと手間取ったXHTMLの仕様


20130709184545.jpg

はじめに

Amazonの広告だけに限らず、外部のサービスから吐き出されるjavascriptやiframeのデータをBloggerにHTMLベースで取り込もうとすると、いつもXHTMLの解析エラーと出てしまいます。

はっきり言って、僕がXHTMLの仕様を理解していないせいなのですが、同じような事象に苦しんでいる人いませんか?

いませんか。

とりあえず、自分用のメモとして、Bloggerに外部サービス、例えば、Amazonの広告コードや、Googleアドセンスのコード、SNSなどのコードをHTMLとして、直に書く時の注意点を書いておきます。




基本的に注意点は3つ


ものによって違うとは思いますが、基本的に注意点は以下の3つです。

以下の3つを試しても解決しない場合には、「XHTML仕様」で、Google検索してみてください。

多分、Bloggerで検索しても、参考になるものはあまり出てこないです。

ダブルコーテーションはシングルコーテーションにする


Amazonさんの広告コードを例に説明します。

まず、一番最後にAmazonさんから提示されるコードは以下のようになっています。

<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=icanstwotto04-22&o=9&p=12&l=ur1&category=amazonrotate&f=ifr" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>


このダブルコーテーション部分を頑張ってシングルコーテーションに変換します。

<iframe src='http://rcm-fe.amazon-adsystem.com/e/cm?t=icanstwotto04-22&o=9&p=12&l=ur1&category=amazonrotate&f=ifr' width='300' height='250' scrolling='no' border='0' marginwidth='0' style='border:none;' frameborder='0'></iframe>

違いがわかりますか?

&は、&amp;と書く



先ほど、ダブルコーテーションをシングルコーテーションにしたコードがこちら。

<iframe src='http://rcm-fe.amazon-adsystem.com/e/cm?t=icanstwotto04-22&o=9&p=12&l=ur1&category=amazonrotate&f=ifr' width='300' height='250' scrolling='no' border='0' marginwidth='0' style='border:none;' frameborder='0'></iframe>

で、&を、&amp;と書き換えていくと以下のようになります。

<iframe src='http://rcm-fe.amazon-adsystem.com/e/cm?t=icanstwotto04-22&amp;o=9&amp;p=12&amp;l=ur1&amp;category=amazonrotate&amp;f=ifr' width='300' height='250' scrolling='no' border='0' marginwidth='0' style='border:none' frameborder='0'></iframe>

/で終わらせる


実はAmazonさんの広告コードだとこの対応が必要ないのですが、一応例として。

最終的には、以下のようなコードにします。

<iframe src='http://rcm-fe.amazon-adsystem.com/e/cm?t=icanstwotto04-22&amp;o=9&amp;p=12&amp;l=ur1&amp;category=amazonrotate&amp;f=ifr' width='300' height='250' scrolling='no' border='0' marginwidth='0' style='border:none' frameborder='0' />

変更箇所がわかりますか?

最後の/iframeの部分を/>で終わらせるように変えています。

今回の例では、全くやる必要ないのですが、例えばimgタグなど、閉じタグがないようなコードよ場合には、必ず閉じる必要があります。

このコードを記事とシェアボタンの間に入れるとこんな感じになります。

20130709192242.jpg

最後に

今回は、BloggerのHTMLを編集する作業自体は、知っている前提で書かせて頂きました。

もし、HTML編集ってどうやってBloggerのツール使えばいいの?などありましたら、少々古い記事ですが、以下がちょっと参考になるかと思います。



上記3点の対応をすれば、大抵のコードはお好みの位置に挿入できるかと思います。

以上です。





0 件のコメント:

このページをブックマーク