When going to the set up pages for all the Social Plugins, they now provide example code using an APP ID.
http://developers.facebook.com/docs/plugins/
Is an APP ID now required for the Like Button and other plugins? What happens if an APP ID is not included when using the plugins?
I've checked the Facebook developer blog and read about the Like Button Migration. I haven't been able to find a straight answer for this either there or in the FB Like Reference.
Notice:
This is an old dated information, the official facebook's behaviors are changed.
Simply, the answer is No, just look at the following official Facebook resource.
Notice: To do it without need to the app id, you have to visit the above page when you are signed out from Facebook. Look at the following screen shot.
As semsem said, the simple answer is "no it is not required"... there are ways to get around having an appId associated with the "like" button. Here's my experience working with this. I'm not a Facebook or Open Graph expert, so YMMV.
Why we avoided using the appId on the button:
We're providing an service where we have one website (the engine, as it were) that provides a service distributing online courses to students (customers). Instructors (also customers) who what to use our service to disseminate courses to students can brand the site how they wish, and map their domain to their section of our website that serves those course(s).
As a simplified example: we serve from http://courses.example.com/instructor_name, but we want students to access the content through http://www.instructors-domain.com/. Any courses would be sub-directories off the base URL.
Associating the "like" button with our Facebook App disallows any cross domain shenanigans. While there are valid reasons for doing so, it doesn't work for where we're at in our company and product evolution. So we needed to find a workaround.
We wanted to allow folks to "like" a course, have the "story" point to the appropriate places on the net, as well as get some customization (e.g. "NAME likes an online course on FBAppName"). We basically achieved this. We lost some functionality which we deemed acceptable at this point in our evolution.
The short of it
I used the iframe version of the Facebook "like" button as dictated by the appropriate Facebook developer's page (for the link see semesm's answer for the link, I got no rep). I took their code snippet and manually removed the appId query string in the iframe's src.
In the "liked" page itself (which was the same page that had the "like" button) I used the Open Graph meta tags including specifying the appId. (These tags were specified: fb:app_id, og:type, og:url, og:site_name, og:title, og:description, og:image.)
The og:type was our custom type of the form 'namespace:app_custom_object_name'.
A failed approach
My first attempt was to use what I understand as the preferred method, the "HTML5" tab in the "Get Code" section of the developer's "like-button" page. I tried their method stripping the appId from the appropriate places. This method proved ineffectual.
If the domain doesn't match that in the Facebook App, there will be no "like" button.
If the domain does match, the "like" button will appear. However, it takes 3 clicks to actually "like" something. The first click changes the "thumbs-up Like" icon to a normal anchor with one word that didn't make obvious sense (I forgot what the word was). The second click will brings up the login/authorization window for using our app. The third actually bring up the modern fancy "like" box where you can type in a comment. I didn't find a way around this behavior.
Note that when I specified the appId in this approach on the appropriate domain, it worked as one would expect (though inconsistent with our desired behavior).
I did not try the other two options in the "Get Code" section of the "like-button" page.
Informed speculation and rumor
In my research around this, my overall impression is that requiring an appId is the way of the future for Facebook. Who knows if the old way will be depreciated, probably never, though I didn't find anything in the docs talking about this "legacy" behavior. This makes sense to me with their newer offerings and the advanced tracking that becomes available with this method.
I've seen suggestions that the "likes" used in this manner are akin to second-class citizens... treated as inferior in some respects. In my own experimentation I found the behavior of the fully specified appId (in the "like" button itself) to be different and more accessible and predictable (in terms of Open Graph queries and visibility on my limited Facebook tests) than the partially specified appId. (Again, I've found no solid documentation on this, and did not endeavor to full grok the differences.)
May this info help someone else along. Good luck!
So, I just tried the sємsєм method, as comments say: Facebook want you to login to get the code, and if you have an app, you have to choose one.
But if you don't, it gives you a code without any app reference.
So when you get a code – no matter any app you choose –, you just need to remove the appId parameter in the .js URL (&appId=##############), and you got (for the latest HTML5 code, 6th line):
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
The code for the div element does not change.
I simply use the URL code inside an iframe tag without an appID and it seams to work,
here is an example:
<iframe src="http://www.facebook.com/plugins/like.php?href=<%=request.original_url%>&width&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=" frameBorder="0" width="150" height="25">
</iframe>
According to Facebook's Social Plugins FAQ
Web: If you are using Social Plugins on the web, you do not need to create a Facebook app for integrating a Social Plugin.
iOS/Android: If you are using Social Plugins within a iOS or Android app, you need to create a Facebook app and tie it to your app identifier.
It seems that the official answer is that they are only required for iOS/Android.
I cant figure this one out, i have built a site with an e commerce system and i want visitors to be able to like an individual product and thus that product be added to their feed.
I have added all the open graph code to the relevant place, but when someone clicks "Like" is shares a default thing rather than the perticular product. this is the one i have been using for an example
https://pinnaclesupplement.co.uk/index.php/shop/168/10/weight-gainers/serious-mass-2-72kg-detail
so I tried using the facebook debugger to see if i could figure it out, but thats is showing the correct info and exactly what i want to show up on peoples feeds! here is a link for that.
https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fpinnaclesupplement.co.uk%2Findex.php%2Fshop%2F168%2F10%2Fweight-gainers%2Fserious-mass-2-72kg-detail
You have your Like button set up to point to http://www.pinnaclesupplement.co.uk – so when people klick like, they only get the “default thing”, your basic site’s description.
If you want customers to like a specific product page’s URL – then you should point the href parameter of the Like button there.
I will try to explain a bit the context for my problem.
Context:
A while ago I started working on Facebook application. One of the requirements is to be included in a Facebook page as a tab. This application will contain on a page a send button in order to be able to make it more engaging with specific people, users of the application would choose on their own. The reason behind this is because the Facebook page containing the application is related to alcohol, and "liking" the application will get more audition and potential children. Another reason for using send button rather then other similar options from Facebook (like send dialog etc.) is because in Facebook documentation was stated that send button works on mobile devices and other options don't.
Problem:
My problem is related to the send button. What I need is to be able to completely configure the send button: url, image, title, description. I have research the open graph tags in order to be able to do this. Everything works fine if the page I want to be sent with the message is a website OUTSIDE Facebook. Once I started to use the url of a Facebook page (let's call it www.facebook.com/mycustompage), then the crawler takes the images, title, description from facebook.com ignoring the actual page and the produced message is not what I want.
I have searched a lot to better understand this limitation and could not find anything relevant.
The only article I could find as a potential solution was (and even this I had trouble finding):
Send button returning error codes, like button works fine
The above discussion is a workaround which I have already put in place but is not 100% what I want. The described workaround is about putting in the send button:
<div class="fb-send" data-href="http://www.mycustomdomain.com/og"></div>
a page that sniffs the user agent. In case the user agent is Facebook crawler to serve an html empty page just with the open graph tags, otherwise redirect to the desired URL - which in our case is the facebook page www.facebook.com/mycustompage.
The message produced contains:
the title which is a link to www.mycustomdomain.com/og which when
clicked opens a page in a new tab with the address
www.facebook.com/mycustompage - this is relatively ok
under the title I have a "sub-title" readonly text containing the domain of the link: www.mycustomdomain.com - THIS IS NOT OK since I don't want to share where I have hosted the application.
the image and the desired description - this is ok.
Conclusion:
What I want to know if there is a better way to do this rather than this workaround.
If not I would like to know how I can hide for the produced message the "sub-title" so that the hosted domain is not visible.
I am usign the version of based on the <fb:like > tag. This renders a small facbook logo which implements the actual "like" operation, but also includes a large "signup to see what your friends like", or the number of likes when you are logged in, etc. It is pretty clear from what I have read that this is the form facebook wants you to use, but it makes the button to wide for my layout. The point is that I see other versions on websites all over, in particular "the weather channel" has one that includes only the logo with some text such as "like us" next to it. "Chicago Tribune" has one that says "recomend" with a very small like count next to it. I have not been able to determine what these link to or what script they invoke so that I can copy them. Can anyone help ?
when you get the code of the like button from facebook you can play with the options and get different results: http://developers.facebook.com/docs/reference/plugins/like/.
obviously it's limited to how facebook wants it to look like.
it is possible to change the look with css, but that's not wise since it's against their policy and you'd have to keep track with their changes.
Okay so for this page:
http://www.facebook.com/ESPN?sk=app_224097940938597
Which appears on the left hand bar between ESPN Fanwhich and ESPN Live Chat.
That isn't a canvas but it isn't a static page that I can gather. I found this tutorial: http://www.kimwoodbridge.com/how-to-add-a-custom-tab-to-a-facebook-fan-page/
But that is creating static content.
What I'm wondering is how I can create a dynamic page within a tab?
To create a "dynamic" page within a tab is pretty easy. Install the Developer's App and create a new application. There are tons of posts all over google about creating new Facebook apps, so you should be able to find those pretty easily.
After you create a new application, you set up the Tab information for it under "Facebook Integration."
The way tabs work is they create an iFrame in the Facebook canvas that loads a page from your webserver. You can do whatever you want within that iframe to make a dynamic page. Also, since it's an iframe, you can have links that go all over the place and build a whole mini-site which works inside the Facebook canvas.
Basically, you do the same thing you would normally do to create a dynamic page/site, and set up a Facebook application that points to it. There are a few caveats to building Facebook applications, but they're hard to enumerate without specific scenarios. The biggest one (and it's well documented) is that the size of a tab is 520px wide, so whatever you build has to fit within that width. The length can be whatever you want, Facebook has APIs in place that let you automatically resize the iframe as needed.
Good luck, and welcome to Facebook programming. Prepare to rip your hair out, because everything changes every 4-6 weeks :x