Facebook Cover Photo Dimensions 2014 – Template Included

Facebook-Cover-Photo-Dimensions

Just like my previous post about Twitter background dimensions, this is a post about the Facebook cover photo dimensions for 2014. I always feel it’s important to include the year in the post so that people can understand how recent the template is. Let’s break down the Facebook cover photo and its dimensions.

Getting it Just Right

Not a whole lot has changed as far as dimensions go for the Facebook cover photo. The main dimensions of the cover photo are still 851px wide by 315px high. This is the bulk of your cover photo. That doesn’t mean that you’re going to have all that area to play with. The profile picture extends 104px up into the page and is 170px wide. So there’s a small space in the lower left that is going to be covered up by the profile picture. Make sure that you account for this space when uploading your photo.

Make the bulk of your content right justified and use the 658px between the profile pictures right edge and the right edge of the cover photo. Facebook has also removed its 20% text restriction on images as well as the promotional restriction. However, there are still guidelines on this subject that read:

“All covers are public. This means that anyone who visits your Page will be able to see your cover. Covers can’t be deceptive, misleading, or infringe on anyone else’s copyright. You may not encourage people to upload your cover to their personal timelines.”

You can read more about the guidelines here.

If you find this template helpful, share it with your friends!

Download Facebook Cover Photo Template 2014

Facebook Friday: How to Make a Custom Timeline Tab

Custom Timeline Tab
I’m often asked how to make a custom timeline tab so I thought I’d share how to do it. The great part about making custom tabs is that you can drive traffic to your website Facebook page like you would your website. I won’t go into all the details of marketing your Facebook page you can find much better articles about that from Lisa Mason. If you’re looking to set up a custom timeline tab you’ll need to first set up a few things before you can start to develop the page itself.

Every person with a Facebook account can have a developers account. How do you see your developer account? Go to http://developers.facebook.com/ From here you’ll be able to click on any of the links and see your account.

The first time you do it might be a little confusing but just refer to this article and it should help you get through everything without a hitch. Remember, if you get stuck you can always leave a comment and ask a question.

Custom Timeline Tab Template

Before we actually get in to Facebook and start making our application we need to set up a template. We don’t have to do it but I find that having a template for things is just always a good idea. I mean who wants to have to redo the same thing each time you build a project? Take the following code and post it into your favorite editor.

Directly after the title you will find the link to the style sheet. I label mine style.css and I keep it inside the main folder that I keep the custom timeline tab html files. If you choose you can put the style.css inside of any other set of folders just make sure you change the link to something like href=”css/style.css”. You will also want to make sure that style.css is the name of your personal stylesheet.

This portion of the code will set the actual size of the custom timeline tab itself. If this code isn’t in your html your content will be cut off and people won’t be able to see the whole thing when the iframe pulls the information. I keep the default settings at 810 width and 950 height. For longer custom timeline tabs you’ll want to adjust the height but the width should stay the same. One small thing to note is that the actual visible width is only 790 pixels wide. Facebook adds a 10 pixel padding on each side of the iframe.

Our next section contains the content. This is straight forward. All of the content that you’re building for your custom timeline tab goes here.

Lastly and most importantly is the application ID. I label this “my_id” so I can easily find it when building my custom timeline tabs. Where do you get this number from? Well after we make our application we will be given the application ID and this is where we insert it. It’s very important that we do not forget this step! Now let’s go to our developer page and create our application.

Custom Timeline Tab Application

Once we have our template set up we’re ready to make our application. From the toolbar on the top click on the Apps link. This will take you to your apps home page. Next click on the +Create New App button in the top right. A new window will pop up and you’ll want to input your app name. It’s good practice to create unique sounding application names. This way you won’t get them mixed up. You can use any combination of letters and numbers. Once you have your application name picked out you will need to put in a captcha.

Facebook Application Toolbar

Congratulations you have your first application created! In the first box at the top you will see two large numbers:

Facebook Naming Application

    1. App ID
    2. App Secret

Facebook Application ID

Before you do anything else copy and paste your App ID and insert it in your html document where you have the placeholder ‘my_id’. Make sure that you do not delete the two single quotes! The id must go in-between both quotes. Head back to your developer page and go to the bottom set of boxes. Select the option “Page Tab”. To get your custom timeline tab to work you need to link to the html document we just made. Upload all of your files via FTP to your web server. Once you’ve done this grab the link to your html document and insert it into the three boxes under the “Page Tab” option. These are the three boxes:

    1. Page Tab URL
    2. Secure Page Tab URL
    3. Page Tab Edit URL

Facebook Page Tab

Under the option “Page Tab Name” you can name it anything you want. This name will be what displays as the tab name itself once you’ve uploaded it onto your fan page. To back up a moment I want to point out that the three urls above have a specific purpose. For basic custom timeline tabs you’ll just use the same url for all three. However, if you’re developing a more in depth tab that pulls secure information and/or you want to allow for another person to edit the page content like a CMS you’ll want to make additional pages and add these to Secure Page Tab URL and/or Page Tab Edit URL. This tutorial won’t cover how to make these more advanced features and I don’t know of any good sites that will teach you how so I’ll have to write one up later! We’re almost done! The last thing we need to do now is save changes to our application and then add it to our page. Remember how I said to use a template for things? You’re going to want to take this next piece and add it to a text editor like notepad and save it as a template. You will need to take the following link and insert your values. Change the app_id= to your app id. Then change next= to the URL of your custom timeline tab. This is the same link you inserted into the three boxes above. From here you’ll be taken to a page that that allows you to pick the page you want to add the application to.

 

Sometimes you will get an error like the following:

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.

If this happens you need to make sure that you’ve added http:// to both the next = section as well as adding the http:// to the three sections inside of the “Page Tab” application section.

We now have our own custom timeline tab! If you’re interested in learning more about your timeline fan page you can check out this infographic I made that shows some of the features that come with timeline.

Do you have any questions? Are you having trouble getting your custom timeline tab working? Leave me a  comment and I’m more than happy to help.

March 30th Is the Deadline to Convert Your Facebook Fan Page to Timeline Format

Deadline to Convert Your Facebook Fan Page to Timeline Format

Change is coming to Facebook and this change includes Facebook fan pages. Just like many changes in life, there is little you can do to stop it. Instead, we must embrace these changes with open arms and make them work for us, rather than allowing them to destroy us.

When I first heard that Facebook was forcing fan pages to use the Timeline format as of March 30, 2012, I was less than thrilled. But I dug in with my boots on waded through the confusion and frustration to find the silver lining. It turns out, there are some pretty good things about Facebook Fan Page Timelines.

At first it would seem like these changes and the new limitations Facebook placed on advertising on its fanpages would be limiting to small businesses and entrepreneurs and only beneficial to big brands and well-known personalities. However, as I explored deeper, I found that anyone can benefit from the new design if they just take the time to learn how.

Facebook Fanpage Cover Photos

At the top of your fanpage in the new design, you will have what is called a cover photo. This is your space to shine.  The standard layout size is 851 pixels wide by 315 pixels high. Although different sizes can be stretched to accommodate the space, it will look better and crisper if your image is the correct size to begin with.

The visitor’s eyes will be drawn to this cover photo first and foremost so this is where the focus of your information should be. You want a high quality image that describes your brand and what you do but that stays within the rules of Facebook advertising. You want people to see this image and immediately associate it with your brand/website/company/etc.

Facebook Fanpage Portrait or Profile Picture

The next most important image on the page is your Fanpage portrait or profile picture. It has to be a minimum of 180 pixels wide by 180 pixels high. This could be a logo of a company or the real photo of the person behind the company or account.

Converting Old Fanpages to Timeline Fanpages

If you already have an existing fanpage design, you do not have to do a completely new design if you don’t want to. All you need to do is convert your left side image to a cover photo image instead and convert your tabs to the new format. If you need help converting old fanpages to Timeline formats, please feel free to contact me about my services and how I can help.

Related:

How to Make and Install a Custom Facebook Timeline Header

Facebook Fan Page Cover Photo Template

Facebook Fan Page Timeline Tutorial [Infographic]

 

Facebook Fan Page Timeline Customization

Facebook fan page Timeline

Facebook fan page timeline is now out! Timeline will become mandatory for all fan pages at the end of March. You can preview the new design on your fan page now. So Facebook has released a new way to display your fan page content and now you have to figure it all out again right? Wrong! Not much has really changed other than the physical appearance of the page itself. They have also added quite a few new features that are exciting.

Now that you know you have to use Timeline for your page at the end of March you need to brush up on the new page and how to navigate it. Here is a list of some things you’re going to want to know to get your page looking spiffy:

MY TABS ARE GONE!

Your tabs aren’t gone they’ve just been moved. Now they are directly below your cover photo in a nice little row of boxes. As you can see from the picture below there are four boxes that contain interactive information about your page. The first box is photos and as of now cannot be removed. This means that you have three visible tabs next to the photos tab. All other tabs will be displayed in the drop down menu located to the right.

Facebook fan page timeline tab locations

Customized Tab Icons and Positions

Once you click the drop down menu you will be able to edit which tabs are the most important. With the dropdown menu open you can hover over your tab image and click the pencil in the upper right. From there you need to select Edit Settings from the new menu. In the new window you can edit the name of the tab as well as the icon. You can upload a photo from your computer but the size needs to be no bigger than 111×74 and smaller than 5mbs.

The About Info is Smaller

As you can see from the image, the about info that is displayed is in a much smaller box. You can work around more information in the about box in the admin page. You can also put things like your address and phone number.

Facebook fan page timeline cover photo

No More Large Profile Photo

The Facebook fan page timeline profile picture has been condensed down to a smaller thumbnail. This is actually very nice because it’s like an “icon” for your posts. This photo will show when you post on your wall, others walls and as your pages default icon. The size of the profile picture is now 126x126px.

Milestone Sticky Notes

One very cool new feature with Timeline is that you can add Milestones to your page. If you select the option from your wall you can name the event, choose a location, date, the story and add a photo. Once you’ve created the Milestone you can find it on your Timeline, select it and then sticky it to the top. This Milestone will be on the top of your page permanently. You can have multiple Milestones on your page. This is a great way to control the content that displays on your page.

Facebook Fan Page Timeline Cover Photo

The Facebook fan page Timeline cover photo is one of the best features of the new page system. You can read an article about the Facebook fan page Timeline cover photos from a previous blog post here on the site. It covers the dimensions and ideas for how to get the most out of the photo.

The new Timeline cover photo is a replacement to the old profile picture. This gives you large amounts of space to work with and really gives your viewers the chance to see what you’re about before they even read your content. The Facebook fan page cover photo does have limitations on what can go on it. Unfortunately Facebook has made it very clear that they don’t want any promotional material on the cover photos. This means no website links, coupons or advertisement. What I included in mine is a QR code. Putting a QR code on your cover photo is a great way to let people interact with you while keeping in the guidelines of Facebook’s rules.

Facebook Fan Page Timeline

The Facebook fan page Timeline update has many changes but getting to know each one will take some time and playing around with your page. At the end of March all pages will be converted and any programs, apps and design you currently use will need to be updated. Don’t wait until the official release, update now. Take this month to get to know the new Timeline system and stay ahead of the game.

Do you have any questions about Timeline? Want to know about apps or tabs? Leave a comment and let’s discuss it!