Facebook gives you user’s first name without auth, use it on your landing page
I want to keep it short. Facebook has made some changes on their “connect” button and that changes can be used for some useful cases, in my opinion.
They’ve added a feature that provides user’s first name on their connect button and i realized that modifying this button can provide me only first name. And I can use user’s first name everywhere i want on my landing page. Which is great, I basically talk to my user without actually knowing him or her.
Like, “Hey John! Here is an special offer for you!”. Or “Today is the John’s day”.
First of all, user should be signed in on Facebook (most of Facebook users don’t even logout) and they shouldn’t have changed their privacy settings to hide their name. I’ve tested my banners on office and it worked on 10/8 users computer and mobile devices.
Before the demo links, I have to say that why it’s important. In usual ways, you need a database to determine your user before mention their name on your landing page. For example, you need an auth system and user should be signed in on your system, after that you can use user’s name on your landing page. With Facebook, we don’t have any database, we don’t need a system and we can talk to users with their name directly. And remember, almost everyone signed and use that system.
Here is one of the demo link :
http://imagets.com/shared/banner-sample/banner-example.html
I actually ended up with some cool ideas like putting user’s name on a car plate and tell user that it’s your car! But yeah need more polish…
Here is the documentation of Facebook :
Their new feature is called “Continue as {Name} Button”. I hope they don’t remove or change anything.
Techincal Details
Here is the “Continue as {Name}” button.
On CSS we could clip a button with iframe and move it in iframe with absolute position. When we do that, we could get only “John” into an element that outside of iframe.
It will be like this after applying this process :
Well, after that you could apply color filter to get rid of background and make it more like on your page.
That’s it. You could copy the source code from my web page. If you need help, i can explain it more, just leave comment below.
