website奮闘記

twitterボタンとfacebookボタン


こんなボタンが、最近よく見かけますよね。
サイトや買い物かごの商品ページにつけて、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 ひらおか

返信を残す

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