こんなボタンが、最近よく見かけますよね。
サイトや買い物かごの商品ページにつけて、twitterやfacebookなどのソーシャルネットワークを使って、お友達と情報を共有していていただくためのボタンです。
ようやく、僕たちも必要性を感じはじめ（おっそ！）勉強してみました。
意外に設定は簡単で、それぞれtwitterやfacebookのソースコードというものを、下記ページから取得して、貼り付けるだけ。
■twitter
http://twitter.com/about/resources/buttons#tweet
■facebook
http://developers.facebook.com/docs/reference/plugins/like/
ただ、これからが大変でした。
ボタンを並べようとすると、とんちんかんな場所に張り付いてしまったり、きちっと整列してくれないんです。
ようやくグーグル先生に「twitter facebook ボタン 並べる」って教えていただき、並べる事ができました。
CSS/*——————————————————–Social button——————————————————–*/ul.social li{list-style-type: none;float: left !important;margin-bottom: 15px;}li.facebook {width: 200px;}li.twitter {width: 120px;}li.hatena-bookmark {width: 80px;}li.google-plusone {width: 80px;}HTML<!– Social button –><ul class=”social”><li class=”facebook”><div id=”fb-root”></div><div class=”fb-like” data-href=”https://youngvenus.jp/” data-send=”false” data-layout=”button_count” data-show-faces=”false”></div></li><li class=”twitter”><a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”https://youngvenus.jp/” data-text=”ちょっと試験的にツイートボタンを設置してみました。” data-via=”youngvenus” data-lang=”ja” data-hashtags=”yvnow”>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script></li></ul><!–/ Social button –>
こんなふうにすると、お行儀良く並んでくれました。
また、facebookの「いいねボタン」の設定も、調べてみると奥が深く、Open Graph Tags（GPTタグ）というものを設定すると、画像などを指定できるようです。
htmlタグにOGP用の記述を追記。「xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”」METAタグを追加。<meta property=”og:title” content=”ページタイトル” /><meta property=”og:type” content=”ページのタイプ” /><meta property=”og:url” content=”ページのURL” /><meta property=”og:image” content=”画像のURL” /><meta property=”og:site_name” content=”サイト名” /><meta property=”fb:admins” content=”USER_ID” /><meta property=”og:locale” content=”ja_JP” />
これで完成！
wordpressでもEC-CUBEでもうまくボタンの設置ができたのに、なぜかこのMovable Type version 4.25ではうまくいきませんでした(T_T)
by ひらおか