Facebook can do amazing things for your blog or online business.
It can become your primary source of traffic:
It can help you quickly understand your audience a little better:
And most importantly, it can help you connect on a deeper, more personal level with your reader, subscribers, customers, and fans – in simple but effective ways:
The one thing I dislike about Facebook, however, is that it gives us very little room for customization and branding. Yes, we can create our own landing page for new visitors to see – which is extremely important, but as far as the wall is concerned, we have very little to work with.
This is why you must take advantage of what you do have to work with – your profile image and the smaller spaces for 5 banner images at the top.
The profile image should be tall, which gives you more room for pictures, a logo and/or text to highlight your brand. The 5 banner images, normally used to illustrate previews of pictures that have been previously uploaded, can be designed and uploaded in a way to add to the branding of the page as well.
Corbett Barr’s Facebook Page utilizes the banner images quite well too.
A lot of people have been asking me for more information about how this is done – especially how to connect and match both the profile image and banner images together. In the video below, I explain everything you need to know in order to get this done fast and take your Page to the next level. And if you’re a Photoshop user, I also share a .PSD file that will quickly slice and dice your Page design into separate files for super easy uploading.
(watch How to Create a Branded Facebook Page on YouTube)
Facebook Image Slicer PSD File
As mentioned in the video, if you have photoshop you can use the .PSD file linked to below to easily setup the look of your page and generate the 6 images that you need to upload at the correct sizes. Just right click and “save-as” on the file below, open in Photoshop and follow the instructions written on the screen:
Click Here to Download the Photoshop (PSD) File to Create Your Facebook Page
If You Don’t Have Photoshop…
Don’t worry! You can still create the images for your Facebook page manually, although you may need to do some trial and error to properly align the profile image and the banner images if that’s something you’d like to do.
Also, please note that the banner images randomize after each page reload, so you will need to design them in a way that works in any order.
The sizes of the images used in the example are:
Profile Image: 483px tall by 183px wide
Individual Banner Image (all same size): 68px tall by 97px wide
I hope this tutorial has helped (or will help) you take your Facebook page to the next level. If you do use this tutorial I’d love to see the results. Feel free top drop a link on my Facebook Page and I may highlight your page in a future post.
Cheers!
Download eBooks the Smart Way! Check out my FREE guide about publishing, marketing and automating a killer eBook! Just enter your name and email below... |  |
 | We hate spam just as much as you |
No, I'm not a millionaire, but I am living off of passive income made online. I'm here to show 
Enter your name and email below to get Free Instant Access to the most comprehensive guide available on how to Publish, Market, and automate your own killer eBook.
{ 105 comments (Click Here to Leave a Comment Below) }
I have been looking for some information today about facebook. It was an interesting surprise to see that your post was linked to this subject. Thank you for making a tutorial.
What do you think of the closure of accounts on Facebook? I have heard about the fact that facebook had lost some of its users.
Closure of accounts?
For the first time ever last month Facebook stat’s dropped for specific countries, if that’s what you’re talking about. Almost a 10% dip in England and other big markets.
They’re still growing overall though.
Hmm, I didn’t know about any of this. Yes – they are definitely still growing. Over 500 million now I believe, which is more than 1 per person in the U.S. – it’s crazy!
I just heard this also. On the radio while driving into work this morning, (The Kane show in Washington DC) the hosts were talking about the large numbers of people “breaking up” with facebook. They claimed millions have deactivated their accounts over the last two weeks, but I do not know what their source was for this information?!
It is strange Pat. I am not shocked to hear that people are closing accounts. Facebook really seems to be trending away from an actual “social network” site, and more into a social playground. People might check in to get what they want, have some fun, and check out. No actual networking is taking place. Folks in the 20-30 age bracket are more than likely not going to spend the time on Facebook any more like they used to. I guess that is why the over 50 crowd is the fastest growing demographic of Facebook users.
Hi Pat, thanks for sharing this video. It helps
Great guide Pat, I actually was on your page the other day and noticed these images. They looked really cool!
Thanks Vinay – I had a lot of people ask me how to achieve the same effect, hence this post
. Cheers!
Hey Pat,
Great video…I’d always wondering how the slicing thing worked. Curious that you are making a fan page your SGHQ. What was the motivation for that? I don’t normally make FB pages for my niche sites. Maybe I should be? I have a site that gets about 1000 uniques a day (howtocleananything.com) and am looking for ways to better monetize it. Perhaps a FB page would help…hmmmm?
Trent
Congrats on getting another video out. This is a huge topic (was actually working on an update myself).
Don’t forget to try out putting their names on there if you can
Thanks Glen – I know you have even more cool tricks up your sleeve, hehe. Thanks for taking the time to comment here on SPI, and congrats on your huge post today. It’s ridiculous!
Great tutorial, the quality of your content is so amazing…
Cheers Byron!
Hey thanks for the tutorial Pat. I just recently got a design done for my fan page too and I am already getting some traffic to my website from facebook. Any tips to improve things is greatly appreciated. Once again thank you.
I’m always throwing out new Facebook tips, so just stay tuned. Cheers, and congrats on getting a new design done
Thanks for the awesome Video Pat!
I never knew the 5 images displayed above your Fan page wall can be customized, I thought images appear there automatically as soon as you upload them. I’ll be making some changes to mine now.
BTW I wanted to ask if it is possible to link those images to somewhere on your blog? For example, is it possible for the podcast section of your fan page to be linked to your podcasts here?
Hey Oni,
If you’re talking about the graphics on the top row then it’s not possible to link those. You can however add links as tabs in the sidebar which could do what you’re looking for.
You could also, in the description for each of the 5 images, include a link to something relevent – however the link will not be clickable. Glen’s right though – using the tabs/links below the profile image is probably the best route to go.
From what I have read, FB will randomize the last 5 images that you upload. If you upload an image that you don’t want to have appear in the strip, you will have to hover over the image and click the “x” to hide the photo. You also have to keep this in mind as you take photos on the go and upload them. Those will appear in the photo strip until you hide them.
Yep – this is demonstrated in the video for those who want to see it in action. Thanks Kevin!
i can give u the link for thay
Are you a mind reader? I was just thinking about this last week and trying to figure out how to get this done.
Thanks in advance… will definitely go over this info later on in the week
I do my best to try and read people’s minded
Let me know how it goes and if there’s anything I can help you with along the way. Cheers!
Hi Pat!
Wow! Thanks so much for this tutorial. Super cool and easy especially if we have photoshop. As for me, I still have to download photoshop and I’ll probably do that. But more interesting, you made it easy!
Cheers!
Thanks, and I look forward to see what you come up with. Cheers!
Pat-
That was a great video. I was able to change my personal page photo settings but wasn’t able to do the same for my fan page. I’ll start workig on the changes you showed. Thx!
Thanks Tom – I always do my best to create unique and helpful videos. It’s sort of silly that Facebook promotes Pages as “just like Facebook Profiles”, however some of their settings, like in the top row of photos, are different. Oh Facebook!
Thanks for another excellent Facebook video, Pat! I was toying with the idea of creating Facebook pages for each of my niche sites, but I’d definitely have to hire a VA then to help me maintain those AND the actual sites, but the rewards seem worth it.
Pat – brilliant! This is soooo what I’ve been looking for and you teach it in very clear simple steps. Facebook allows people to brand without the bucks and it’s a ‘must do’ for anyone looking to make online a home for their marketing presence. Stellar post my friend!
Wait until Pat shows you how to run 100′s of wordpress websites from one dashboard and update them all with a click of a button…
Thanks for sharing this great guide with us! This is brilliant and I will definately try it.
Awesome tutorial, Pat! Can’t wait to implement it. By the way, noticed you joined instagram. It’s awesome!
Great post and great video Pat.
Very useful once again.
Cristina
Hi Pat and All,
First off, really interesting post about Facebook. I’m definitely going to give this a try.
Pat, or anyone: Do you have any suggestions for keyword tools? Market Samurai is so flaky and not bringing back data like, SEO competition! I’m really looking for another good tool. Any suggestions? Hell, I’d pay more for Market Samurai, or an ongoing subscription, if they could keep it stable.
Thanks for this information Pat,
I will be looking into this information so I can make my Niche site much more informative and user friendly. Thanks for the opportunity to brand with Facebook , and showing us they way to do so.
This is great. Thanks so much for the PSD. I’ve yet to start creating a landing page for my site’s fan page and this is a perfect starting point.
Thanks!
Pat – Tip for all that do Not have Photoshop – you can also use the free GIMP which is free to download
True Monja, thanks! Although I believe the slicing feature in the PSD file I created won’t work in Gimp. Still will be useful through if imported.
I have another tip. You can use Pixlr (http://pixlr.com/)
It’s free and you can use your .psd file
Great post, it was only last week when I went to re-read your previous post about setting up a landing page and was hoping you would post a revised version up soon.
Great work with this, i’ll try it out for my new site!
Colin
Great informative post Pat. What software did you use to show those snapshots of your webpage? Is that photoshop or camtasia? Saved up some money and trying to invest it in some software products, thanxs.
Hi Pat,
Thanks for this info. What tips do you have for creating traffic to your facebook page and then converting that traffic to traffic for your website…
I have not found any posts specifically on this. If you have one what is the link?
Here’s one I set up over on Facebook. Pardon the ugly link – just set it up and don’t have 25 likes yet (hint –
). Got a few ninjas in there, but needs refining:
http://www.facebook.com/?ref=home#!/pages/Extra-Income-Method/171119032952767
Another winner!
Hi Pat:
I just saw your post on a ShareBar forum asking about setting up your Facebook Like button in your ShareBar. (also noticed that they never answered you!) Looks like you figured out the coding issue, but I’m wondering why you are choosing to use ‘Like’ button vs the option they give for a FB Share button. I just know this is a calculated move.
I’ve just added the Sharebar to my blog, and may want to make the same change. I’m also interested in adding a BizSugar button since my blog is about startups, entrepreenurs, small biz etc. have you considered a BizSugar button?
thanks!
Kathy
They essentially do the same thing, but I’ve found that “likes” get pushed way more than “shares” nowadays. It’s because that’s what Facebook calls it now anyways (liking fan pages, liking comments, liking etc.) Not sure what BizSugar is or does. What are the benefits?
Pat! superb work here on SPI, you are a wealth of relevant information! Just one question. Is there a reason why the PSD template file for FB branding is set to 72dpi?
72dpi means a significantly smaller file size, and when images are drag and dropped into it the scale will be friendlier and you won’t have to enlarge regular sizes images and compromise clarity. You could go higher if you wanted to, but this is significantly more universal. Cheers!
Thanks for another great post, Pat!
What I love about your posts is that every single one contains a golden nugget, an actionable item which can help us. Thanks.
Following your advice, I was able to build a sizable Facebook Fan site (>5K fans), however the difficulty that I am having is keeping my Fans engaged.
Since you’re doing such a great job in fan engagement category – any advice?
http://www.facebook.com/kidsiphoneapps.net
Hi Pat,
I really like the use of the banner images. I had done something similar to this before you had created this tutorial. However, it was your SPI Facebook page that gave me the inspiration for it.
Mine is: http://www.facebook.com/matthewhooper.com
– Matt
Hi Pat, I like the tutorial, I don’t have photoshop…do you have any suggestions on how to do the same thing if you don’t have photoshop, I have microsoft, I’m not tech savvy, but I can follow directions…what can I do
Thanks Kim
This is a useful tutorial Pat. I’d be the first to admin I absolutely suck ass with Facebook and this is a tutorial i’ve been looking for throughout the web yet haven’t found an up to date one related to what I want to acheive.
I will have a listen to your tutorial and feedback accordingly. Just wanted to say thanks for posting this as its something I need to get right for my web ventures.
Thanks
Ryan
Pat, the PSD files I downloaded from you produce graphics with a subpar resolution – has anyone else had this problem?
Otherwise, very helpful, thank you! See mine (so far!) here: http://www.facebook.com/pages/ECSimplified-Infant-Potty-Training-Made-Easy/106158642799047
Andrea
This is just what I needed. Thanks pat. Always helpful
Thanks Pat for the Photoshop download link…I really enjoy using it.
Very good video Pat, very useful and filed with information. Before I see this video I thought tat you will need a lot of work to customize your Facebook page, but now I think different. Thanks for sharing this.
Pat, You rock the house as usual. Thank you for the time you take to explain these cool tricks.
I had an issue with the PSD file. I clicked on the PSD file download link, but when I tried opening it in my CS5 Photoshop for Windows, it said it was “not a valid Photoshop document”. There shouldn’t be a difference between the Mac version and Windows, right?
unzip it
That was a great tutorial. Maybe I should start doing my own designs than having my brother in law do them for me.
This is a great post. Are you finding Facebook is better/worse than Twitter, or do you find they’re all valuable in different ways?
Hi Pat,
Thanks for this post. I haven’t known how important and simple it is to brand our facebook profiles and how much it can do to us in terms of traffic. Also thanks for your advice that newbies try free blogging sites like Infobarrel, I have learned a lot from that advice.
Thanks for the tip – I read your post and straight went and implemented it on my business facebook page…
Hey Pat this is a awesome tutorial i have been learning how to market blogs or services through facebook a while and i am fed up of this facebook page how to edit add banners etc. and make it attractive and also professional. yes as mentioned i dont have photoshop and also i dont know how to use it also. may be i have to take my friends help for this.
I’m not sure I understand when to use this method and when to use the iframe/html method or do you use both and, if so, which do you start with??
Hey Pat, thank you very much for the PSD-File. I was looking for something like that for weeks! Great work!
Great post,I will read your post time to time.thank you!
I love the IDEA of this, but being a photographer, I’m constantly uploading albums of 150+ pictures. It’s too much time to go through and click the little x 150 times just to get my customized images up at the top again. I’d be doing this repetitively multiple times a week.
I’d definitely look into it for a page that didn’t specialize so much in pictures though!
Actually, Jaimie, I recently learned that if you tag your own page within those 5 images, they don’t disappear anymore when new photos are uploaded
I have one of the top facebook profiles: http://www.facebook.com/profile.php?id=100000970694984 Correct me if I am wrong, Pat?
Hey Pat, I was able to use this to create and make my page much better than what it was. Your video was very descriptive and easy to follow. Thanks! Here is a sample of my page on my 1st try.
http://www.facebook.com/generationlosers
wooow It is a beautiful post. I’ve tried it! thank you
Thanks that has really helped me. The code works like a charm!!
Here is a very good example of Facebook Mashup with fans-only iFrames Page Tab Reveal.
http://www.facebook.com/Megalopes
That video tutorial was soooo well done; very clear video quality, easy to follow instructions. I’m going to try it out now, lol! And your site is a really nice clean design too. I subscribed
Question! Do you have the dimension tweaks to do this on one’s G+ “About” page? Thank you!
Thank You very much for such an informative post. I have made a Brand Page for my products using your PSD file. Kudos to you..
http://www.facebook.com/CosmoLampShades
Hey Pat, do you know how to create a welcome page now? Looks like Facebook doesn’t allow it anymore.
pat – what do you use to do the online pen / drawing effect in your how to create a branded fb page video?
thx p
I’m trying to build a brand facebook fan page. Your design is fantastic! Thanks for share!
Thanks for the tip on the online photo editor Pixlr. I was able to use it to create my new website logo and wall pics. It doesn’t have the image slicer feature so I had to work around that. But it was better than having to pay for Photoshop to do one project for now. I’m loving your tips and still working with them to build my site, and possibly more! Thanks so much!
hi pat I havwe an online business for fashion and beauty. but I want to learn how to link an image in my facebook page then when you click it, it will open the other window. I kdnt know how it is exactly called bec. I am not that good in html, link, buttons or navigation to make my online page more beautiful and presentable at the same time. hope you can help me. you can send your reply to my email. thank you
These are some great tips. We have actually implemented a few of these tips and already got a few thousand fans and now to do all of these tips.
i want to know about image slicing for facebook banner please guide me
Hi, every time I refresh my page, the order of the 5 photo strip changes, how do I get this fixed?
WOW! That’s great! It is making my page more beautiful!
Great site, it’s very helpful! I do have one question though:
I’ve installed the app you recommended. I’ve used a free image hosting site that was also recommended. When I insert the code into the iframe and click save, then view tab as, my pictures are cut off – I’d say about ¼ of the image is missing. But that’s not how they look on the image hosting site. The image is less than 520px wide, so it’s not a size issue as far as I know. I viewed my facebook page and sure enough the image is cut off there too. I know I must be doing something wrong, but I don’t know what that is! Any ideas? I really appreciate your help!
Hi Pat,
I’ve tried to follow your tutorial and tips to create the profile image and banners but the 5 images/small banners above wall post just wouldn’t show up. Where did i go wrong? I have tried to re-do it a couple of times but still the 5 images wouldn’t appear.
Appreciate your input.
Thanks much…
Thanks For Providing Us Branded Facebook Page Profile Banner Images. For Those Who Enjoy Statuses On Facebook, We’re Just Trying To Make New Status And Hope You Are Really Likes It. And You Can Also Get Latest Banners From Facebook Banners.
Hey nice concept i have been trying to figure out how to do that for our facebook page to no yield
It is a nice tip on branding facebook pages. I liked the video tutorial very much. Thanks for sharing the great ideas.
Excellent post Pat !
It’s so easy to do with your video + psd.
You’re simply the best Pat.
Should you wanna check my FB page, here you go
http://www.facebook.com/JeCommenceABloguer
Take care
Jerome
hi plz tell me (plz plz) which photoshop and plz telll me its full version name
Should be CS3, but if you need an earlier version let me know.
Help me,,,,….,,,,….,,,,…,,,,
Well, These are some great tips. We have actually implemented a few of these tips and already got a few thousand fans and now to do all of these tips.
Well, Great site, it’s very helpful! I do have one question though:
I’ve installed the app you recommended. I’ve used a free image hosting site that was also recommended, thanks mannn
I used the template to start a branded page. I have some more creative things to do with it. I tried to find you on FB, but it said your page was blocked for being spammy? Thought you should know.
This is an amazing tutorial. I just did this for my fitness fan page (http://www.facebook.com/NintemanFitness) and it worked like a charm. That PSD you provide just ROCKS. Thank you for all that you do. I am an avid reader and follow and still find stuff like this that just blow me away!
Hi Pat,
Love the video tutorial. I have downloaded the Photoshop file and opened it in CS4.
It opens fine – but I can’t drop any image into the layer to edit?
Any help would be V appreciated.
Yo. You can keep a certain order of your banner by tagging them BACKWARDS!
So you upload your banner, then you tag the last image in your banner and work your way to the first. Now theres nasty people out there who know this and will begin tagging your profile in random pictures. Solution? Simply view your profile and click the (x) that appears as you hover over the unwanted image. Good Hunting
Hey Pat! Thanks for this. It gave me the one snippet of info that I needed. After spending about half an hour or more getting frustrated because my banner segments weren’t loading in the correct order, I came across your video and you told me why. I hadn’t realised that the pictures are randomised. Pretty dumb system of Facebook’s, huh? Anyways, thanks for that. I’ll pass the video on.
Thanks so much for the PSD file Pat. It took me under 20 minutes to create a pretty awesome graphic with it. Thanks for all you do!
Hey thanks for the great post and the psd file but im having trouble loading pics on to the file can any one help with this thanks!
Thanks so much so the clear and easy to follow tutorial. The only problem that I’m having is that I have Photoshop Elements 8 and the template does not come up with the grids or guides for the images. Is there a work-around? Thanks again!
Ahh, sorry about that – wasn’t built for PE8 – you may just have to copy paste an image of your facebook page into PE8 (like a screenshot) and then create the page elements (no pun intended) over your Page in PE8 and export them from there and upload them manually one at a time.
It doesn’t work to me… even if I tagged in reverse order they mix every time I update the page
https://www.facebook.com/Buzzsetters?ref=tn_tnmn
Hi Buzzsetters – the pictures are randomized no matter what you do, but only on a Facebook Page. On a profile page (pre-timeline) it stays in the right order.