Is there a way or a link to a static image url to display the Facebook "Login with Facebook" button instead of the "Connect with Facebook" button? This seems to be the only link I can find for Connect with Facebook. I am able to generate a "Login with Facebook" button using FBML markup fb:login_button but in this case, I'm generating a login url link (in order to direct user through to a touch-enabled Facebook login interface -display=touch).
I found this image set very useful.
social buttons as images
You can!
First, create the link you want.
Login!
Or you can use an image. They are floating around the web.
<img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">
Then, your myfunc() looks like this.
function myfunc() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'offline_access,read_stream'});
}
Few more notes:
You will of course need the other standard Facebook setup, FB.init(), etc.
onclick() is of course bad Javascript. You can tidy up with jQuery or whatnot.
Foursquare does this and has a nice Facebook implementation. Pick it apart. Notice that unlike many other sites, you can log out of Foursquare without logging out of Facebook and vice-versa.
Turns out, there's no way.
You can only generate FB Login buttons with FBML and specifying a custom text. All static Facebook images use the words "Connect" instead of "Login".
I took a screenshot of the Login button instead :).
Related
I've put a Like Gate on a few of my Facebook Pages and I'm getting a lot of complaints saying that people can't access the content via their mobile device since the mobile version of the facebook website, and the facebook apps for ios/android, don't support tabs on Facebook.
I see there are services out there (I'm not sure how legit they are) that offer a way to create a mobile like gate for your page tab, but I can't find any documentation on how they do it. These services are not suitable for me, because the content on my tab is custom and dynamic.
So, how can I create a interstitial page for a mobile page that requires the visitor to have liked my Page on Facebook before they can proceed? This has to work for new users, as well as existing users who re-visit the tab and without requiring an install to an application.
Thanks!
One approach you can take for a mobile site is to check that the user has liked the page in question via the JS SDK.
If you have a logged-in user to your application, you can Subscribe to the authResponseChange FB event within your JS SDK initialization, or call a function directly to make an API request to verify if the user is a fan of your page.
In your initialization:
FB.init({appId: YOUR_FB_APP_ID_HERE });
window.fbAsyncInit = function() {
// React to a user clicking an on-page Like button:
FB.Event.subscribe("edge.create", verifyUserLikesPage);
}
You can verify that the user likes the appropriate page in the like handler:
function verifyUserLikesPage() {
FB.api("/me/likes/"+FBID_OF_PAGE_TO_ENSURE_THEY_LIKE, function(apiResponse){
if (apiResponse.data && apiResponse.data.length > 0)
// User likes the page. Enabled them to proceed
else
// User does not like the page. Require they click Like.
}
}
More information on the edge.create subscribe via JS available here: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I'm trying to build a google chrome extension, a use case requires that users can login with Facebook and share via a post to their Facebook wall.
The correct application flow would be as such:
User click google chrome extension - summons extension page
User clicks "login with facebook" on the extension page (or in a new tab) the users then see the "approve app" from Facebook
The user approves the app
The user is directed to a new page that thanks them for installing and processes all the needed user information OR the user is sent back to the google chrome extension (better way)
If the user is not sent back to the google chrome extension, they should be told to do so, but at this point how to get the data to the google chrome extension?
The user opens to the Google chrome extension, they should now see "Hi John" or similar instead of "Login with Facebook"
The user can no post to Facebook
My major hick-ups are logging in with Facebook, and getting the data back to the extension.
I've created a Facebook app, done most of the coding specific to the app, I'm trying to keep the app just javascript (but I can add in php if there is no other way), tried using the standard Facebook javascript, and tried using the desktop client for Facebook.
Anyone else gone through this process of connecting Google Chrome Extensions and Facebook login before?
As a final note, I'm trying to with with Parse for this project, so if you have any extra insite on that it would be great too!
A good example of what I'm trying to accomplish is similar to what Any.do
https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon
I had this kind of problem lately ;). It's a bit complicated, but I'll try to explain it in the simplest way.
Put somewhere in your extension (maybe options page) link "login with facebook" that redirects to: https://www.facebook.com/dialog/oauth?client_id=<APP_ID>&response_type=token&scope=<PERMISSIONS>&redirect_uri=http://www.facebook.com/connect/login_success.html
When someone clicks on this link, will be asked to give permissions, etc (facebook page). If someone would agree, the page will load: http://www.facebook.com/connect/login_success.html with parameters access_token and expires_in in address.
Now, background page should have script like this:
var successURL = 'www.facebook.com/connect/login_success.html';
function onFacebookLogin(){
if (!localStorage.getItem('accessToken')) {
chrome.tabs.query({}, function(tabs) { // get all tabs from every window
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].url.indexOf(successURL) !== -1) {
// below you get string like this: access_token=...&expires_in=...
var params = tabs[i].url.split('#')[1];
// in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
var accessToken = params.split('&')[0];
accessToken = accessToken.split('=')[1];
localStorage.setItem('accessToken', accessToken);
chrome.tabs.remove(tabs[i].id);
}
}
});
}
}
chrome.tabs.onUpdated.addListener(onFacebookLogin);
And this is how you get access token from facebook. Now you can send requests to https://graph.facebook.com.
Hope I helped ;)
To answer your question (Don't have enough credit to comment).
In your Facebook developer settings, click the advanced tab at the top, make sure "Client OAuth login" & "Embedded browser OAuth login" are both moved to "Yes" and then I had to add "http://www.facebook.com/" to the Valid OAuth redirect URI's
now facebook has changed "Client Oauth Login" button location. You need to add a product and after adding facebook login you will found here
My site has the option of registering with and without facebook. When you register with facebook though, extra information is needed. This is fine, as I use fb:registration and specify extra fields.
However, the problem is, when a user comes to the site and hasn't registered, sees the facebook login button and clicks it, the link brings them to facebook to login and the app is registered and bypasses the registration form I have.
I there a way to redirect a non-registered user that is not logged in with facebook to a registration page instead of adding the app?
You can add the registration-url parameter to the login button as documented in the Login + Registration Flows section.
<fb:login-button
registration-url="yoururl" />
This isn't documented so I don't know if it will continue to work but if your using the HTML5 version of the login button then you can use:
<div class="fb-login-button" data-registration-url="yoururl">Login with Facebook</div>
Not 100% sure i understood you but..
Going on the assumption that you only want users who have an active FB browser session and have authorized the use of your application with their account to see your login button/a particular page you could try this right after your FB.init:
FB.getLoginStatus(function(response) {
if(notLoggedIntoYourSite && response.status != 'connected') {
// Redirect user or hide login button
}
})
Ref: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
I was wondering how do they create the page on facebook with like button as a gateway to enter and browse through the page...
Here is the one example....
http://www.facebook.com/Diesel?sk=app_168523776552050
I know how to create page in iframe and put in in facebook but I dont know how they show this popup and how do they show it for non fan visitors.
Please enlighten me with your ideas and works.....
This is a simple "Fan Gate", and on the none-fan version they show the normal like button via the url of the page.
A simple way to build a fan gate yourself is described here: http://www.chilipepperdesign.com/2011/02/15/reveal-fan-gate-like-gate-facebook-iframe-tab-tutorial-with-php
The like button:
<fb:like href="http://www.facebook.com/diesel" send="true" width="450"
show_faces="true"></fb:like>
try this:
authenticate your application and get an access token
use access token to authenticate your user and to get a 'signed request' from FB.
'signed request' will tell you whether the user is fan or not
write some code: if (user is fan) { show content for fans }
else { show content for visitors }
Nothing happens without the 'signed request'. Works in PHP and JS.
Parse the 'signed_request' parameter from Facebook. See http://developers.facebook.com/docs/howtos/login/signed-request/
Each signed request contains a 'page' key with a 'liked' subkey whose value is a bool of whether the page has been liked.
Display the banner depending on the value of that bool.
Note that only the Page Tab view has a like button on it. The Canvas App does not have a like button surrounding it.
I'm making a Facebook page app, and I need to get some extra permissions from my users, this prompts a pop up window which a lot of people have blocked, I remember seeing a lot of apps directing to a grant permission page with a callback url to handle this.
Is this depricted ? If not how can I use the embedded page rather the a pop up?
I'm sorry if this sounds like a lazy question, but it's been so long since I've been involved with Facebook and their API seems like a massive moving target, any tips would be greatly appreciated.
Thank you.
Try this little function in straight Javascript.
<script>
function addPermissions(permissions){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:permissions});
}
</script>
<a onclick="addPermissions("email, publish_stream,...");">Click me</a>
If you don't pop the window at page load and do it in response to a link/button click the popup blocker shouldn't block it, aka the User actually requested the Pop to work. (I've had it working this way)
You can alternatively create the relevant authorisation URL and just send the user there.
Initially you send them there via dialog or redirect.
You can just send them there again requesting the additional permissions aka Scope.
Details:
https://developers.facebook.com/docs/authentication/
The URL for the dialog can either pop into a new window or redirect to it.
A new window normally pops from using the Javascript API.
I believe the popup method is deprecated. The standard method is to redirect to the facebook oauth dialog with a callback. There is an alternative popup method for iframe apps that isn't really a popup that would be blocked, it's more of an ajax popup.
The information you need as far as usage of the dialog I had mentioned is located at
http://developers.facebook.com/docs/reference/dialogs/oauth/