自分でスクリプトタグを書き出せばいいのですが、そこまでの時間がとれずにいましたので半ば諦めておりました。
そんな時に新スキンにFacebookのいいねボタンを設置する方法の記事を発見。早速このブログでも試してみました。
アメブロ新スキンにFacebookのいいねボタンを設置しました
先ほどの記事に書いてあるコードをそのまま貼りつけてみたらうまく表示されなかったので、自分なりにアレンジしてみました。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
var like = '<div id="fb-like"><iframe src="http://www.facebook.com/plugins/like.php?app_id=248687335155423&href=%%current_uri%%&send=false&layout=standard&width=500&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:80px;" allowTransparency="true"></iframe></div>';
like = like.replace('%%current_uri%%', window.location.href);
document.write(like);
$(document).ready(function(){
uri = window.location.href;
_uri = encodeURI(window.location.href);
$("#fb-like").insertBefore(".articleLinkArea");
});
</script>
上記コードをあなたのアメブロ管理画面にありますフリープラグインに貼りつければ、このブログのように記事下に設置されます。
表示位置を変更したい場合
もし、記事タイトル下にある「テーマの下」に設置したい場合には、
赤文字の、
「$("#fb-like").insertBefore(".articleLinkArea");」
を
「$("#fb-like").insertAfter(".articleTheme");」
に変更するだけでテーマの下に設置されます。
テーマの上に設置したい場合には
「$("#fb-like").insertBefore(".articleTheme");」
に変更するだけでテーマの上に設置されます。
ボタンのスタイルを変更したい場合
ボタンのスタイルも変更できます。
「layout=standard」の緑の部分を以下のように変えるだけです。
「layout=button_count」
「layout=box_count」
このボタンのスタイル変更は、以前のスキンに適用されている方のスクリプトタグでも同様に使用可能です。お好みのスタイルに変更してみてください。
まとめとして
Facebookはとても人気があり、特に最近アメブロでビジネスブログを運営されている方々は積極的に利用されてます。なので、この「いいねボタン」は、アメブロの繋がりを広げるためにマストとなってくるのです。
あなたのブログにも新スキンにした際には、この記事でご紹介したコードを使用して設置してみてください。
また、実を言いますと、このJavascriptやJQueryといった類いは私はまだ勉強不足ですので、新規で書き出すには時間がかかってしまう状態なのです。
なので、新スキンにFacebookのいいねボタンを設置する方法の記事を発見した時にはとても助かりました。
もし、他にもTwitterの「リツイートボタン」やGoogle+の「+1ボタン」などを新スキンに適用したコードをご紹介された方がいらっしゃいましたら、ぜひお知らせ頂けると嬉しいですw
その際は、このブログの記事にてご紹介させて頂きます。
では、また書きます。
アメブロ新スキンに関連する記事です。
結構具体的な内容を書いてありますので、ぜひ読んでみてください。
新スキンのカスタマイズの参考に。id＆classレイアウト
アメブロ新スキンを適用してみて気が付いた事
HTMLやCSSの知識が必要となっているアメブロカスタマイズの現状