Mac SEO Blog

This tutorial has been updated to reflect Facebook’s discontinuation of FBML. Check out the new create a custom Facebook page with MapDesign video tutorial.

If you are using Facebook to connect with customers, you should definitely make your Facebook page resemble your business. This can be done in various ways, but is most commonly done by using what is known as “Boxes.” These boxes are created using an app on Facebook which allows users to add HTML and CSS to their “boxes.”

This video tutorial is going to show you how you can create these boxes. This will make it so that users navigating through your Facebook page can land on your custom box and an image, or images that resembles your website, or promotional material.

The application used to create the interactive image is called MapDesign. Follow all the steps correctly, and your custom Facebook page will be up in no time!

Video Transcript

Many business owners know the importance of having a Facebook page to connect with current customers and reach out to future customers.

What I am going to show you in this video tutorial is how to make your Facebook page look like your website. I will show you how to setup your Facebook page from the very beginning, all the way to adding a section of your page that looks like your website. The end result will look something similar to this.

Rather than code this in HTML, we are going to take a different approach. Simply put, we are going to create an image map of our website and put it on our Facebook pages. The application we will be using to do this is called MapDesign which can be downloaded from ragesw.com

So the first thing we’re going to do is setup our Facebook page. Keep in mind that the interface of Facebook changes quite often so if what you see in this video differs from what you see in your web browser, don’t worry, it still should be pretty easy for you to figure out.

On the Facebook Login page you should see something that says “Create a page for a celebrity, band or business.” Click on the link to create the page.

You should see two options, one for creating a community page, and the other for creating an official page. We are going to use the Official Page option. Select the description which best describes the page you are going to create. For this demonstration, I will select the second option which says Brand, product, or organization. Then we will need to give the page a name. This can be almost anything you want it to be, but I would recommend making it very relevant to what your page is going to be about – for example, the name of your business. Lastly, you will need to check off that you are the official representative of this person, business or brand or product, and that you have permission to create the page. Remember, do not create pages for any of the above for which you do not have permission to do so. If you are able to check the box, your next step is to click the Create Official Page button.

You will need to login with your Facebook e-mail address and password, otherwise you will need to create a new account.

When you have logged in, you should be taken to your page, which should look pretty blank like this. In order to get our website’s image map on our Facebook page, we will need to setup the ability to add HTML to our page. To do so, click on the Edit Page button, and then select Apps. If you scroll down, you should see an app under the Apps You May Like section, called Static FBML. Click on the Add App button.

When the app is added, click on the Go To App button. You should be taken to a page that looks similar to this. Leave this page open for now, and we will be coming back to it shortly.

In order to get our website on our Facebook page, we’ll first need to take a screenshot of the webpage that we want to show on the Facebook page. To do this, Press Command and Shift and 3. Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.

Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 520 pixels. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.

Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.

The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.

So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.

Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to which we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.

When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. Make sure you have HTML/CSS selected. I am also going to keep the format, but I am going to change the Quality from High to Maximum. Then I will press next, and save the image map to my desktop.

The next thing we are going to do is upload the image file. You can upload it to your own server if you’d like, or you can use an image hosting website. I’m going to use ImageShack.com to publish my image. I’ll just press the browse button and locate my image, and then press the Upload Now button. Once the image is uploaded, I’m going to select the Direct Link, and copy it.

My next step is to paste this link in my address bar, and I will then click on my image and select Copy Image Address so that I can copy the address for the actual image.

Now I’ll open the index.html file for our image map with my HTML editor, and I’m going to replace this image location with the image location that I had just copied in our previous step.

Lastly, I’m going to highlight the code from Style Type all the way down to the final closing div tag, and I am going to copy it.

Now we can go back to that Facebook page that we left open, and we can paste this code in the large text box next to FBML. We’re gonna have to scroll down a bit, and we’re going to delete the closing head tag, followed by the opening body tag.

Then we’ll scroll up to the top and we can rename the Box Title to whatever we want. This is what will show up in the tabs section of our Facebook page.

Scroll back down and press the Save Changes button.

Now if you go back to your Facebook page, and click on the tab for your image map, you will see that the image is there, and if you hover your mouse over those certain sections that you made linkable, you will see that you can then click to be taken to those destination URLs.

And that’s how you customize your Facebook page so that it can have the same look and feel as your website.

If you want to learn how to make your website rank higher in search engines, be sure to check out the SEO Video Courses at ragesw.com