いいねボタンが出てこない
Facebookボタンを配置したのですが表示されません。
ページ内にFacebookのいいねボタンを下記のサンプルソースのように配置し、
サーバーにUPしましたが、4日経っても表示されません。
https://developers.facebook.com/docs/plugins/like-button
上記のページでいいねボタンを作成しました。
「URL to Like」にいいねボタンを設置したいページのURLを入力(静的URLです)し、
Widthは120を指定、Layoutはbutton_countを選択、Action Typeはlikeを選択、
「Show Friends' Faces」と「Include Share Button」はオフでコードを取得しました。
この取得したコードを、ツイッターのツイートボタンを横並び(ツイッターボタンは左に、いいねボタンは右)に表示されるよう、floatして配置しています。
色々と調べ倒しましたが、表示されない原因がわかりませんでした。
もう少し待てば表示されるものなのでしょうか?
html5でコーディングし、htmlの文字コードはUTF-8で指定しています。
ページ内にいいねボタンがどうしても必要ですので、解決方法をご存知の方がおられましたら、ご教授いただけると大変ありがたいです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fbtest</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="common/css/normalize.css">
<link rel="stylesheet" href="common/css/style.css">
<link rel="stylesheet" href="common/css/style-s.css" media="only screen and (max-width:767px)">
<link rel="stylesheet" href="common/css/style-l.css" media="only screen and (min-width:768px)">
<style type="text/css">
div#social {
clear: both;
text-align:left;
position:absolute;
left: 0;
top:30px;
}
div#tw {
float: left;
width:92px;
}
div#fb {
float: left;
width:120px;
}
div#fb .fb_iframe_widget > span {
vertical-align: baseline !important;
}
</style>
</head>
<body>
<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/sdk.js#xfbml=1&version=v2.0";
js = d.createElement(s); js.id = id; js.async = true;
}(document, 'script', 'facebook-jssdk'));</script>
<div id="social" class="clr">
<div id="tw">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="www.sample.co.jp/site/" data-via="info_lvwellness" data-hashtags="サンプル">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="fb">
<div class="fb-like" data-href="http://www.sample.co.jp/site/sample.html" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
</div>
</body>
</html>
お礼
いじってるうちに、アップすると表示されることに気づきましたが、ローカルでの表示方法ありがとうございます!