Blogger Widget (2)

Widgetは作って見たいものの、何かネタは無いものかと思いながら唸ってばかりですが、もう1ネタ起こしてみました。

今回のは、各Postの下にAmazon Associatesな広告を自動的に挿入・表示する物です。

対象としたのはAmazonライブリンクです。これは通常キーワード・ジャンルを指定してiframeなタグ作ってから埋め込むんですが、今回のWidgetは、Postに付けられたTagをキーワードにiframeなタグを生成して、Postの本文の直後にねじ込み表示します。

複数個のTagが指定されていた場合は常に最初のTagをキーワードとします。BloggerのTagはPost・Edit時に指定した順序ではなくて、Alphabetical orderで表示されてしまうので、なんか台無しな感じですが・・・。ちなみにタグを設定してない投稿の後には売れ筋がでるんで、主に漫画とかが表示されてちょっと嫌。

それと動的にiframeタグを生成しているのですが、その際のstyle attributeの指定がどうもうまくいってません。Internet Explorer (IE)で見るとIFrameのBorderが残っちゃってます。IEの問題点として、setAttributeでstyleを指定できないので、style.cssTextでアクセスするのは知っていたつもりなんでが、何故か未だにBorderが消えてくれないです。それ以外は IE7 Firefox2 ともに大丈夫みたいです。(OperaとかIE6とかはまったく気にしてませんけど。)

こんな感じで納得いってないのですが、商品の選択され具合が興味深いので暫く動かしてみようかと思います。

ちかみにWidgetに書いてるコードはこんな感じです。(汎用的に書き初めたけど破綻してるのが物悲しい・・)

<script type="text/javascript" language="javascript">
    /* Script for Amazon Associates */

    var org=window["onload"];
    window["onload"]=
                (typeof org!="function"?
                    function(event){insertAds(document.body,'div','post-body')}:
                    function(event){insertAds(document.body,'div','post-body');org(event)});
   
    function insertAds(elm,tagName,className){
        var elms=elm.getElementsByTagName(tagName);
       
        for(var i=0; i!=elms.length;i++){
            var e=elms[i];
            if(e.getAttribute("className")==classNamee.getAttribute("class")==className){
               var eDiv = document.createElement(tagName.toLowerCase()=="div"?"span":"div");
               var eAd = document.createElement("iframe");
               eAd.setAttribute("src"
                , "http://rcm-jp.amazon.co.jp/e/cm?t=isawseash-22"
                + "&o=9&p=48&l=st1"
                + "&mode=books-jp"
                + "&search=" + encodeURI(getSearchKeyword(e))
                + "&fc1=1=&lc1=&bg1=&f=ifr");               
               
                if (document.documentElement.getAttribute("style")
                                       == document.documentElement.style)
                    eAd.style.borderStyle ="none";
                else
                    eAd.setAttribute("style","border:none;");

                eAd.setAttribute("scrolling","no");
                eAd.setAttribute("frameborder","0");
                eAd.setAttribute("border","0");
                eAd.setAttribute("height","90");
                eAd.setAttribute("width","728");
                eAd.setAttribute("marginheight","0" );
                eAd.setAttribute("marginwidth","0");

                eAd = eDiv.appendChild(eAd);
                e.appendChild(eDiv);
            }//__if
        }//__for
    }
   
    function getSearchKeyword(ePost){
        var ret = null;
       
        for(var eNext = ePost.nextSibling;eNext.nodeType!=1;eNext=eNext.nextSibling);
        var eSpans = eNext.getElementsByTagName("span");
       
        for(var i=0; i!=eSpans.length;i++){
            var e=eSpans[i];
            if(e.getAttribute("className")=="post-labels"e.getAttribute("class")=="post-labels"){
                var eKeywords= e.getElementsByTagName("a");
                if(eKeywords.length){
                    ret = eKeywords[0].innerHTML;
                    break;
                }
                else {break;}
            }//__if
        }//__for
   
        return ret;
    }
</script>

私はAffiliateとかそんなに詳しくないのですが、Amazonだと今時はREST経由で取得したXMLをXSLTで整形してとかがオシャレらしいんで、次回はそれをとか思ってます。

ちなみに当初はAmazonおまかせリンク（TM) ベータ版 とかってのを試したんてすが、load後だとなにやってもまともに動かなかったのと、Google Adsenseとは比較にならないほどのキーワード抽出というか選択の間抜けさだったりしたので止めました。

この辺り、キーワード抽出・選択あたりをPostされた記事の中から適切に出来たりしたら素敵だなぁ・・・。

関連のありそうな記事