こんにちは。
『やさしいブログの作り方』の松田です。
昨日の記事でご紹介した、自分のフェイスブックページをアメブロのサイドバーに表示させるプラグインLikeBox。
その記事に、「記事下に自動挿入することはできますか？」というご質問をいただいたので今日はそのやり方をご紹介します。
まず、こちらの記事の通りにLikeBoxをサイドバーに表示できるようにします。
Likeboxのタグは概ね以下の様な表記になっているはずです。<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Famecafe2011&width=290&height=600&colorscheme=light&show_faces=true&header=false&stream=true&show_border=true&appId=301693513294420" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:600px;" allowTransparency="true"></iframe>
記事下に自動挿入するには、上記に以下のような記述を前後に追記します。（赤色部分）<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var LB ='<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Famecafe2011&width=292&height=600&colorscheme=light&show_faces=true&header=false&stream=true&show_border=true&appId=301693513294420" scrolling="no" frameborder="0" sty|e="border:none; overflow:hidden; width:292px; height:600px;" allowTransparency="true"></iframe>'
$(function() {
$("div.skinArticleFooter").before('<div>' + LB + '</div>');
});
</script>
そして緑色の部分を
width:100%;
に変更すると、ちょうど記事幅と同じ幅に広がります。＾＾
ちょっと難し目ですが、やってみたい方はぜひトライください。
最後までお読みいただきありがとうございました。６月１日、電子出版しました！