My FaceBook Page is setup so that users who have not "Liked" the page yet (and attempt to view the page) are presented with the content of a particular tab instead of the default "wall" view.
The tab that these users arrive at contains an application I made. It is a simple application that lists information about the business.
The application is using the "I Frame" render method (in the application's "Canvas" settings).
My goal is to add a FaceBook "Like Button" or "Like Box" inside my application.
The purpose of this is to write a message that encourages visitors to "Like" the FaceBook Page (not the application).
I've tried the FaceBook code generators for Like Buttons and Like Boxes, but it does not work. When I view my application in FaceBook, there is "nothing" in the location where I added the code.
Having a "Like" button inside of an application seems like something that many FaceBook page owners would want. Is there any way to accomplish this?
First of all, make sure you page is loaded in html mode instead of FBML.
1, Load the FB JS
<script src="http://connect.facebook.net/en_US/all.js#appId=YOURAPPID&xfbml=1"></script>
2, Init the FB (sometimes it doesn't work without this)
<script>
FB.init({
appId:"YOURAPPID",
xfbml:true,
status:true,
cookie:true,
});
</script>
3, Put the like button where do you want
<fb:like href="http://www.facebook.com/YOUR_FACEBOOK_PAGE" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
The like will appear, but will not make page refresh, so you have to take care the flow yourself.
Apparently like buttons aren't supported in the current implementation of FBML, which is the only language you can use inside the "tabs" on a facebook canvas page.
You may notice that a number of professionally done sites put a big arrow pointing up and then a "click the like button" text, without actually using a like button. This is why they do that.
Until facebook implements XFBML inside tabs, it looks like any XFBML only tags (such as fb:like) can only be used on your personal website. I think they do this for security reasons, although it does seem a little ridiculous that there are features you can use on your own page that facebook doesn't actually support on -their- pages.
The only workaround I have found is to include fb:comments tag in your app, which is an FBML tag that puts up a comments box AND a like button.
In order to get a Like button, go to http://developers.facebook.com/docs/reference/plugins/like, fill out the appropriate information and press "Get Code". This will open up a modal window with the necessary code. Copy that code into your program, and you're done.
Related
I had a like box in my canvas page and it always worked perfectly fine until this month. It decided not to work anymore.
Screenshot:
This is the piece of code I was using:
<fb:like-box href="https://www.facebook.com/apps/application.php?id=129443657150865" width="260" show_faces="false" border_color="" stream="false" header="true"></fb:like-box>
And a flash game would get whether or not the user pressed like. But now, it gets nothing anymore and the like button won't even show up. What just happened this month?
edit: Meanwhile, I replaced the like button with the one from the game page. It's not the one I wanted, but better than nothing.
The Like button does not work with your App Profile Page since Facebook removed all App Fan Pages. Instead, you have to create a new Fan Page from the Advanced tab of your App Settings (look for App Page setting with a Create Facebook Page button).
See: http://developers.facebook.com/blog/post/611/
Every post on here seems to be directed to Advanced Users, I just want to know simply how to place a "Like Button" on my Facebook page? Where do I put the HTML code thats generated for me?
Use lint, place your link there and at the bottom you'll have iFrame code. You'll place it to your website (anywhere) and you're done
I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
I'm having a problem with the good ol' facebook like button on my site. I've implemented it all, I can click on "like" and it appears on my wall (and on the site the count pops up to say "1"), but the count never updates. If I refresh the page it just shows the "like" button again (no count), and if I log in to facebook with a new account and click on like again, it just says "1" again.
An example page on my site:
http://www.makemeacocktail.com/recipe/6741/
The fql readout (watch the apostrophe escape here, copy and paste dont just click):
https://api.facebook.com/method/fql.query?query=select%20total_count,like_count,comment_count,share_count,click_count%20from%20link_stat%20where%20url='http://www.makemeacocktail.com/recipe/6741/'&format=json
The FB XML that is being used:
<fb:like href="http://www.makemeacocktail.com/recipe/6741/" send="false" layout="button_count" width="50" show_faces="false" font="arial"></fb:like>
Other facebook thoughts etc:
I've got the facebook open graph meta data in the head
The js call to facebook happens as the last thing on my page, after the FBML:
<script src="http://connect.facebook.net/en_US/all.js#appId=187430904631019&xfbml=1"></script>
<script>
FB.init({
appId : '187430904631019',
status : true,
cookie : true,
xfbml : true
});
</script>
I've also got the facebook page like at the bottom of my page:
<div id="fb-root"></div><fb:like-box href="http://www.facebook.com/makemeacocktail" width="292" show_faces="false" stream="false" header="true"></fb:like-box>
Which is where the fb-root is.
My only thought it something about fb-root not being next to the facebook like button earlier up, and a conflict of two facebook like buttons or something? I;m only calling the facebook js once though, right at the bottom.
Any thoughts help etc much appreciated. It is weird because it it going to my wall, but the button on the site isn't listening!
Thanks a lot
Got this from the request your like button sends to facebook:
App ID does not match domain","full":"The app ID specified
within the \"fb:app_id\" meta tag is
not allowed on this domain. You must
setup the Connect Base Domains for
your app to be a prefix of
http:\/\/www.makemeacocktail.com\/recipe\/6741\/
So, you need to change the base domain for your application in the developers application to makemeacocktail.com. If that is not the problem try removing the fb:app_id open graph tag, or use the fb:admins tag instead. Good luck, hope this helps.
I'm changing from using Static FBML to dynamic pages. The only XFBML tag I'm using is fb:like.
Anyway, it renders fine on my test server, and then again on facebook under the app's URL.
I want to put it on the tab of a Fan page I manage.. how can I get it on there?
IFrames aren't available in tabs yet... you need to use FBML and fb:like is not a valid FBML tag.
They wanted to change this because they are beginning to deprecate FBML. But you should try the iFrame hack instead.
I'm not able to find it on google right now but it works like this:
You create a fb:js-string with the fb:iframe tag in it and then load it in a div as soon as the user clicks something.