I'm reading this documentation:
https://developers.facebook.com/docs/facebook-login/web/
sadly the documentation is confusing. The page has a code-generated button, which is very nice. However, the actual code the page uses is completely different -
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
I don't understand which one I'm meant to use, or how to call a js method on logging in if I use the code generated sample:
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="false"></div>
The code sample calls "onlogin", but it is some sort of weird... facebook thing. Has anyone done login (and, honestly, with facebook's money you'd think they could write documentation! grrr!)
They should both work, they are just different versions of writing the same thing. The latter is the HTML5 compatible version.
And the onlogin attribute works for both; it doesn’t even have to be written as data-onlogin as the rest of the parameters in the HTML5 version. I’m pretty sure Facebook parses that attribute itself (browsers don’t know a native login event), but guess they simply chose that attribute name to have it be kind of consistent with “traditional” HTML event handler attributes such as onclick etc.
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 have icons (custom branded facebook, twitter, pinterest etc.) on a website and I would like it to be easy for visitors to talk about blogposts on these various social media.
To do so, I have created a server-side function that outputs links that look like this:
<a target="_blank" href=http://rest.sharethis.com/share/sharer.php?destination=facebook&url=http%3A%2F%2Fsite.mydevelopmentserver.com&title=postname&pub_key=123456&access_key=123456"/>FACEBOOK LINK</a>
with equivalent links for the other social media links.
I do not load any sharethis scripts or interact with the sharethis api in any other way on my site, and this method seems to be working fine (the jury is still out on analytics)
My questions are:
a. Is there anything wrong with using sharethis in this way?
b.Is there a better way to do this that does not require me to have my access key visible in my links?
I think the answer to my questions are:
a. Yes, there is something wrong with using sharethis in this manner. Your access key will be visible to everyone.
b. Yes, there is a better way to do this. There is no need to access the API directly at all to customize your sharethis buttons. Just insert the normal sharethis script that you can generate here: http://sharethis.com/publishers/get-sharing-tools, then change the buttons' classes to st_[service]_custom (where service is the service you would like to access).
That is, put I put this in my header:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "1234"});</script>
and this in the body:
<span class="st_pinterest_custom">Pinterest</span>
<span class="st_twitter_custom">Twitter</span>
<span class="st_facebook_custom">Facebook</span>
<span class="st_googleplus_custom">Google</span>
<span class="st_stumbleupon_custom">Stumble</span>
Then I just style the buttons using my own CSS.
Works like a charm, thanks sharethis!
Also, if anybody needs general help making things more complicated than they need to be, ask me -- I can do it for you in a jiffy!
I think the answers to my questions are:
a. Yes, there is something wrong with using sharethis in this manner. My access key will be visible to everyone.
b. Yes, there is a better way to do this. There is no need to access the API directly at all to customize your sharethis buttons. Just insert the normal sharethis script that you can generate here: http://sharethis.com/publishers/get-sharing-tools, then change the buttons' classes to st_[service]_custom (where service is the service you would like to access).
That is, put I put this in my header:
stLight.options({publisher: "1234"});
and this in the body:
Pinterest
Twitter
Facebook
Google
Stumble
I'm attempting to add a FB "Like Box" to a website I'm developing. Not too familiar with Facebook apps, but so far I've gone the non-IFRAME route, using the FB SDK script include.
I'm fairly certain I've got almost everything setup correctly. In fact, I see the widget appear when I visit the page UNCACHED (i.e. in FF, I hit CTRL+SHIFT+R to reload all content to avoid loading from cache). Once I revisit the site, or move around within the site by clicking links, the content does not reappear.
I'm wondering if it's an issue with a) the channel.php file, or b) the apps interaction with my use of JQuery. The channel.php file is verbain what is provided by Facebook (using PHP's caching mechanism).
Here's the site currently: http://www.morningfatty.com/demo - It might be easier to list this rather than post several code snippets.
I went to your website and didn't see the like box. I checked the HTML code and it all appeared fine. The div looked like <div data-header="false" data-stream="false" data-border-color="#40ADAD" data-show-faces="true" data-colorscheme="light" data-width="192" data-href="http://www.facebook.com/morningfatty" class="fb-like-box"></div>
I went to https://developers.facebook.com/docs/reference/plugins/like-box/ and tried your link http://www.facebook.com/morningfatty and lo-and-behold the like box didn't display there.
I tried going directly to http://www.facebook.com/morningfatty and it redirected me to http://www.facebook.com/MorningFatty. I noticed the change of case in the name. So I went back and tried http://www.facebook.com/MorningFatty in the like-box and it worked!!.
I believe that you page will work once you update the casing on the url. :)
I implemented facebook comments across a legacy, custom CMS. I used the XFBML implementation. Everything works as expected except when clicking the links back to the article page from a commenter's facebook feed the comment box does not show any comments. The link is of this form:
{Article URL}?fb_comment_id={comment_id_string}
And if I remove the comment parameter and only go to the article url the comment box renders correctly with the comment and all other comments on the article. So, it's some issue with the fb_comment_id parameter. One weird thing about how I had to implement the comments is, because of how the routing on the site works, I could not use server side code to set the the URL parameter in the <fb:comments> object. So I had to use this jquery code in the <head>:
<script>
// assign current page to comments url
$(document).ready(function() {
$('fb\\:comments').each(function(){
$(this).attr('href', window.location);
});
});
</script>
And used this for the actual <fb:comments> code:
<fb:comments href="{site's root URL}" num_posts="8" width="570"></fb:comments>
So, I figure doing this client side may be causing the issue. Not doing this server side is a hard constraint though, and everything else works so I'm hopeful there may be some way to make this work. If making the comment link work correctly is impossible, a reasonable hack would be to rewrite the link in the facebook feed so that it just points to the article url without adding the comment parameter. Any suggestions? Thanks!
NOTE: I've also tried using the html5 comments implementation and there is the same issue.;
Once facebook has rendered the iframe based upon your fb:comments tag, does it have the correct url? I am thinking it does not. You may have to call FB.XFBML.parse() after you inject the complete
Till yesterday everything was working fine.
In my website's head there was
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
and links like
<a name="fb_share" share_url="http://mysite.com/url"></a>
were transformed to facebook share plugins.
But now there is a problem - i can't see count of shares in plugin. I sniffed requests a little and the error is:
fb_sharepro_render({"error_code":104,"error_msg":"Requires valid signature","request_args":[{"key":"v","value":"1.0"}
I did not change anything on website and problem still occurs. Any hints?
Edit (probably an answer):
This bug is described here: http://bugs.developers.facebook.net/show_bug.cgi?id=19471
Facebook team response:
Thanks for the report. We are looking into this.
We recommend to use the like button instead as we are going to deprecate the
share button soon. The like button provides you with the same functionality and
more ...
http://developers.facebook.com/docs/reference/plugins/like/
Also, works solution with request to http://graph.facebook.com/?ids=*.
For example, while issue is not fixed by facebook, you can use a little modified facebook share widget script, it use a graph.facebook.com instead of api.facebook.com/restserver.php.
You have to introduce access_token also as a parameter. Find what facebook says
GET /fql?q=SELECT+uid2+FROM+friend+WHERE+uid1=me()&access_token=...