A few days ago on Millo, we discussed. Today I would like to explore the phenomenon of custom facebook page design a little further. Being the awesome designers that you are, I won’t waste my time including a tutorial on how to design a facebook page in Photoshop, but this article will elaborate on some of the finer points regarding the design and code of your facebook page. Whether you are designing and coding a custom facebook page for your design business or for one of your clients, these rules will help you have a successful page every time. Remember to review the points from the last article (link above) before diving in. Why waste your time on facebook? You might be asking yourself, first and foremost, why you should worry about wasting your time on designing and coding a custom facebook page.

• Free Html And Css Codes

Aside from the obvious answers like “facebook is the biggest social media venue” or “all your clients are on facebook, if you’re not, then you’re missing out”, you should take time to learn how to design and code your own custom facebook page because it’s a great skill to add to your resume or client pitch. Enough is enough. Make 2018 the year you trade your worst clients for some of the best companies in the world. If, in addition to HTML, CSS, javascript, Photoshop, or whatever your skill set is, you can add the skill of designing a custom facebook page using FBML (Facebook Markup Language), you are a more marketable designer. Let’s start with design Like I mentioned previously, I am not planning on boring you with a mundane tutorial on how to design a page in photoshop. You can probably figure out the best solution for you or your clients’ needs.

What I would like to do, however, is point out a few important aspects of the page design that will help you on your way. SIZE REQUIREMENTS While FBML is fairly flexible, there are a number of restraints or requirements that facebook places on page designers.

One of the first constraints you’ll want to consider is the size of the area you are allowed to use when adding a new page tab. Facebook recently changed the size of the custom content tabs to 520px wide. Of course, the length is unlimited within reason, but in order to avoid your custom facebook page being truncated prematurely by ads and other sidebar content, the maximum width allowed is 520px. Keep that in mind when working on your Photoshop Comps. You'll also enjoy this episode of our new podcast.

CALL TO ACTION As mentioned in the, you want to make sure your call to action is nice and visible. For most facebook page designs, the call to action is going to be the invitation for visitors to “like” your page. Make sure the call to action is one of the first things your visitors see when they visit your facebook page. Keep in mind when designing your page that the “fold” will be significantly higher than what you are used to. In other words, place your call to action very close to the top of your design to ensure visitors see it immediately. CONSISTENT BRANDING Remember the importance of branding when designing your facebook fan page. Avoid using templates that don’t match your branding strategy.

If you have a decent understanding of HTML and CSS, coding your own custom design to match your brand will be fairly easy for you. Now for the code INSTALLING Static FBML (Facebook Markup Language) There are countless tutorials online regarding how to install FBML on your facebook page (, it’s pretty good), and once you have FBML set up on your facebook page, I would like to include a few tips on using it. (For more tutorials on using FBML, try our good friend Google.) CODING YOUR DESIGN Once you have perfected your facebook page design in photoshop, it’s time to start coding! For FBML, you won’t need any of your standard, or tags. All you need is a div that measures 520px in width and some in-page CSS.

If you’d like an example of what I am talking about, you can. Use standard HTML and CSS markup just like you would when coding any other web page, but be sure to include only the CSS and the content that would normally be found between the and tags. MAKING YOUR CUSTOM PAGE THE DEFAULT PAGE After designing a coding a nice facebook landing page, you’ll want to make sure that when new visitors who haven’t “liked” your page yet visit your page, they are immediately taken to your custom-designed page. This is done rather simply by clicking on “Edit Page” directly below your page’s profile photo. Once you’ve opened the editing options, click on the “edit” link right below “Wall Settings”.

From there, you can choose the “default landing page for everyone else” as shown in the image below. (The Wall is the default for people who “like” your page.) ADDING EXCLUSIVE CONTENT You can also insert some FBML code to create content that will only be visible to people who “like” your page. As discussed in the previous article, this can be a great way to grow your fanbase by motivating users to act. The code that facebook has designated for exclusive content are as follows. THIS IS THE CONTENT THAT IS VISIBLE ONLY TO THOSE WHO “LIKE” YOUR PAGE THIS IS THE DEFAULT INFORMATION FOR THOSE WHO HAVEN’T “LIKED” YOUR PAGE YET By adding these simple tags, you can assure that members of your facebook page will receive exclusive content available only to them.

What other questions or tips do you have? The above tips are just a few of the things I come up with to help your design and code a custom facebook page. If you have had experience designing and coding a facebook page, what other tips can you add? If you are new to the whole facebook page scene, what questions do you have? I would love to hear your thoughts in the! Preston – Great overview. Every business on earth needs to add more sizzle and functionality to their Facebook page.

The problem is many don’t have the dev chops to write code and mess with FBML. We built the largest suite of Facebook applications on the planet at northsocial.com. Now every designer, agency, and developer can help their clients get up engaging Facebook pages in minutes, without having to write a single line of code. We also have an Agency Partner program you may want to check out. Hey Preston, This is brilliant – so many individuals and small businesses will benefit from this easy-to-read and easy-to-understand article on setting up the really important “Landing” or “Welcome” page on their Facebook Page – thanks so much for sharing! This is a proven method for increasing engagement with your Page / brand – by making all new visitors to your Page see the “Welcome” screen with a big “Click the Like button above” call to action, you’ll get more Likes, more engagement and have the potential for higher conversion rates as well, both on-and-off Facebook.

This is definitely one to share for a long time to come! Nice article about custom landing tabs and the Static FBML app. As a note to all the Facebook designers out there – if you want to create custom Tabs for Facebook Pages without actually coding anything, check out splashtab.com. You can select from preset templates, upload your custom graphics, and then give your client access to update their content!

We also hope to eventually offer a “designer” account where you can write all of your own markup and still give the user access to edit blocks.

By 2011-02-04 13:02:57 UTC Jonathan Goldford is a partner at, a web design company that builds websites for nonprofits. You can connect with Jonathan on and on the Wired Impact.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million 'Likes' and are growing rapidly. While there are an enormous number of articles that talk vaguely about, very few discuss the nuances of actually designing and programming one. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page Actually designing a Page is very similar to designing any website, except for a few considerations:. Design for a 520px Width — Facebook Pages must fit within a width of 520px. Since we can’t use a body tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px. Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up. Account for the Width of the Company’s Name — Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name.

Free Html And Css Codes

The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Once you take a screenshot of your Facebook Page, pull it into a design program like Photoshop and design over it. Here is a look at a piece of our final Facebook Page design. Programming Your Company’s Facebook Page Now that we have a design we’ll walk through how to program our landing page to use on Facebook. Begin Programming Outside of Facebook There are a number of reasons why we should start programming our Facebook landing page outside of Facebook. Facebook Offers No Coding Support — Facebook provides only a small box for you to code in, and provides no syntax coloring or syntax checking.

Facebook Caches External Files — Facebook caches every external file causing changes to external CSS, images, Flash, or other external files to not show up without changing the version query string on the end of each file. You’ll Publish Untested Code — Once you save changes, those changes will be live on your Facebook Page. You probably don’t want users seeing an unfinished or broken landing page. Program the Page Without FBML Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML). In order to account for how Facebook will handle our code, we will adjust our code to follow these rules as we build our page. Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS. 90% of the code will act exactly the same way.

The rest you can adjust when you move the code onto Facebook. Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal style sheets on Facebook Pages. Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Facebook will not host any files for you. Make All Paths Absolute — All paths to external files must be absolute. Write an image link like Don’t write images/pictures.jpg.

Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. Use a class with the style display:block to remove the space.

In our code, we use the class “nospace” to implement this style. To start, create one HTML and one CSS file. The HTML file will hold the HTML and eventually the FBML. The CSS file will hold all of your styles.

We’ll call them facebook.html and facebook-styles.css. Start by linking to the CSS file and creating a div with an ID of container.

Give the container a width of 520px in the CSS. Also, if you want to brand your landing page a little better, you can choose a font. To override Facebook’s default paragraph style, we added a font-family style for #container p. Finally, Facebook uses a default font size of 11px and a font color of #333.

To best imitate Facebook while testing, we included the 11px font size and also set the container text color to black to match our company colors. Facebook.html facebook-styles.css Create the remaining HTML and CSS for your Facebook landing page. Here is the code we have after finishing our page. At this point our landing page should look exactly how we presented it in the design instructions before. Facebook.html facebook-styles.css Test the landing page in all the browsers at this point to make sure it appears correctly.

You really should test the page throughout building, but this serves as a good reminder. Add in the Necessary FBML The page looks exactly as we expected it to, but right now if someone already Likes our page, they will still see the call to action for them to Like at the top. Let’s put in a conditional statement using FBML that only shows the action image when you aren’t logged in or haven’t Liked the page. This way, once someone Likes the page, they won’t be prompted to do so again. Regular HTML HTML with the FBML Conditional Statement Let me explain the code:. fb:visible-connection — This code checks to see if the user has Liked the page before. If the user has Liked the page then the content inside will appear.

fb:else — In this case fb:else will display only to users who haven’t Liked the page. That is why we put the call to action inside the else statement. Also, unlike typical else statements, fb:else is placed inside the other conditional. In case you want to add something else besides a call to action for your Like button, below are some examples of other commonly used FBML items. Adding the User’s Name — fb:name Fb:name will display the full name of the logged in user. For example, if a user named John Smith comes to your page the code below will display “John Smith”. This can be used to greet a user by name when they come to your landing page.

Adding the User’s Profile Picture — fb:profile-pic Fb:profile-pic will display a user’s profile picture if they come to your landing page. For example, the code below will display the current user’s profile picture at 64px by 64px. Adding a Share Button — fb:share-button Fb:share-button will display a share button that allows users to share a link on their own profiles. For example, the code below will display a basic share button for Mashable.

Adding a YouTube Video or SWF File — fb:swf Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s video will automatically play. Unfortunately, Facebook requires that the image be clicked before the video will play. You can create your own image to show through the imgsrc parameter.

We wrapped the FBML in a container div to allow us to style it and added?autoplay=1 to the end of swfsrc so the user won’t have to click twice to play the video. If you want to add your own YouTube video, replace the text in the parameters swfsrc and imgsrc where it says “1B95KLmpLR4” with the ID of the YouTube video you want.

You can find the ID in the URL of any YouTube video after the text Adding an FLV file — fb:flv Fb:flv will display a video player for FLV files. For example, the code below will display a play button that you click to play the FLV video. Fb:flv provides the player and all the controls. All you need is the FLV file. Adding an MP3 File — fb:mp3 Fb:mp3 will display and play an MP3 music file. For example, the code below will display a music player that users can click to play.

The player will then rotate through a display of the song title, song artist, and the album name. Adding a Form While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages. To do this, copy and paste your form code into the FBML submission box. Make sure you use the following code to start your form: Adding target='blank' will open a new window when the form is submitted so the user isn’t taken away from Facebook. If you want to add a newsletter signup form to Facebook, both and have tutorials that explain the process.

If you don’t use one of those services, you can usually drop in the code from your e-mail marketing company to make this work. Adding JavaScript Adding JavaScript is outside the scope of this article, but you can learn more about Facebook JavaScript. As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action.

If you haven’t found the FBML you’re looking for, visit Facebook’s. Publishing Your Company’s New Facebook Page After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page.

Uploading External Content, Adjusting Links, and Adding a Version Query String Once we’re done adding all the necessary FBML we need to move all the CSS, images, videos, and other external files to a server. To host your files, we recommend using your website’s server if possible. Once all of our files are located on a public server, we need to adjust our HTML to make all of our paths absolute and add a version query string. Previously I mentioned that Facebook caches all of your external files. This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page.

This happens because Facebook doesn’t know the file has changed and is loading its older saved version. To trick Facebook, we use a query string at the end of our filenames and increase the number whenever we make a change to that external file. Facebook then thinks we’re using a different file and loads it up. Old Relative Path with No Version Query String New Absolute Path with the Version Query String Test Your Page Using the JavaScript Test Console One of the biggest disadvantages of Facebook landing pages is that Facebook provides no place for you to test your code. We have to use the Facebook. Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action. If everything looks good, you're ready to publish your finished Facebook landing page.

If not, make sure to check the links to your external content. Also, I noticed that the Facebook JavaScript Test Console has trouble loading videos, so you may be forced to test that code directly on your landing page. Publish Your Finished Facebook Landing Page Finally, you are ready to publish your HTML file to the Edit FBML screen. Follow these steps:. Click “Edit Page” on your Facebook Page. Click “Apps” on the left side of the page.

Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page. Copy and paste your HTML code into the FBML box. Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top.

We used “Who We Are.” Hopefully you can think of something more creative. Click “Save Changes.”.

Go view your Facebook landing page. Make Your New Landing Page the Default Landing Tab Now that you’ve put in all of this time programming your custom landing page, you probably want to make it your default landing page.

This way, when someone that has not Liked your page comes to it, they will be taken to your custom landing page instead of your wall. Here’s how to do it:. Click “Edit Page” on your Facebook Page. Click “Manage Permissions” on the left side of the page.

Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page. Click “Save Changes.” Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Check with someone who has Liked your page and is not an admin to make sure they only see the content that’s meant for them.

Congrats, You’re Finished! In case you need it, here are the final HTML, FBML, and CSS we used for our Facebook landing page. HTML and FBML CSS Since there is no one correct way to program a landing page, we would love to hear what you think. Have you ever designed or programmed a Facebook landing page? How did it go?

Did you run into any issues? Do you have any additional tips we didn’t cover here? Let us know in the comments. More Dev & Design Resources from Mashable: -Image courtesy of Flickr.