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.
Related
Here in Germany privacy rules (Datenschutz) are really strict. Chances are high to get a cease and desist letter (Abmahnung) from a competitor when I put the regular facebook like button on my webpage. Since the facebook like button tracks the individual visitor, even when he doesn't use the Like Button.
"Two click solutions" got invented to overcome that situation.
However, they don't show the like count of the URL to be liked when disabled. (See screenshot: "21" only shows up in activated state) I know that it is possible to retrieve this like count through open graph api.
Is there already a solution that features a "two click like button" including count in disabled state? Maybe a wordpress plugin?
Following plugin does the job. However its still beta and it comes without any icons (because of trademark issues) So, only powerusers will recognize it as facebook like button.
http://www.selbstaendig-im-netz.de/2013/02/14/social-web/sin-socialshare-plugin-3-betaversion/ (only German, there is a download of the plugin zip file)
The plugin is not yet in wordpress org plugindirectory
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'm operating a website within the EU and nowadays there's no way without those social buttons all around (according to "them" "up there").
Recently there's a concern about the legality of this in the EU, notably the collection of user information sent to the US servers without explicit user consent.
There was a German report on golem.de, along with advice from a lawyer (sorry, German only) that it would be sufficient if the integrated like button would not automatically trigger an interaction with the US server per se, but only with user consent, i.e. manual interaction such as the click.
We currently use the official method of inclusion along with subscribing to the edge.create event to get some sense of its usage. But unfortunately this works by loading an iframe with content from Facebook, thus immediately sending data about the user without his consent, without him even clicking on it. I seek a way to avoid that.
Idea: Show a local image with a local href which starts loading the Facebook stuff only when user actually clicks on it.
The problems as I see them:
The user clicks on my DOM element and now I'd need to act like the real FB button was pressed, but how can I do that, since the real button isn't there? If I load the button, the user would see a second one, need to click again, etc. I'd need to load if off screen, fake the click, etc. Complicated and confusing.
The counter next to the likes would be missing. I'd need to find a way to get that information for the current URL (e.g. server side), smartly cache that data, and still be able to show that to the user. I have no idea where I would get that data.
Being within EU or not, law or not, since I started only recently looking into this (because my job demanded it), it got me the creeps when I realized how it really works. I'm a web paranoid, can't believe I'm alone.
Any ideas how to tackle the above problems?
For me, the ultimate solution is how the German news portal heise.de implemented it.
Unfortunately it's all in German, but their solution is to show a dummy picture before instead and allow the user to selectively allow it for the whole site. See the article in German or Google translation to English.
This created quite some user interested (German article, Google translation to English) and has already called Facebook (presumably from Germany) on the plan, as they wrote in their article, that it is against their policy to use their button in they way they did.
Update:
And now it hit Slashdot: Heise's 'Two Clicks For More Privacy' vs. Facebook
The edge.create callback doesn't include the user ID; it just notifies you of which Like button was clicked. Unless the user has given you their details some other way, there's no way to determine from Facebook who the user is from either the presence of a Like button or from the user Clicking on it.
Facebook's FAQ item about what information is collected by Facebook when users view Like buttons but don't interact with them is here: https://www.facebook.com/help/?faq=186325668085084
To answer your specific questions:
I'm not sure how to do this without it being a jarring user experience. Effectively, you're describing a solution where you want to offer Facebook Like functionality, but make the user click something first saying 'I want to see the Facebook Like buttons'
You can access the current Like count for any URL or object in the Graph API at https://graph.facebook.com/, for example, a call to https://graph.facebook.com/facebook returns the following information (in JSON format):
{
"id": "20531316728",
"name": "Facebook",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/174597_20531316728_2866555_s.jpg",
"link": "https://www.facebook.com/facebook",
"likes": 51545712,
"category": "Product/service",
"website": "http://www.facebook.com/\n",
"username": "facebook",
[...]
the likes field there isn't exactly the number which would be displayed on a Like button, but it's a good number to start from.
(The actual number on the Like button also includes other statistics, as mentioned on https://developers.facebook.com/docs/reference/plugins/like/ )
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