海外・英語WEB集客やソーシャルメディアについてのブログ

アメブロにFacebook「いいね!」ボタン設置:新デザイン(CSS編集用デザイン)


Facebookページ制作、ホームページ制作、英語WEB制作、SEO等させて頂いております、INNOUT.jpです。

f8でFacebookがまた大幅に刷新されるとの事ですが…、「覚えたと思ったら、すぐ変わるから難しい」と言う声に少し共感し始めてしまいました。笑

さて、今回はアメブロにFacebook「いいね!」ボタンを設置してみたので、そのメモ的に書いてみます。

アメーバ・ブログにFacebookいいね!ボタン設置と検索すると色々と方法は出てくるのですが!

新デザイン(CSS編集用デザイン)では殆ど使えないのです!(私の場合だけかもしれませんが…。)

そこで、色々試したコードを一応記載しておきます。全ての方で使えないかもしれないので、そこはご了承くださいね。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load(‘jquery’, ’1.6.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=button_count&width=300&show_faces=false&action=like&colorscheme=light&font&height=50" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:50px;" 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").insertAfter(".articleTheme");
});
</script>

赤文字部分「button_count」を変えると表示されるアイコンが変わります。(下は英語ですけど、日本語表示されますから、安心してください)

アメブロに「いいね」ボタン|Facebookページ制作・ホームページ(WEB)制作のINNOUT.jp|ブログ-likebutton

緑文字部分「insertAfter」を「insertBefore」変えるとブログテーマの上部に表示されます。

また、黄色文字部分「width:300px; height:50px」の数字を変えると、アイコンの横幅(Width)や縦幅(Height)を変更する事が出来ます。


関連記事

Tags

 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>