0

I've spent countless hours for the past couple of days trying to get this tiny thing to work. It's just so frustrating wasting hours on such a small task. To sum up, I have a Facebook page and an HTML page, and i'd like to include a Like button on my HTML page. I've gone through the process here at https://developers.facebook.com/docs/plugins/like-button

and I've copy/pasted the code in my empty HTML page. Whenever i run it, it shows an empty page with no buttons whatsoever. I've tried many tests, and the output is always empty. When i run the HTML, this is the address that's being processed:

file:///C:/Users/toshiba/Desktop/test%20like.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/en_US/sdk.js#xfbml=1&version=v2.5&appId=1521075254860950";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-like" data-href="https://www.facebook.com/CGD2016/" data-width="100px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

I have also tried Facebook's "Full Code Example" and the result was the same, I feel it has something to do with the Javascript SDK, but i cant quiet get my hands on the problem. I'll keep trying other methods, but please, if you understand why this is happening I would greatly appreciate your help.

<!-- You can use open graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url"           content="https://www.facebook.com/CGD2016/" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="FB Like test" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />

<!-- Load Facebook SDK for JavaScript -->
<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/en_US/sdk.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your like button code -->
<div class="fb-like" 
    data-href="https://www.facebook.com/CGD2016/" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
</div>

I've tried using Chrome and IE, both with empty results.. thanks

saif_youssef
  • 54
  • 7
  • 1
    Could you try with `js.src="https://...` or `http://`? I suspect that when the URL is resolved, it applies the same protocol that you're using; in this case, it would load `file://connect.facebook.net/...`, which is invalid. – Pietro Saccardi Mar 21 '16 at 11:19
  • have you check with console – Santosh Ram Kunjir Mar 21 '16 at 11:20
  • i tried both js.src="http://connect.facebook and https:// still i get an empty page.. also, irrelevant question for future reference.. how do u tag your text as code in your comment :) i like to keep things tidy and clear – saif_youssef Mar 21 '16 at 11:31
  • @saif_youssef http://stackoverflow.com/editing-help#comment-formatting -- for further tests I suggest you keep the `http` protocol explicit (if it's not the issue now, it can be when you find the real problem). – Pietro Saccardi Mar 21 '16 at 11:45
  • 1
    @saif_youssef I just found this: http://stackoverflow.com/questions/7595989/how-do-i-test-the-facebook-like-button-on-localhost - it seems that you have to upload the page to your domain or access it via tunnel. – Pietro Saccardi Mar 21 '16 at 11:46
  • @PietroSaccardi Thank you so much for researching this issue, i really appreciate it. I came across that link you provided earlier today, but wasn't sure if that was the fix.. I'll give it a try! Once again, Thanks for helping :) – saif_youssef Mar 21 '16 at 12:14

0 Answers0