Blogroll

2013年3月27日水曜日

ウェブサイトにfacebookとTwitter、そしてGoogle+のフォローボタンを埋め込む方法



まずはそれぞれのSNSサービスから、ウィジェットを取得する必要があります。

facebookのLIKE BOXの取得ページ
https://developers.facebook.com/docs/reference/plugins/like-box/

Twitterのフォローボタンの取得ページ
https://twitter.com/about/resources/buttons#follow

Google+ Badgeの取得ページ
https://developers.google.com/+/web/badge/

各取得ページからタグを取得し、HTMLを構成します。
ボタンのカスタマイズは、現状、かなり難しいようです。


>>「いいね!」ボタンと「フォローする」ボタンを設置する



HTMLのサンプル
サンプルのフォローボタンは、http://www.arayama.comしています。


<table width=100% cellpadding=0 cellspacing=0>
<tr><td><a href="http://www.facebook.com/todaytotomorrow"><img src="http://www.hans-huber.com/www/arayama/img/9030-facebook.png" /></a></td><td height=69>

<!-- ▼▼ facebbook like box ▼▼ -->

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftodaytotomorrow&amp;width=230&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:62px;" allowtransparency="true"></iframe>

<!-- ▲▲ facebbook like box ▲▲ -->

</td></tr><tr><td><a href="http://twitter.com/flowergift"><img src="http://www.hans-huber.com/www/arayama/img/9030-twitter.png" /></a></td><td height=69 align=center>

<!-- ▼▼ Twitter Follow button ▼▼ -->

<a href="https://twitter.com/flowergift" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@flowergiftさんをフォロー</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>

<!-- ▲▲ Twitter Follow button ▲▲ -->

</td></tr><tr><td><a href="https://plus.google.com/109132324117925194225"><img src="http://www.hans-huber.com/www/arayama/img/9030-gplus.png" /></a></td><td height=69 align=center>

<!-- ▼▼ Google+ Badge ▼▼ -->

<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>


<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="200" data-height="69" data-href="//plus.google.com/109132324117925194225" data-rel="publisher"></div>

<!-- ▲▲ Google+ Badge ▲▲ -->


</td></tr></table>







AD banner