I'm looking to integrate the "like" button into a website, but I'm a little confused with the information available on the web. I read this article, which was in another stackoverflow article, but have some questions: http://www.saschakimmel.com/2010/05/how-to-capture-clicks-on-the-facebook-like-button/.
I've setup a "Page" already in facebook, and from what I understand in the link above, you need to setup an "App" to get an API key. What I don't understand though is that if I use this API Key, it's going to be pointing to my newly created "App", which has no fan base. How do I link this API Key, (or setup another key through the page admin), so I can have users "like" the real facebook page?
I want to run some javascript functions the moment a user likes the page, but I'm also a little confused on what API functions call, and whether these return a true/false value? I only really want to run these js functions if the user has not already liked the page..
Hope this all makes sense, would love any explanations you have to offer to point me in the right direction.
BUMP
after making a page and registering for it on face book, you will get a link, o trough the process again. Then just paste this link on your web site and you will get the like box. Paste it in a div tag.
You can also make a function in js which calls this like box and on its dependency you can call other js functions also.
//js code
function js()
{
create element div;
}
function other()
{
js();
}
If you just want an like button in your page , go to http://developers.facebook.com/docs/reference/plugins/like/
paste your fb page url in "URL to Like (?)" text box
get the code
paste in the div box of ur web site source code where you want it to appear
Related
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 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.
Basically i'd like to put a like button on the website so that fans of the site can like the websites Facebook page.
The Like button page doesn't give me the code when i click the button, just says "Only verified developers can be added as listed developers of this application. Read www.facebook.com/help/?faq=17580 for details." Is this a common error, or?
EDIT: Using Like box now, but would prefer Like button.
And the like box page gives me the iframe and XFBML codes. Sorry for being a n00b, but how do i add either one onto my site? I've tried Insert > Script and pasted it in there, using all four script types (Javascript, JS 1.1, JS 1.2 and VBScript but they don't show in the preview. Placed the code under the 'back to top' button at the bottom of the page. Not showing up when i look at code view of the online version though?
Hopefully its something really easy and obvious, but any help would be great.
Again, site is designed/updated with Dreamweaver MX 6.0.
I dont have that much experience with Dreamweaver - but implementing the facebook social plugins (eg. Like button) is very simple. All you have to do is copy and paste the XFMBL you generate from this link. Once you paste your URL into the "URL to Like" field and click "get code" you should get the correct code to use...
You place this code wherever you want it to appear - if you want the like button to be in the footer just paste it there...
The code snippet actually loads the facebook javascript sdk and places your like button inside an iframe on your page...
You can not place the like button code inside a different element - if that were possible people could trick you into liking their page by writing some different label on the button - eg. "Back to top" :)
This should be relatively simple to implement. If you are still having dificulties - why not try opening a new HTML file containing only the required HTML tags and the like button code...
Hope this helps!
Good luck!
The error appears because, just like it says in the message, you are not a verified developer.
In order to be a verified Facebook developer, you need a verified Facebook account, with a credit card or a phone number verification.
I'd suggest you verify your account as soon as you can if you plan to use more of Facebook's plugins and apps, since it will give you full access to their developer tools
I created FB application that use iframes, and it's working okay, as it should, BUT I need to check from what page is calling it.
I want different pages to pass different variables to that iframe location.
I already know how to set up it to three levels ( original page, application page, and on tab page, with different display content ), but I need to check from what page it's called.
I am thinking that it can be done in 2 ways:
1 way: Find way to pass specific variable based on page that is using this application as tab, and then redirect it to right location
2 way: Find way to create new application outside facebook ( maybe API or something ) and then enter all those values including: App name, app link that have this variable included, app tab link, using iframe and not FBML...
I will love to use 2. way...
I'm not asking you to show me code, I know that I need to do my job, I'm not asking you to do it for me, I'm just asking for help, for directions from someone who already create something like this, to point me to right direction where can I find way...
Also, please don't tell me to read bunch of stuffs, like FB Documentation or whole book that have all other "not-used-here" stuffs, I need specific part where there is a word about this...
If someone know anything about this, write it here...
Thank you!
The "page" parameter is passed along within the "new" signed_request parameter on (iframe) tabs. You get what you need for "free" ;)
page: A JSON object containing the page
id string, the liked boolean if the
user has liked the page, the admin
boolean if the user is an admin. Only
available if your app is an iframe
loaded in a Page tab.
http://developers.facebook.com/docs/authentication/signed_request/
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.