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

■facebookの「いいね！」ボタンの設置について
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 facebook開発ツール　 http://developers.facebook.com/docs/reference/plugins/like-box/ にアクセスして、必要な情報を入力して作成します。
くわしくは　Facebookいいねボタン設置 で紹介されています。

いいねボタン生成ページにてコードを取得して、任意の場所に貼り付けます。
JavaScript SDKとプラグインタグは同じ場所でも稼動します。

下にサンプルHTMLを記述しておきます。このHTMLをコピペするのではなく、コードは必ず開発者ツールページにて取得してください。

【追記】Show header にはチェックを入れること


///////////////// sample HTML ////////////////////////　


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like-box" data-href="http://www.facebook.com/pages/ ****** " data-width="250" data-show-faces="false" data-stream="false" data-header="true"></div>

//////////////////////////////////////////////////////　
******には対象のホームページURLが入ります
data-width="250"の数値を変更すれば、幅が変更できます





■twitterの「フォローする」ボタンの設置について
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
twitterの素材提供ページ　https://twitter.com/about/resources/buttons#follow　にてフォローボタンを作成します。ボタンの選択は”フォロー”を選びます。　

【追記】ユーザ名を表示、ボタン大にはチェックを入れること
@0102030405comをフォロー
///////////////// sample HTML ////////////////////////　

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

//////////////////////////////////////////////////////　
******には対象のホームページURLが入ります
++++++にはユーザ名が入ります


■HTML/Javascriptウィジェットに入力する見本コード
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

サイドバーにウィジェットを追加すると幅が足りません。
そこでmain-wrapperに追加します。

@0102030405comをフォロー

///////////////// sample HTML ////////////////////////　

<table width=540 cellpadding=0 cellspacing=0>
<tr><td>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/＊＊＊＊＊" data-width="300" data-show-faces="false" data-stream="false" data-header="true"></div>
</td>
<td>
<a href="https://twitter.com/＊＊＊＊＊" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@＋＋＋＋＋をフォロー</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>
</td>
</tr></table>

//////////////////////////////////////////////////////　
太字の部分は変更箇所になります




Side-bar用（幅200px）は下です。

@canadian_vintをフォロー

facebookウィジェットの高さが足りない場合は？
data-height="75"　の部分で高さを調整します。


///////////////// sample HTML ////////////////////////　



<table width=200><tr><td align=center>
<table width=195 cellpadding=0 cellspacing=0>
<tr><td>
<a href="https://twitter.com/ ＊＊＊＊＊ " class="twitter-follow-button" data-show-count="false" data-lang="ja">@ ＋＋＋＋＋ をフォロー</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>
</td></tr>
<tr><td><div id="fb-root"></div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/ ＊＊＊＊＊ " data-height="75" data-width="195" data-show-faces="false" data-stream="false" data-header="true"></div>
</td></tr></table></td></tr></table>

//////////////////////////////////////////////////////　

太字の部分は変更箇所になります