Facebook Like Button Help Needed

Dev Shed Forums Sponsor:

February 14th, 2013, 02:52 PM

genista

Contributing User

Join Date: Jul 2006

Posts: 210

Time spent in forums: 2 Days 17 h 10 m 52 sec
Reputation Power: 11

Facebook Like Button Help Needed

Hi all,

I want (like so many others) to have my like button 'like' the current page, which is dynamic in PHP. The following code displays the like button, but it does not get the url, it gets the url set in the Application within facebook (the login page for my site in this case). The code starts with the bottom part of the Facebook Javascript SDk before going onto my code:

Code:

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

 <script type="text/javascript">
var sUrl = window.location;
document.getElementById('fb').setAttribute('href', sUrl);
</script>   
<div class="fb-like" id="fb"  data-send="true" data-layout="button_count" data-width="60" data-show-faces="true"></div>

In this code I have returned the data-href element, but I now get an error stating that Facebook needs an absolute url:

Code:

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

 <script type="text/javascript">
var sUrl = window.location;
document.getElementById('fb').setAttribute('href', sUrl);
</script>   
<div class="fb-like" data-href="www.mysite.com" id="fb"  data-send="true" data-layout="button_count" data-width="60" data-show-faces="true"></div>

I have tried adding http:// at the start of the url to no avail so am wondering what everyone else is doing. Is there a fix? Or is there a better solution to my problem?

Thanks,

G

February 14th, 2013, 06:35 PM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation Power: 0

I'm not very familiar with Facebook, and have my own opinions about "Like" buttons

but from the code you've posted and what you've described, it sounds like the issue is here:

javascript Code:

Original - javascript Code
var sUrl = window.location; document.getElementById('fb').setAttribute('href', sUrl);

var sUrl = window.location;
document.getElementById('fb').setAttribute('href', sUrl);

Without knowing more about the way Facebook operates as regards pages, I'm not sure how to approach getting the proper URL with JavaScript.

However, for a quick hack, were you to simply change the sURL variable to your website I wonder if that would do the trick:

javascript Code:

Original - javascript Code
<script type="text/javascript"> var sUrl = "http://www.mysite.com/"; document.getElementById('fb').setAttribute('href', sUrl); </script>

<script type="text/javascript">
  var sUrl = "http://www.mysite.com/";
  document.getElementById('fb').setAttribute('href', sUrl);
</script>

The data-href wouldn't be needed for this hack to work. Let us know how it goes.

- Null

February 16th, 2013, 04:39 PM

genista

Contributing User

Join Date: Jul 2006

Posts: 210

Time spent in forums: 2 Days 17 h 10 m 52 sec
Reputation Power: 11

Thanks, sadly that didnt work. If you have any other ideas that would be great, in the meantime I will get back to the Facebook development notes.

G

February 20th, 2013, 01:47 PM

genista

Contributing User

Join Date: Jul 2006

Posts: 210

Time spent in forums: 2 Days 17 h 10 m 52 sec
Reputation Power: 11

Ok so here is an update, I have tried the following approaches without success. The annoying thing is that in other forum posts these solutions seem to work for the recipient. On another note I use urlencode on the query string if that makes a difference. Any how here are some of the code that I have used to date without success:

PHP

PHP Code:


		
			
<?php $url = basename($_SERVER['REQUEST_URI']);?>

<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

and javascript:

Code:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>

and lastly Facebook's own parser:

Code:

<fb:like></fb:like>

All return the url that I have registered with Facebook - my login page.

Any help would be great.

Thanks,

G

Facebook Like Button Help Needed

Developer Shed Advertisers and Affiliates