はじめに
Amazonの広告だけに限らず、外部のサービスから吐き出されるjavascriptやiframeのデータをBloggerにHTMLベースで取り込もうとすると、いつもXHTMLの解析エラーと出てしまいます。はっきり言って、僕がXHTMLの仕様を理解していないせいなのですが、同じような事象に苦しんでいる人いませんか？
いませんか。
とりあえず、自分用のメモとして、Bloggerに外部サービス、例えば、Amazonの広告コードや、Googleアドセンスのコード、SNSなどのコードをHTMLとして、直に書く時の注意点を書いておきます。
基本的に注意点は３つ
ものによって違うとは思いますが、基本的に注意点は以下の３つです。
以下の３つを試しても解決しない場合には、「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>
違いがわかりますか？
＆は、&と書く
先ほど、ダブルコーテーションをシングルコーテーションにしたコードがこちら。
<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>
/で終わらせる
実は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の部分を/>で終わらせるように変えています。
今回の例では、全くやる必要ないのですが、例えばimgタグなど、閉じタグがないようなコードよ場合には、必ず閉じる必要があります。
このコードを記事とシェアボタンの間に入れるとこんな感じになります。
最後に
今回は、BloggerのHTMLを編集する作業自体は、知っている前提で書かせて頂きました。もし、HTML編集ってどうやってBloggerのツール使えばいいの？などありましたら、少々古い記事ですが、以下がちょっと参考になるかと思います。
上記３点の対応をすれば、大抵のコードはお好みの位置に挿入できるかと思います。
以上です。
