『アメブロがバージョンアップ！』の続きです。
新しいスキンのHTMLソースを見て、いままで使用していた「いいね！ボタン」スクリプトのclassを変更しても動作しないので、不思議に思っていました。
ところが、新しいスキンに「いいね！」ボタンを付けたという記事がアップされていました。
アメブロ「CSS編集用デザイン」に「いいね」ボタン設置
新スキンにFacebookのいいねボタン設置しました
良く見たら解りました！ jQueryのロードが必要だったんですね。
解かってしまえば、な～んだ、ということで、次のようにスクリプトを修正しました。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script>$(function(){var c=location.href;var g=document.title;var a=$(".skinArticleHeader2 a");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ';$(".articleTime").eq(i).before(" <span>"+e+"</span>");$(".articleExLinkArea").eq(i).after(" <span>"+e+"</span>")}});</script>
赤い部分が、jQueryをロードするために新しく必要になりました。
青い部分は、記事の上の方、タイトルの下に「いいね！」ボタンを付けます。
緑の部分は、記事の下の方、「なうで紹介」ボタンなどの下に、「いいね！」ボタンを付けます。
サンプルを見るには、ココをクリック！
「カスタム可能」デザインの、「ベーシックグレー」と「CSS編集用デザイン」で働くことを確認しました。
いままでの古いスキン用のスクリプトは、次のようになります。
<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=true&width=410&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:410px; height:80px;" allowTransparency="true"></iframe> ';$(".title").eq(i).after(" <span>"+e+"</span>");$(".foot").eq(i).before(" <span>"+e+"</span>")}});</script>
今までのスキンは、記事の下に『記事URL』というリンクがあります。
新しいスキンでは、この『記事URL』が無くなり、記事タイトルがリンクになっています。
『記事URL』が無い、新しいスキンでは、いままでのスクリプトは働きません。
新しいfacebookページは、ココをクリック！
（応援のいいね！よろしくお願いします。）
いいね！ ポチッとお願いします！にほんブログ村＜－ランキング挑戦中！
フォローよろしく！