“Crush it” like Gary V on Facebook

Today I asked Twitter: "Tell me what FB-page you like, and I'll blog about how to create it.". I got two replies and I am going to do as I said and tell you how the person who built the page did it. Or at least how you can do it on your own. I will also enclose what ever code I use in my examples as it becomes easier for you to create your own pages that way.

Today I asked Twitter: “Tell me what FB-page you like, and I’ll blog about how to create it.”. I got two replies and I am going to do as I said and tell you how the person who built the page did it. Or at least how you can do it on your own. I will also enclose what ever code I use in my examples as it becomes easier for you to create your own pages that way.

This tutorial will be all about how to create a welcome page such as the one Gary V uses. I hope he doesn’t mind and I hope he didn’t pay millions for his. The design and the message is the complicated stuff with his display and not the technology behind it. Thus even though you read this blog post you won’t become a Gary. Actually, I don’t think he would recommend you even tried to be a Gary. I think he would recommend you to be a you. So… I hope he’s fine with me telling you how to exploit his idea, make it your own, and simply “crush it” your way.

For this tutorial the resources are:

This is how you do it

Basically you are trying to create a hover effect with css as javascript cannot be executed on Facebook Canvas Pages. You can see how Gary’s page creates these little talk bubbles when you hover the section you’re currently at.

In order to do this you need to create an image that includes both the image you want to display when someone hovers the image and the image that is shown when not hovering the image. Place them on top of each other as shown below.

Now you have to hide the bottom half. This you do with the #garyvexample css provided in the enclosed file.

As you hover the image, you want the bottom half to show and the top half to be hidden. This is what you do with the #garyvexample:hover id that is provided in the enclosed file.

Last but not least you should create a style for the link. If you don’t know how to work with CSS you can find plenty of tutorials online. I would personally recommend w3schools.com‘s tutorials as they set the web standard.

To make it easier for you I’ve created a video tutorial on how to do it. The complete video is 5.38 minutes and I tried to make it condensed. I know I sometimes take things for granted, so if I have missed out on explaining something crucial, then please ask in the comment’s section and I’ll be happy to elaborate.

Possibly related posts:
More from Jesper Åström

Content is shit, all hail viral mechanics!

Tweet The past 16 years I have had the great...
Read More

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *