Advertisement

Power A Facebook Page Using Wordpress

by

In this Premium tutorial I'll be showing you how you can power a Facebook page using Wordpress as a CMS. I'll take you through the design styles and coding, before showing you how to install and implement the whole thing into Facebook with ease.


Why Choose a Blog As a Facebook Page?

If you've reached this stage of the tut then I'm presuming that most of you already have or are intending to have a Wordpress setup as your website. The benefits of using Wordpress as a content management system can often far outweigh those of a custom written one. For the majority of sites Wordpress is more than substantial for their needs and with a little bit of clever programming can be extended to create more complex sites from apps to full eCommerce sites.

Most web-savvy folk are aware of the benefits of having a Facebook page for a brand, a portfolio or a business. If you are't then I'm guessing you won't be reading this..

Facebook describe:

A Facebook Page gives a voice to any public figure or organization to join the conversation with their audience on Facebook.

What better way to engage in conversation with your audience than incorporating a blog into your Facebook page, and what better blog to incorporate into your Facebook page, than the king of blog CMS' Wordpress?

By incorporating a blog into your page you are able to create a steady regular news stream for your audience, gauge feedback, ultimately keep people revisiting your page and add another platform to your online presence.


The Structure

Before we get stuck into the tut, I just thought I'd give you a quick overview as to how this all fits together. There are basically three entities within our Facebook page blog app that we need in order for it to work. They are:

  • A Facebook Page
  • A Facebook Page App
  • A Wordpress Setup on our own domain and hosting

All of these three entities need to be able to communicate with each other. We can achieve this by firstly creating our Wordpress blog site on our hosting/server. What we're building is nothing particularly special but simply a specially adapted Wordpress theme that will be designed to fit the 520px constraints of a Facebook page. This could in effect run as its own website, albeit a very thin one at only 520px wide.

The second step is to tell our 'Facebook page app' to pull in the data from our own domain into Facebook.

Lastly we setup our Facebook page to display our Facebook app, which is ultimately the Wordpress site.


Setting Up a Facebook Page

Now that you have a better understanding of how all the pieces of this jigsaw fit together, let's jump in and start getting set up.

The first thing that needs to be done is to set up a folder on our own hosting/server that is going to be holding the Facebook page content (ie Wordpress). I've setup a folder on mine called "wordpressfacebookpage” but you can call yours whatever you like. Just make sure that you know the url for this folder as we'll need it in the next step of the tut.

So let's jump straight in and set up our Facebook page. If you're lucky you'll be able to reserve the direct name of your brand, but if for whatever reason your chosen name has gone then it can often be a good idea to perhaps add another word to your brand name. Some pages sometimes opt for adding words like "Official” to the end of their page name but it's entirely up to you in what direction you want to take your page name.

Firstly we need to create a Facebook page which can be setup by going to https://www.facebook.com/pages/create.php

Choose the category that best suits your page and enter the form fields. Then follow the three steps and, upon completion, you will have created your Facebook page.

We now have our Facebook page setup. It's time to set up the Facebook app that will act as a custom tab and allow us to bring our hosted Wordpress blog into our page.

To set up a new app you'll need to login to Facebook and navigate to the Facebook developer apps. You'll then need to select the "Create new App” button that is situated in the top right hand corner of the page. You will then be asked to enter an 'app display name' and 'app namespace'.

The app display name is the name that will be displayed to your users and the 'app namespace' is the name that will be given to your page in Facebook's open graph.


Once you've filled in these details it should generate your app/page and you'll be taken to the app settings page where you should be able to see your unique 'App ID' and 'App secret' keys. Keep a note of these as you will need these later. It's here where you can also choose a category that is most relevant to your page.

Next, navigate to the lower part of the app settings page and you should see a title "Select how your app integrates with Facebook”. Select "Page tab”. This will then expand and you should be presented with four fields to fill in.

  • Page tab name - This is the user facing title of your app.
  • Page tab url - The url on your hosting where your app is stored and where the content will be pulled in for your Facebook page.
  • Secure Page tab - This is the same as page tab url except you should use 'https://' instead of 'http://'.
  • Page tab edit url - Sometimes you may want to have an admin section to your site where you can edit your content directly in Facebook. If you were to do this then you would put the admin section url here. In our case this isn't necessary, as we wont be editing blog content from within Facebook, but rather from a standard website.

We're almost done with setting up the Facebook page and app, but before this is complete we need to do one last thing: tell our Facebook page that we want to display the 'Facebook page app' as a tab on the Facebook page. To do this we need to enter a url into our address bar.

Facebook Page administrators can add your app directly to their Page by navigating to the following url. To this url you need to add your 'APP ID' and the URL to where your Wordpress is hosted on your domain https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL so for instance in my case this would be https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=https://www.aaronlumsden.com/tuts/wordpressfacebookpage


Your app ID can be found on the settings page of your 'Facebook page app'.

If successful then you should be directed to an 'add Page Tab' screen. If you find that you get an error then ensure that you haven't got a '/' at the end of your url. From the 'Add Page tab' screen you need to select the Facebook page that you would require the tab(blog) on. Once you've selected your required page it should then redirect you to your hosted page on your own domain.

Now navigate back to Facebook and from your main Facebook landing page (the one with your main news stream on). Select the 'page' (from the sidebar) that you created earlier. Once on the page head towards the top right hand corner of the page and select the 'edit page' button.

Here you will find the 'settings' for your page. It's from here that you can change the 'default landing page' to your 'Facebook page app'. This will then default to that tab whenever anybody arrives on your page. Once you've done this and filled in any other settings that you feel relevant then you can click on 'view page' in the top right hand corner. Select the tab in the left hand sidebar and you should be able to see our 'hello world' sample page within Facebook.

Please note it can appear a little confusing at first as the default landing tab only appears as the default landing tab to ourselves when we are logged out of Facebook..


That's it! We're all set up pulling in data from our domain into our Facebook page! All we need to do now is create a Wordpress theme that will fit within the 520px constraints of our Facebook page.


Creating a Style Set For Our Page

Before we begin coding or designing our Facebook page blog, it can often be quite useful to think about a style set for our design. Style sets can include colors, patterns, spacing and general rules to stick to so that our design is unified. Not only will this give a consistent look to our blog but it will also breathe familiarity into our design which is often subconsciously welcomed by users. It also gives the benefit of making our elements reusable, meaning that if we ever need to add a new module or page to our site, we can easily do this by using elements that we have already created.

If you download the .PSD accompanying this tutorial you can see some of the style sets that I have opted for in my design. Some of these are:

  • Color theme - Here I've decided to use four main colors and to use them in specific elements in my design with slight variations of the colors to be used on gradients.
  • Fonts - The font used throughout is 'Droid Sans'. With various sizes used for different text amongst the site. The font is a google web font and is available here http://www.google.com/webfonts
  • Page title - I have opted for a blue bar that will display the title or the name of the post on every page.
  • Posts - Will have an inset black background around each post to highlight them.
  • Single Page - All single pages will have a black background to highlight the content.

Structure Of the Wordpress Theme

Now is probably a good time to show how our Wordpress theme is going to be structured. The site is going to be based on five main templates. These are listed below:

  • Category Page - This will be the page that lists all our blog posts from each category.
  • Front Page - As the title of the page suggests, this is our landing or home page.
  • Page - Twitter.
  • Page - This is the standard page template that will be used for all general pages.
  • Single - This is the single blog post page.

We'll code the front-page up firstly using HTML/CSS and dummy content before moving them into into Wordpress and bringing in the dynamic data.


Step 1: Setting Up Our Document

To begin with we create the standard basis for our html document starting with the HTML5 doctype. I then include the path to my CSS file, which we'll be creating a little bit later on. In this we include our CSS reset which is basically a stylesheet to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings etc. I'm bringing mine in from Yahoos UI library.

Below that I include the 'Droid Sans' font which comes courtesy of Google Web Fonts. More often that not I tend to use a wrapper, so I tend to always include a div with a class of "wrapper" whenever I'm setting up my document.

Lastly, you'll notice a conditional comment bringing in the latest HTML5 shiv script if necessary. Put simply, the HTML5 shiv (or shim) helps IE in recognizing and styling HTML5 elements.

 
<html> 
<head> 
	<title></title> 
 
	<link rel="stylesheet" href="css/style.css"> 
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> 
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> 
	 
	<!--[if lt IE 9]> 
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
	<![endif]--> 
 
</head> 
	<body> 
	 
		<div class="wrapper"> 
		</div><!--End Wrapper--> 
 
	</body> 
 
</html>

Step 2: Navigation

Next we'll create our main navigation menu bar. This is an unordered list with each list item having an anchor tag that will allow us to navigate around. I give the 'ul' a class of 'nav' and looking at my Photoshop design I can also see it has a gradient, so later on I'm going to create a reusable standard css class of "gradient". So in the meantime I'll add a class of "gradient" to the ul. Place this block of code within the 'wrapper' div.

 
       <ul class="nav gradient"> 
			<li><a href="index.html" title="">Home</a></li> 
 
			<li><a href="category.html" title="">Blog</a></li> 
 
			<li><a href="" title="">Twitter</a></li> 
 
			<li><a href="" title="">About</a></li> 
 
		</ul><!--End nav-->

Step 3: Main Content

The main content, the bit that sits below nav also has a gradient. So we'll create a div and give it two classes. The first 'mainContent' and the second one "gradient". We're going to use dummy content for the time being. For the image I use an image place holding service flickholdr.com which is a quick and easy way to get an image of any size and can save a heap load of time. For the dummy text we use some good old fashioned lorem ipsum.

The image within the 'mainContent' div is going to link through to the featured post so we wrap it in an anchor tag. We will also do this with the h1 tag which will be our title. Again this is so that it can link through to the featured post.

Just before the closing 'div' tag for the 'mainContent' div we add another and give it a class of 'clear'. We can see from the Photoshop mock up that the image is floated left to the text. The reason why we add this class of clear is because we will clear the float after the text. If we were to leave this div out then you'd see some strange things going on with your design. You can of course also use a clearfix technique, which relies on generated content instead of additional markup.

 
       <div class="mainContent gradient"> 
 
			<a href=""><img src="http://flickholdr.com/276/160/sun" alt="Placeholder image"></a> 
			<h1><a href="">A Cool Headline</a></h1> 
			Placerat mid pulvinar scelerisque magna magna, tempor porta turpis lacus, placerat  tempor porta turpis lacus  pulvinar scelerisque ?  
 
 
			<div class="clear"></div> 
 
		</div><!--End Main Content-->

Step 4: Social Bar

The next step is to write or copy the following block and place it after the 'mainContent' div that you just created.

 
<div class="bar gradient"> 
 
	<h2>Follow Us</h2> 
 
	<ul class="social"> 
		 
		<li><a class="gradientBlue sprite twitter" target="_blank" href="http://www.twitter.com/aaronlumsden">Twitter</a></li> 
 
		<li><a class="gradientBlue sprite google" target="_blank" href="https://plus.google.com/102011061703461558930/posts">Google +</a></li> 
 
		<li><a class="gradientBlue sprite rss" href="">RSS</a></li> 
 
	</ul> 
 
	<div class="socialstats"> 
 
		<h2>Followers 100 Likes: 1</h2> 
 
		<a class="gradientBlue sprite next" href="">Next</a> 
 
	</div> 
			 
</div>

Step 5: Featured Pages Section

The featured pages section code is as follows. It's a div with a class of 'featured' that contains an unordered list similar to our navigation. This time give you the ul a class of 'featuredUl'. This 'featured' div and its content goes directly after the social bar.

 
		<div class="featured"> 
 
			<ul class="featuredUl"> 
			 
				<li class="gradient"><a href=""><img src="http://flickholdr.com/116/89/sun" alt="Placeholder image"></a>  
						<a href="" title="">Competitions</a></li> 
 
				<li class="gradient"><a href=""><img src="http://flickholdr.com/116/89/sun" alt="Placeholder image"></a>  
						<a href="" title="">Blog</a></li> 
 
				<li class="gradient"><a href=""><img src="http://flickholdr.com/116/89/sun" alt="Placeholder image"></a>  
						<a href="" title="">Twitter</a></li> 
			 
			 
			</ul><!--  End FeaturedUl--> 
		 
		</div><!--End Featured-->

Step 6: Footer

The code for the footer is really simple. We can see from the Photoshop mock up that it's the same size as the social bar, because of this we can use the same CSS styles for the div.

 
		<footer class="bar gradient"> 
 
			&copy; 2012, All Rights Reserved! 
 
		</footer><!--End Bar-->

Step 7: Setting Up the CSS

In order to make life easier for ourselves, whenever it comes to updating our site, it's important to give our CSS some form of structure. I've split my CSS styles into 4 sections and at the top of the stylesheet given them a content introduction. You can do this by adding them as a comment like this:

 
/*----------------*/ 
/*	1. General 
	2. Navigation 
	3. Main Content 
	4. Single Post Styles 
/*----------------*/

Step 8: General Styles

Note: At the end of March 2012 Facebook updated the way Pages are displayed; they now comply with the Timeline interface. As a result, the dimensions pointed out below are a bit narrow. Instead of a 520px wide wrapper, you'll be better off using 800px to take advantage of the available space.

Below I've set up some general styles. These are mainly used for fonts and font styles, colors etc, so that the text across our theme is standard. We also give the wrapper a width of '520px' as this is of course the maximum width that Facebook allows for our page. Responsive Web Design is beyond the scope of this tutorial, so we'll be working with fixed units of measurement.

 
html{ 
	-webkit-font-smoothing: antialiased; 
	font-family: 'Droid Sans', sans-serif;	 
} 
body{ 
	color:#cdcdcd; 
} 
.wrapper{ 
	width:520px; 
} 
.clear{ 
	clear:both; 
	display:block; 
} 
p{ 
	font-size:12px; 
	line-height:17px; 
}

Step 9: CSS3 Gradients

I'm sure you've all heard of and are using CSS3 gradients by now. When I first started using them I was frustrated at how difficult it was to get the exact match in gradient as my Photoshop images. Then I came across this CSS3 gradient generator. This really is a useful tool as it allows you to save your Photoshop image gradients as images, upload them and then accurately matches the gradient in CSS3 code. Below is the code that it generates. Although it may seem a lot, a lot of it is saving you the hard work of making it cross browser compatible.

 
.gradient{ 
	background: #464646; /* Old browsers */ 
	background: -moz-linear-gradient(top, #464646 0%, #3c3c3c 2%, #363636 3%, #282828 48%, #272727 95%, #262626 97%, #0d0d0d 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#464646), color-stop(2%,#3c3c3c), color-stop(3%,#363636), color-stop(48%,#282828), color-stop(95%,#272727), color-stop(97%,#262626), color-stop(100%,#0d0d0d)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #464646 0%,#3c3c3c 2%,#363636 3%,#282828 48%,#272727 95%,#262626 97%,#0d0d0d 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #464646 0%,#3c3c3c 2%,#363636 3%,#282828 48%,#272727 95%,#262626 97%,#0d0d0d 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #464646 0%,#3c3c3c 2%,#363636 3%,#282828 48%,#272727 95%,#262626 97%,#0d0d0d 100%); /* IE10+ */ 
	background: linear-gradient(top, #464646 0%,#3c3c3c 2%,#363636 3%,#282828 48%,#272727 95%,#262626 97%,#0d0d0d 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#0d0d0d',GradientType=0 ); /* IE6-9 */ 
} 
.gradientBlue{ 
	background: #738fc7; /* Old browsers */ 
	background: -moz-linear-gradient(top, #738fc7 0%, #6885c2 13%, #607bb8 35%, #4a67a4 77%, #44619d 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fc7), color-stop(13%,#6885c2), color-stop(35%,#607bb8), color-stop(77%,#4a67a4), color-stop(100%,#44619d)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* IE10+ */ 
	background: linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fc7', endColorstr='#44619d',GradientType=0 ); /* IE6-9 */ 
}

Step 10: Navigation Styles

Now it's time to create the styling of our navigation elements. These include the main menu nav, the pagination and our social links. By looking at the values from our Photoshop PSD we can see the exact values that we need to put through css. Some of these properties include box-shadow, border, font-size, colors, width and height and many others. Below I demonstrate how the CSS3 box-shadow can be translated from Photoshop to the CSS3 property.

Our three types of nav all use the same elements and share some CSS3 properties. The biggest thing to note here is to display the li as 'inline-block' this will make the menu items sit next to each other as opposed to below. You should also add the width and height of these to the anchor tags as opposed to the li's. Doing it this way will ensure that the whole button is pressable and not just the text of the navigation. You'll also notice the pseudo class of '.nav li:nth-child(4) a'. This grabs the 4th list item anchor of the main menu nav and adjusts that item's width by 1px to make the elements all fit as equally as possible within the 520px page limit.

Here you can see the CSS for the navigation:

 
.nav{ 
	position:relative; 
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	-moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	z-index:2; 
} 
.nav li{ 
	display:inline-block; 
} 
.nav li a{ 
	color:#cdcdcd; 
	display:block; 
	width: 129px; 
	height:63px; 
	margin-right:-5px; 
	font-weight:400; 
	font-size:19px; 
	text-align:center; 
	line-height:63px; 
	text-decoration:none; 
	border-right:1px solid #000; 
	border-left:1px solid #000; 
} 
.nav li:nth-child(4) a{ 
	width: 128px;	 
} 
.nav li a:hover,.navactive{ 
	background: #4c4c4c; /* Old browsers */ 
	background: -moz-linear-gradient(top, #4c4c4c 0%, #3b3b3b 55%, #333333 89%, #708bc4 89%, #6682c0 97%, #6682c0 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(55%,#3b3b3b), color-stop(89%,#333333), color-stop(89%,#708bc4), color-stop(97%,#6682c0), color-stop(100%,#6682c0)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #4c4c4c 0%,#3b3b3b 55%,#333333 89%,#708bc4 89%,#6682c0 97%,#6682c0 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #4c4c4c 0%,#3b3b3b 55%,#333333 89%,#708bc4 89%,#6682c0 97%,#6682c0 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #4c4c4c 0%,#3b3b3b 55%,#333333 89%,#708bc4 89%,#6682c0 97%,#6682c0 100%); /* IE10+ */ 
	background: linear-gradient(top, #4c4c4c 0%,#3b3b3b 55%,#333333 89%,#708bc4 89%,#6682c0 97%,#6682c0 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#6682c0',GradientType=0 ); /* IE6-9 */ 
	border-right:1px solid #000; 
} 
/*Pagination*/  
.pagination{ 
	padding-bottom:15px; 
} 
.pagination li{ 
	display:inline; 
	margin-left:5px; 
} 
.pagination li a{ 
	text-decoration:none; 
	color:#A2A2A2; 
	font-size:12px; 
} 
.pagination .active{ 
	font-weight:bold; 
	color: white; 
	font-size:14px; 
}

Step 11: Image Sprite

Our design for the page uses very few images (apart from the blog images). All the images that I use for things like icons such as in the social bar have been made into an image sprite. Image sprites are a must, especially when dealing with large scale sites where the number of calls to the server need to be reduced. Each time an image is loaded on our web page it makes an http request to the server to get that image. By putting them in one image, the server only needs to be called once.

It's also a must when you are using images for buttons. If you don't use this method then you may experience a delay when you first load your site between the normal state and the hover state. If you'd like to find out more about image sprites and how they can help then you can find out more on this article on Nettuts+.

 
/*Social Links*/  
.social{ 
	float:left; 
	margin-top:9px; 
	margin-left:20px; 
} 
.social li{ 
	display:inline-block; 
 
} 
.social li a{ 
	display:block; 
	width:29px; 
	height:29px; 
	margin-right:10px; 
	text-indent:-9000px; 
} 
.sprite{ 
	background-image:url(../images/sprite.png); 
} 
.social li a.twitter{ 
	background-position:0px 0px;	 
} 
.social li a.google{ 
	background-position:-39px 0px;	 
} 
.social li a.rss{ 
	background-position:-78px 0px;	 
} 
.social li a.twitter:hover{ 
	background-position:0px -29px;	 
} 
.social li a.google:hover{ 
	background-position:-39px -29px;	 
} 
.social li a.rss:hover{ 
	background-position:-78px -29px;	 
}

Step 12: Main Content and Bar Styles

The main content forms the top part of our homepage and the background on every other page. We start by giving it "padding:15px” to allow the page content to sit away from the edges of the page. We then concentrate on the image, this is notably referring to the large image on the homepage. We set the margin-right on that to 15px so the text to the right hand side can site neatly next to it. Before finally adding some styles for the h1 title text. We also add the styles for the social bar and its containing text.

 
/*---------------*/ 
/*	3. Main Content 
/*---------------*/ 
 
 
.mainContent{ 
	padding:15px; 
} 
.mainContent img{ 
	float:left; 
	width:276px; 
	height:160px; 
	margin-right:15px; 
} 
.mainContent h1,.mainContent h1 a{ 
	font-size:17px; 
	color:#fff; 
	font-weight:bold; 
	text-decoration:none; 
} 
.mainContent h1 a:hover{ 
		text-decoration:underline; 
} 
.bar{ 
	position:relative; 
	width:100%; 
	height:50px; 
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	-moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .5); 
	z-index:2; 
} 
.bar h2{ 
	font-size:15px; 
	color:#a2a2a2; 
	line-height:49px; 
	font-weight:bold; 
	float:left; 
	margin-left:15px; 
} 
.bar p{ 
	line-height:50px; 
	margin-left:15px; 
}

Step 13: Featured Pages & Social Stats

The Featured pages section shares similarities to our navigation elements in that it uses the same formatting as an unordered list. The only difference is that this time we put an image in the '<li>' as well as an anchor. To this we add a subtle box-shadow hover effect that appears to lift the image a bit when the user mouses over it. We then style our followers count and likes count.

 
/*Featured*/  
.featured{ 
	margin: 0 auto; 
	padding:15px; 
	padding-bottom:0px; 
	background: #738fc7; /* Old browsers */ 
	background: -moz-linear-gradient(top, #738fc7 0%, #6885c2 13%, #607bb8 35%, #4a67a4 77%, #44619d 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fc7), color-stop(13%,#6885c2), color-stop(35%,#607bb8), color-stop(77%,#4a67a4), color-stop(100%,#44619d)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* IE10+ */ 
	background: linear-gradient(top, #738fc7 0%,#6885c2 13%,#607bb8 35%,#4a67a4 77%,#44619d 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fc7', endColorstr='#44619d',GradientType=0 ); /* IE6-9 */ 
} 
.featured ul{ 
	margin-left: 1px; 
} 
.featuredUl li{ 
	display:inline-block; 
	height:125px; 
	padding:10px; 
	margin-bottom:15px; 
	margin-right: 5px; 
} 
.featuredUl li a{ 
	font-size:12px; 
	color: #CDCDCD; 
	text-decoration:none; 
} 
.featuredUl li a:hover{ 
	text-decoration:underline; 
} 
.featuredUl img{ 
	display:block; 
	margin-bottom:15px; 
	width: 135px; 
	height:89px; 
} 
.featured .bar{ 
	margin-bottom:20px; 
} 
.featuredUl li:hover,.post img:hover{ 
	-webkit-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3); 
-moz-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3); 
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3); 
} 
.socialstats h2{ 
	border-left:1px solid black; 
	padding-left:15px; 
	float:left; 
} 
.socialstats a.next{ 
	margin-top:9px; 
	display:block; 
	width:29px; 
	height:29px; 
	background-position:-116px 0px;	 
	text-indent:-9000px; 
	float:left; 
	margin-left:20px; 
} 
.socialstats a.next:hover{ 
	background-position:-116px -29px;	 
 
}

Step 14: Post Styling

Remember earlier how I said that by making elements reusable we are able to use them in a variety of ways and implement new features with ease? We've called the div 'posts' but the post section is actually used in different ways. It is used for both each individual tweets and the categories on our categories page. These are all really simply styled and adaptable. Say for instance if you wanted to add a comments section to the blog you could quite easily do this by using the 'posts' class in a similar way to the individual tweets. I've used the class 'single for the single 'post' template and 'page' template. The single then contains some inner styling for the text and lists.

 
/*---------------*/ 
/*	4. Single Post Styles 
/*---------------*/ 
.post{ 
	padding:10px; 
	margin-bottom:15px; 
	border:1px solid transparent; 
} 
.post img{ 
	float:left; 
	margin-right:15px; 
	width:116px; 
	height:89px; 
	border:5px solid #353535; 
} 
.post img:hover{ 
	border:5px solid #6682c0;	 
	cursor:pointer; 
} 
h1.title{ 
	color:white; 
	font-size:18px; 
	font-weight:bold; 
	padding-bottom:15px; 
	line-height:18px; 
} 
.post h1 a{ 
	display:block; 
	text-decoration:none; 
	color:#fff; 
	margin-bottom:3px; 
	font-weight:normal; 
	font-size:16px; 
} 
.post p{ 
	margin-bottom:15px; 
} 
.post h1 a:hover{ 
	text-decoration:underline; 
} 
 
.post span{ 
	display:block; 
	font-size:11px; 
	margin-bottom:5px; 
} 
.single{ 
	background-color:#1f1f1f; 
	-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, .6); 
	-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, .6); 
	box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, .6); 
 
} 
.single h2{ 
	margin-bottom:15px; 
} 
.single ul{ 
	list-style-type:square; 
} 
.single li{ 
	font-size:12px; 
	line-height:17px; 
	color:#A2A2A2; 
	margin-bottom:5px; 
	margin-left:30px; 
}

Step 15: Customize Your Template

Now that we have our styles in place it's up to you to experiment and play around with your own ideas. Don't just settle for the templates that I've included in this tutorial. You could, for example, include a gallery page, or a video gallery. The choice is up to you so that you can make your Facebook page suitable for your requirements.


Step 16: Installing Wordpress

For those who have not set up a Wordpress Theme before, I'll show you how to do that briefly now. For those who are wanting a more detailed explanation of the Wordpress install you can check out the official Wordpress installation documentation.

Firstly, you should head to http://wordpress.org/latest.zip and download the latest copy of Wordpress. Once you've done this copy the contents of this directory on to your web hosting where the Facebook page is going to point to. In my case this would be http://www.aaronlumsden.com/tuts/wordpressfacebookpage. Once the files have uploaded (this can sometimes take a few minutes) you should navigate to the directory you have just uploaded them to via your browser. You should then be greeted with the page below.

Click on the 'create configuration file'. You'll then be taken to another screen; click on the 'Lets Go Button'. It's here where you will enter your database details for your Wordpress site.


If your database connection was successful you should see this screen. Click the 'run the install' and fill in the details about your site that appear next.




Step 17: Setting up the Theme

Firstly, create a new folder and name it something appropriate for your theme. In my case Ive called it "aaronlumsden”. As a bare minimum for a Wordpress theme you need 2 files index.php and a CSS stylesheet called 'style.css'. You can copy these two files from the Twenty Ten theme and into your own theme directory, just deleting everything that isn't relevant.

This stylesheet must have a header in order for Wordpress to recognize it as a theme. A sample of the header, taken from the default Wordpress theme "Twenty Ten”, is shown below. You should change it with your details accordingly.

 
/* 
Theme Name: Twenty Ten 
Theme URI: http://wordpress.org/ 
Description: The 2010 default theme for WordPress. 
Author: wordpressdotorg 
Author URI: http://wordpress.org/ 
Version: 1.0 
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional) 
 
License: 
License URI: 
 
General comments (optional). 
*/

I also like to add a '300 x 225px' image so that we get a preview image of our theme in themes admin section. Save this image as 'screenshot.png' and add it into the folder.

Here is a sample of how the folder structure on the web server looks now:


Now create some more blank files. This will give us some idea of how much work needs to be done. Create the following:

  • category.php
  • front-page.php
  • page.php
  • page-twitter.php
  • single.php


Step 18: Setting Up Permalinks

In order to have friendly urls as opposed to not so pretty ones, in the admin section of Wordpress go to Settings -> Permalinks -> Custom Structure and add the following custom structure:



Step 19: Creating the Front Page

For those who don't know when creating a Wordpress page, each page is split up into sections, or in other words they're put into their own files; the main files being the following:

-header get_header()
-sidebar get_sidebar()
-footer get_footer()

We need to create a new file and then put all of the code for that section in that file. This makes it incredibly easy for us, so that if we need to change something in, for example the header, we only have to change it once in the header file. This is then reflected on each of the other pages instead of having to go through and change it on each and every page.


Step 20: Wordpress Sections

In this example I'll quickly show you how to complete the header. Our header.php file looks like this:

 
<head> 
	<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>  
 
	<meta charset="UTF-8" />  
  	<meta name="description" content="Learn how to create a Facebook Page using Wordpress!"/> 
	<meta name="keywords" content="Wordpress, Fan Page, Tutorial, Aaron Lumsden, webdesigntuts+, envato"> 
 
  	<link href="<?php bloginfo('template_url');?>/css/style.css" media="screen" rel="stylesheet" type="text/css" /> 
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> 
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> 
 
	<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
	<script src="<?php bloginfo('template_url');?>/js/js.js" type="text/javascript"></script> 
 
	<?php wp_head(); ?> 
</head>

I'll explain what some of the extra code in the above does

<?php wp_title(); ?> <?php bloginfo( 'name' ); ?> - This gets the title of the page or post (if it exists) and also the name of our blog, inserting it into the title of each page.

<?php bloginfo('template_url');?> - This gets the URL for our theme template directory, thus completing the paths we're pointing to.

<?php wp_head(); ?> This should go just before the closing head tag and is quite important. Without this the administration bar will not show up at the top of your site when you're logged in, and you'll see a strange looking gap at the top of your site.


Step 21: Creating the Featured Post

To create the main featured post on our homepage we simply create a new category called "featured” within our Wordpress site and then run a WP_Query to bring out the information from Wordpress. This is done as follows:

 
<?php $my_query = new WP_Query('category_name=featured&showposts=1'); 
					while ($my_query->have_posts()) : $my_query->the_post(); 
					$do_not_duplicate = $post->ID; ?> 
 
 
				<a href="<?php the_permalink();?>"><?php the_post_thumbnail(176,160);?></a> 
			<h1><a href="<?php the_permalink();?>"><?php the_title();?></a></h1> 
			<?php the_content('');?> 
 
 
 
				<?php endwhile; ?>

Step 22: Getting the Social Counts

Getting the social counts for our Facebook likes and twitter followers is also quite easy thanks to two handy functions (that you should definitely keep in your snippets box). Place the following code in the functions file:

 
//get number of twitter followers 
function twitter_count(){ 
	$tweet=json_decode(@file_get_contents("http://api.twitter.com/1/statuses/user_timeline/aaronlumsden.json")); // get tweets and decode them into a variable	 
 
	return $tweet[0]->user->followers_count; 
} 
 
//get number of facebook likes 
function get_likes(){ 
$likes = json_decode(file_get_contents("https://graph.facebook.com/352452174781395")); 
return $likes->likes; 
}

We can then echo the results within our front-page.php:

   
<h2>Followers: <?php  echo twitter_count(); ?> Likes: <?php echo get_likes(); ?></h2>

Step 23: Creating the Featured Pages

It's up to you what you choose to show in your featured pages section. I've opted to show 'competitions' which is a page, "blog” which will be my "category” titled blog and finally "Twitter” which will be a Wordpress "page” that will pull in my latest tweets.

If you look below you can see that we can pull in a single blog post thumbnail by adding <?php echo get_the_post_thumbnail(31, 'thumbnail'); ?> change the number "31” to the id of the post or page that you would like to display. You can also use the same principle to get the permalink for that post ie <?php echo get_permalink(31);?>

To do the same for a category this works in the same way but instead we use <?php echo get_cat_name(13) ?>. Wordpress by default doesn't let you assign images to categories, so for this we'll just hard code an image in. In the example below I've used an image place holding service to add some temporary images whilst I code up the site, but you'll want to add your own images here.

 
<ul class="featuredUl"> 
				<li class="gradient"><a href="<?php echo get_permalink(31);?>"><?php echo get_the_post_thumbnail(31, 'thumbnail');  ?></a>  
					<a href="<?php echo get_permalink(31);?>" title=""><?php echo getpagetitle(31); ?></a></li> 
 
 
				<li class="gradient"><a href=""><img src="http://flickholdr.com/116/89/sun" alt="Placeholder image"></a>  
						<a href="" title=""><?php echo get_cat_name(13) ?></a></li> 
 
						 
				<li class="gradient"><a href=""><img src="http://flickholdr.com/116/89/sun" alt="Placeholder image"></a>  
						<a href="" title="">Toy Story</a></li> 
 
 
			</ul><!-- / -->

Step 24: Creating the Single Page

The single page (single.php) is used to display whatever content is shown on a single blog post. This example is quite simple as it loops out the post thumbnail, the time the post was created and then the content of the post.

 
<div class="single post"> 
 
			<?php the_post_thumbnail(array(164,143));?> 
			<span>Posted <?php the_time('d M Y');?></span> 
 
			<?php if(have_posts()) : ?> 
 
			<?php while(have_posts()) : the_post(); ?> 
			<?php the_content(); ?> 
			<?php endwhile; ?> 
			<?php endif; ?> 
			 
 
 
			<div class="clear"></div> 
		</div>

Step 25: The Category Page

 
<?php while(have_posts()) { ?> 
			<?php the_post();?> 
 
				<div class="single post"> 
 
					<a href="<?php the_permalink();?>"><?php the_post_thumbnail(array(116,89));?></a> 
					<h1><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h1> 
					<span>Posted <?php the_time('d M Y');?></span> 
					<?php the_content('');?> 
					<div class="clear"></div> 
				</div> 
 
			<?php } ?>

Step 26: Creating the Single Page

The single page works similarly to 'single.php' except this time we don't loop out the image, just the content of the page.

 
<div class="single post"> 
 
			<?php if(have_posts()) : ?> 
			<?php while(have_posts()) : the_post(); ?> 
			<?php the_content(); ?> 
			<?php endwhile; ?> 
			<?php endif; ?> 
 
 
		</div>

Step 27: The Tweets Page

For the tweets page we're going to pull in our latest tweets. We do this using the category page as a template, but without the thumbnails. The tweets can be pulled using Twitter's api.

Add this to page-twitter.php:

 
<?php  
			   
			  $username='aaronlumsden'; // set user name 
			  $limit = 5; //Number of posts to show 
			  $i = 0; 
			  $tweet=json_decode(@file_get_contents("http://api.twitter.com/1/statuses/user_timeline/{$username}.json")); // get tweets and decode them into a variable					 
		?> 
 
 
		<?php if (!$tweet) {  
				echo 'Sorry Twitter is overloaded at the moment, please try back when theyre less busy!'; 
			} else {  
 
				foreach ($tweet as $item ) {  
 
					if ($i < $limit) { ?> 
 
						<div class="single post tweet"> 
						<p class="date"><?php echo explodetext($item->created_at);?> 
 
						<?php echo linkmytweet($item->text);?> 
 
					</div> 
 
					<?php $i +=1; 
					} 
				} 
 
				}?>

I'll explain what is happening above. We create a variable of 'aaronlumsden' as this is my twitter username. We then set a limit variable to equal the number of tweets that we want to display. We then set the variable of '$i' to zero - this is going to act as a counter for us to ensure that once we've reached the limit of five tweets it will stop displaying them. The $tweet variable makes the call to the twitter api and returns a json feed of my tweets.

Next we handle what happens if the $tweet variable doesn't exist. This is due to there being no response from the twitter api, usually owing to large traffic. If this happens we echo an error message. However, if we do get a response we then check to see if our variable of '$i' is less than our limit variable. If it is then we display the tweets. After each tweet displayed we then increment the $i variable by 1, which will allow $i to act as the counter.

It would also be a good idea to perhaps cache the twitter results so that it isn't making a call to the twitter api every time. This would also prevent problems with Twitter API Rate Limiting and over capacity issues. That is beyond the scope of this tutorial, but you can find out more by checking out How to Create an Advanced Twitter Widget.


Step 28: Active Menu States

By using a few simple lines of code we're able to highlight in the menu bar which page of our Facebook page we are on. It happens through an 'if statement' that checks to see if we're on the relevant page. If it is then we add a class of "navactive” to it. Add this in the 'navigation.php':

 
<ul class="nav gradient"> 
 
			<li><a <?php if (is_home()) { echo 'class="navactive"';} ?> href="<?php bloginfo('url'); ?>" title="">Home</a></li> 
 
			<li><a <?php if ( is_category('blog') || is_single()) { echo ' class="navactive"'; } ?> href="<?php bloginfo('url'); ?>/blog" title="">Blog</a></li> 
 
			<li><a <?php if ( is_page('twitter')) { echo ' class="navactive"'; } ?> href="<?php bloginfo('url'); ?>/twitter" title="">Twitter</a></li> 
 
			<li><a <?php if ( is_page('about')) { echo ' class="navactive"'; } ?> href="<?php bloginfo('url'); ?>/about" title="">About</a></li> 
 
</ul><!--End nav-->

Conclusion

So there we have it! Your very first Wordpress Facebook page. I hope you've managed to learn just how easy it can be to power your Facebook Page using Wordpress. There's no great mystery to it and once you understand how everything works, like anything, the penny drops and it becomes clear.


Of course you don't have to just settle for creating a Facebook page, you could of course use the same principles taught here to create another screen size specific website. It really is up to you what you can create and with a bit of imagination you'll soon realize that Wordpress can be used for so much more than just a blog management system.

Until next time happy designing and happy coding!


Further Reading, Links & Resources

Have a look through the 'functions.php' file and you can find some nice nifty functions that you'll be able to reuse over again in your Wordpress projects. I've commented them so that you can see what they do. Here's a list of the functions included within it:

  • Add menu manager
  • Add post thumbnails
  • Twitter count
  • Get Facebook Likes
  • Linkify Tweets
  • Explode text
  • Get page title

The great thing about Wordpress is the amount of information that is available to help us learn and understand it. One of the best resources is undoubtedly the Wordpress codex. Wordpress has so many features and functions that it would be near impossible to remember them all, but having a good knowledge of where to find things in the codex is handy.

You can find the codex at http://codex.wordpress.org/, or specifically the documentation on Wordpress functions.

Advertisement