ホームページ制作に役立つ!ブレイン・エイチシー

ホームページ制作の備忘録サイト(SEO / CSS / Javascript / Ajax / PHP / MySQL / WordPress / MovableType / etc…)

【SNS】 SNSボタン設置方法(Twitter, Facebook, Google+1)

Posted by Yamana 7月 - 9 - 2011 - 土曜日
 

ソーシャルメディアの各ボタン(SNSボタン)設置する方法のまとめ

■Twitter (ツイートするボタンの設置)

http://twitter.com/goodies/tweetbutton/

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

※属性「data-count」を変更すると表示スタイルが変わるようです。(vertical、horizontal、none)

■Facebook(いいね!ボタンの設置)

http://developers.facebook.com/docs/reference/plugins/like/

<iframe src="http://www.facebook.com/plugins/like.php? app_id=【AppID】&href=【URL】 &send=false &layout=box_count &width=450&show_faces=false &action=like &colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

※属性「layout」を変更すると表示スタイルが変わるようです。(standard、button_count、box_count)
※属性「show_faces」を変更すると顔写真の表示有無を設定できます(true、false)

■Google+1(+1ボタンの設置)

http://www.google.com/webmasters/+1/button/

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script> <g:plusone size="tall"></g:plusone>

※<g:plusone>の属性「size」を変更すると表示サイズが変わります。(属性なし[標準]、small、medium、tall)

>