- 締切済み
いいねボタンが出てこない
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>
- penshihapirai
- お礼率100% (1/1)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
CSS・Scriptは、外部（別ファイル）から、読み込んだ方がソースがきれいです。 Include the JavaScript SDK on your page once, ideally right after the opening <body> tag. と、書かれていますが？・・・ <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> などの、scriptは<head>～</head>に書く、必要があるのでは？・・・ その後、<body>～<body>の中に記述すればいいのでは？・・・ 下記のように記述するばあいは、scriptは、不要。 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> また、div要素でくくられているので、このままでは、縦並びになるでしょう。 横並びにしたいのであれば、<div class="sns"><span clsaa="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></span><span class="twitter"></span></div> のような記述になります。
お礼
お礼が大変遅くなり、申し訳ありませんでした。 ご回答ありがとうございました。 今回は他の方法で解決致しました。