Facebook "like" button - facebook

My facebook like button loads really slow, so as a solution I read this;
http://developers.facebook.com/docs/reference/javascript/
The only part I am confused about are these two lines;
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
I am unsure what would go in the above.
Could someone enlighten me? Thank you .
Edit: This is how my code looks like (for facebook like button), and I know it isn't right..
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

I'm not quite sure you need this.
For your like button you should be using https://developers.facebook.com/docs/reference/plugins/like/.
The FB JavaScript SDK is used when you're writing applications that would relay on data they receive from the Facebook API. In your case you're only using a "Like button". That doesn't depend on any data thus you don't need it.

Channel File
The channel file addresses some issues with cross domain communication in certain browsers. The contents of the channel.html file can be just a single line:
<script src="//connect.facebook.net/en_US/all.js"></script>
It is important for the channel file to be cached for as long as possible. When serving this file, you must send valid Expires headers with a long expiration period. This will ensure the channel file is cached by the browser which is important for a smooth user experience. Without proper caching, cross domain communication will become very slow and users will suffer a severely degraded experience. A simple way to do this in PHP is:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
The channelUrl parameter is optional, but recommended. Providing a channel file can help address three specific known issues. First, pages that include code to communicate across frames may cause Social Plugins to show up as blank without a channelUrl. Second, if no channelUrl is provided and a page includes auto-playing audio or video, the user may hear two streams of audio because the page has been loaded a second time in the background for cross domain communication. Third, a channel file will prevent inclusion of extra hits in your server-side logs. If you do not specify a channelUrl, you can remove page views containing fb_xd_bust or fb_xd_fragment parameters from your logs to ensure proper counts.
The channelUrl must be a fully qualified URL matching the page on which you include the SDK. In other words, the channel file domain must include www if your site is served using www, and if you modify document.domain on your page you must make the same document.domain change in the channel.html file as well. The protocols must also match. If your page is served over https, your channelUrl must also be https. Remember to use the matching protocol for the script src as well. The sample code above uses protocol-relative URLs which should handle most https cases properly.
App Id
This is your Facebook application ID. Go to https://developers.facebook.com/apps and select the application you setup. If you didn't setup an application, then read: http://developers.facebook.com/docs/guides/canvas/

The page you linked to is for the Javascript SDK, which is probably not what you want, unless you want to do more than just plop a "Like" button on your page. To use the SDK, you have to have a Facebook app and add some code to your website, which is where you'll get the App ID.
The "Like" button documentation is here, and there's not a whole lot you can do to get it to load faster if it's Facebook taking a while to load the page, unless you want to add a full-fledged app and maybe use that to "Like" pages for the user, but I'm not sure if that's even possible. Pull up Firebug or Chrome Dev Tools and see what's taking the longest, but it's probably just on Facebook's end.

Related

How do I create a custom Facebook share dialog box passing parameters?

I've seen a few posts here and around the interwebs explaining how to create a custom Facebook share dialog box for my website.
But I have found a few differences from the average situation to mine:
1- I want a custom area in my page to open and close when people click on a button (the share button)
2- I want share the content in a lightbox, not the page's content. For example, we have a list of products, each product will open in a lightbox. I want to share information about this product that is now open in a lightbox
I saw someone talking about the Javascript SDK, but it the installation guide it tells me to set the APP_ID, but don't have any App create for my website. Do I have to create one to use this SDK?
I also found this pattern
http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg
If I copy and paste this to the address bar it works. but the user is redirected to a new page. that is not nice.
and I tried this with the pattern said above, but couldnt make it work
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
It doesn't accept the parameters I am trying to pass.
Do any of you know how to solve this problem? Will it be by changing the 'content' of metatags? What are your solutions?
#EDIT
Just answered with the solution I used
#EDIT 2
Updated with v2.2
This is an old question, but here is what works for me:
window.open(
'http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg',
'facebook-share-dialog',
'width=626,height=436'
);
basically all I had to do was remove the /sharer/ from the facebook url. I am guessing it is a typo in the documentation.
This is what I did to solve the problem in my website:
First I added the tools Facebook provides me:
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR APP ID GOES HERE', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I created a function shareOnFacebook that opens the sharer and the button that will call this function
var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page
function shareOnFacebook(){
FB.ui({
method: 'feed',
name: globalFacebookShareObject.name,
link: globalFacebookShareObject.link,
caption: 'R$ '+globalFacebookShareObject.caption,
picture: globalFacebookShareObject.picture,
description: globalFacebookShareObject.description
}, function(response) {
if(response && response.post_id){}
else{}
});
}
<button onclick='shareOnFacebook()'>Share it!</button>
#edit at 10/01/2015
Still working for v2.2
Refere to Feed method to understand how to create the share dialog (I am using the feed method that seems to be more flexible)
And to Quickstart
To understand how to import the Javascript SDK to your page
December 2017: Custom object sharing is being deprecated. Your best bet from now on is to create another page for that object and have the respective meta tags facebook looks for in there. More info here: developers.facebook.com/docs/sharing/reference/share-dialog

Facebook like button https issue: protocol mismatch from http and https

I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.

Application Error while loading the facebook SDK

Code on my web page:
<body class="popup">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '476947702378530', // App ID from the app dashboard
channelUrl : '//www.majorforms.com/fb_channel.php?_lang_id=1',// Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After loading that page with a browser, I get this error in firebug console:
Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.
I don't really understand. I do not have a real app, I just used the identifier of a facebook (company) account. I do not want to create a new facebook app, I just want to use credentials of a specific facebook account. How do I do that?
I'm not hundred percent sure but you need to create an app to use the facebook sdk because in the FB.init method it obviously asks for the Facebook App Id.
Creating a Facebook App doesn't necessarily mean that you actually have an app on facebook, the app configuration screen on Facebook Developers page has a specific section for "Website With Facebook Login" , so I think thats the way you should go.
I found I was getting this error when testing my application because I was signed into Facebook as a test account user. When I tried to access the live environment it would generate that error as it was already authenticated to the developer user. The error message is kind of generic and doesn't really spell out the issue in black and white.

FB.init(...) error: "Given URL is not allowed by the Application configuration."

I'm trying to follow the tutorial here. But when I call FB.init(...) with what appears to be valid and correct parameters I get the error message: "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains." I have searched (1 2) for this error, but everyone else seems to be having trouble simply setting the Site URL for their Facebook Application configuration. I'm 99% certain I have set this correctly - but obviously I'm doing something wrong.
Here is my code that is causing problems. I have replaced some of the info with "XXX" and "YYY" for privacy reasons.
<html>
<body>
<h1>Facebook</h1>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'XXX', // App ID
channelUrl : '//YYY.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};//window.fbAsyncInit()
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all/debug.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
Notice that I had to change the js.src parameter near the bottom of the code from the example given in the tutorial. I doubt this is causing my specific problem, but casts some concern on the quality of the code in the tutorial. (I hate it when tutorial code doesn't work - what's the point?)
You can see in the code above I have replaced the root of my domain name to "YYY". Keeping with this simple replacement here are some of the values from my Facebook Application configuration:
App ID: "XXX"
Display Name: "[blah blah blah]"
Namespace: "YYY"
App Domains: "YYY.com"
Sandbox Mode: "Enabled"
Canvas Page: "http://apps.facebook.com/YYY"
Canvas URL: "http://YYY.com/canvas/"
I'm not sure what other detail you may need to help me with this. All of the URL's listed are functional. Thanks for any help!
Notice that I had to change the js.src parameter near the bottom of the code from the example given in the tutorial.
Why? Are you testing by just calling your page in the browser from the file system, and not over HTTP via a local web server?
If the latter is the case, then you have no “domain” that Facebook could verify your request origin against. Set up a local web server, call your document via it, and try again,

Getting facebook authentication running within the MeteorJS framework?

I'm starting out my little quest into the world of the Meteor framework and I thought it'd be fun to do something a little bit facebooky with it.
step one was to follow the create an app tutorial in meteor then add the FB code to the template as found here: https://developers.facebook.com/docs/opengraph/tutorial/#authenticate
Sadly it doesn't seem to work on the page at all. In fact, I've just realized that if I add something like alert('foo'); to my meteor page it doesn't execute. Interesting.
So Metor, despite being completely amazing doesn't work like I expect it to... (shock, horror!).
How do I execute client side JS in this framework? (specifcially with the hope of creating a facebook JS object on the page?)
Thanks!
UPDATE (Jan 2013): Meteor released 0.5.0 which has built in authentication and facebook login support.
Documentation is here: http://docs.meteor.com/#accountsui
Essentially you run some commands in the shell
meteor add accounts-password
meteor add accounts-ui
meteor add accounts-facebook
then in your code you add the login button.
{{loginButtons}}
then you're in.
It's probably a very bad idea to do any sort of authentication to an external API, while passing around App IDs, secrets, etc, from the browser (client in the meteor stack).
I've implemented full facebook authentication on the server successfully.
Add the accounts-facebook smart package by running meteor add accounts-facebook from your application's working directory. This will allow you to be able to configure support for both the OAuth single user as well as the OAuth multi-user facebook authentication workflows. Please see Meteor Accounts System docs for more info.
After adding the accounts-facebook smart package, you may do something along these lines...
Under your application's working directory, in server/server.js (or similar file under the server directory), implement something like this:
Meteor.startup(function () {
Accounts.loginServiceConfiguration.remove({
service: "facebook"
});
Accounts.loginServiceConfiguration.insert({
service: "facebook",
appId: process.env.FACEBOOK_APP_ID,
secret: process.env.FACEBOOK_APP_SECRET
});
});
Take note of these lines:
appId: process.env.FACEBOOK_APP_ID,
secret: process.env.FACEBOOK_APP_SECRET
You will need to set the environment variables FACEBOOK_APP_ID and FACEBOOK_APP_SECRET properly for the above code to use the correct values.
In client/client.js (or similar file under the client directory), implement something like this:
Meteor.startup(function() {
Meteor.loginWithFacebook({
requestPermissions: ['publish_actions']
}, function (err) {
if (err) {
Session.set('errorMessage', err.reason || 'Unknown error');
}
});
});
As per Meteor.loginWithExternalService([options], [callback]), the callback function for Meteor.loginWithFacebook allows you to easily distinguish between error states, and non-error states:
Optional callback. Called with no arguments on success, or with a
single Error argument on failure.
It appears that running client side code is done by placing it inside the "myapp.js" file
Template.hello.greeting = function () {
// ADD YOUR CODE HERE
alert('foo');
return "Welcome to matchmakeur.";
};
So in order to connect your code to Facebook authentication you've got to do something like
Template.fbconnect.connect = function () {
window.fbAsyncInit = function() {
FB.init({
appId : '[YOUR_APP_ID]', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
return true;
};
and have a template
<template name="fbconnect">
<div id="fb-root"></div>
{{connect}}
<fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
</fb:login-button>
<template>
It is not a bad idea to use Facebook JavaScript SDK if you want to build a full client-side app with Meteor...
Alex C answer works at first glance, but I had some problems with FB.logout() after "navigating" and going back to the "page" where <div id="fb-root"></div> was defined, because when fb-root is re-rendered, FB.logout() stops working.
So I think the best way to load Facebook JavaScript SDK is to use a Template created callback:
Template.fbLogin.created = function () {
if (!Session.get("is Facebook JDK loaded?")) {
Session.set("is Facebook JDK loaded?", true);
// https://developers.facebook.com/docs/reference/javascript/
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '[YOUR_APP_ID]', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
}
};
Also, other thing that needs to be done for FB.logout() to work correctly is using a constant template helper around <div id="fb-root"></div>. So your code should be like this:
<body>
{{#constant}}
<div id="fb-root"></div>
{{/constant}}
<!-- rest of body... -->
I also found that it is necessary to put fb-root immediately after body.
There is a live app running code like this at http://evee.meteor.com
And you can find its source-code here: https://github.com/fjsj/evee/
(check fbLogin.js for created and app.html for constant and fb-root)
Bonus (how to serve a channel.html file with Meteor)
As of January 2013, Meteor does not support server-side routes to serve static HTML. So how to make a channel.html with Meteor? Putting it in /public won't work, since .html files are processed by Meteor as templates.
By using Meteor internals, it is possible! As suggested by this answer, we need to use a middleware-like approach (powered by Connect). Just put this on your /server (note it will be served at yourapp.meteor.com/fb/channel.html):
// serve channel.html file
var connect = __meteor_bootstrap__.require("connect");
__meteor_bootstrap__.app
.use(connect.query())
.use(function(req, res, next) {
// Need to create a Fiber since we're using synchronous http
// calls and nothing else is wrapping this in a fiber
// automatically
Fiber(function () {
if (req.url === "/fb/channel.html") {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<script src="//connect.facebook.net/en_US/all.js"></script>');
} else {
// not an channel.html request. pass to next middleware.
next();
return;
}
}).run();
});
Also this is working in production and the code is available at GitHub (includes cache headers).
You could also implement a Template event on any selector and then implement your FB javascript code. For example, recreating the Facebook Share button which has been disabled can be done by using one of the old deprecated FB share images, binding the selector to a Template event, and then using the FB.ui dialogs to post to the users Wall and share content from your site. I tested it today and it works. I imagine you could do something similar with the login if you really wanted to customize the experience some.