Mac SEO Blog

Back in February of 2011, we made a post with a video tutorial showing you how to create a custom Facebook page for your business using MapDesign. Not too long after, Facebook discontinued the use of FBML which was vital to the creation of the custom Facebook pages. In this new video tutorial, we will teach you the new and updated way of creating your custom Facebook page using MapDesign. This method is actually a bit easier than the last video as we are able to use a Facebook App called iFramed. So without further ado, here is the new tutorial:

Video Transcript

As of March 2011, there was a change to the way we add our image maps to our fan pages on Facebook. If you’ve added your image map in the past, you most likely did it by using the Facebook Markup Language. FBML has since been discontinued, and there is now a new method for getting our image maps on Facebook.

In our tutorial, we covered how to sign up for a Facebook fan page. We will do the same here, however it will not be as extensive as last time. If you need assistance signing up for Facebook and then creating a page, you can refer to the old tutorial, but I will warn you that there have been some interface changes so things may look a bit different.

So let’s get right to it. What you’ve been seeing here is a Facebook profile. Like mentioned earlier, you must have one of these in order to create a page. From here, I am going to go to the address bar and type in pages, so that my destination is facebook.com/pages.

Next, I will click on the Create Page button which is located in the top right corner.

Choose the type of page you are making, and fill out the required fields.

Now that the Facebook fan page has been created, I’m going to prepare my image. Remember that this can be any image you want, but for this tutorial, I am showing how to make your image a picture of your website since that seems to be the most popular request. So I will go to the page on my site that I want to be shown in my image, and I will take a screen shot by holding down Command, 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 510 pixels. If you remember from the old tutorial, this number was 520px, but I am making it a bit smaller because I found 520 to be a bit too wide. 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 the destination 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.

You will notice that for each link, I am including http:// and also selecting the option to open in a new window. You must do this as well or your image map may not function correctly.

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. I am going to export it to my desktop.

Next, I am going to create a new folder, and I am going to call it mapdesign. You can name it whatever you want, but make it something you can easily type because we’re going to be typing it in again. Then place the exported files into that folder. There should be one file named index, and one folder names images.

Now what we need to do with this folder is we need to publish it to our server. I am going to demonstrate publishing it to FTP. If you’re publishing to your MobileMe account, the process is going to be very similar.

So here I’ll just drag and drop the folder onto my server via CybderDuck.

Now I’ll head back to my Facebook page, and in the search field, I am going to type in iFramed. What iFramed is, is just an app we’re going to use to add our image map to our page. Doing it using iFramed versus installing iFrames manually will save us a lot of time, and it is much easier to do.

So we’ll click on Go To App, and then select one of the Tabs, and then choose the page that we want to add the application to. Then press the Add iFramed! button. This will take us back to our Page, and you will notice on the left, there is a new link that says Welcome. We’ll click on Welcome, and the iFramed app will load. Click the Start button.

Now we’ll need to type in the location of the folder that we just published. So if you published to the root of your server, you should type in your domain slash folder name. So for example, I will type in www.ragesw.com/mapdesign-facebook.   If you published the folder to your iDisk, you will type in web.me.com/username/foldername. It is very important that you know the precise location of where you published the folder to, otherwise the image map will not show up.

You will notice that there are two different places to put your URL for your image map. One is the fan view, one is the non-fan view. So that means if you want to show different image maps for people who have Liked your page versus people who haven’t, you can do that. For this example, I will just make both of them the same. Press the Save buttons, and then you can preview your image map, and test it and make sure everything works the way you wanted it to.

And that’s how you customize your Facebook page with iFrames and not FBML. Now your Facebook page can have the same look and feel as your website.

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

Facebook allows companies, organizations, or individuals to start groups and fan pages to make it easier for Facebook users to keep up with all your news and upcoming events.

A couple of months ago they came out with widgets that you can add to your website. You can see an example of a Facebook widget on the side of this blog. It shows all the users that are a fan of RAGE Software and lets any blog reader to quickly become a fan as well.

Macworld.com recently published an article describing how to Integrate an iWeb website with Facebook.

It shows you how to add Facebook widgets to your iWeb site using HTML snippets. It also shows you how to get your RSS Feed on your Facebook page. This means all of your blog posts can automatically be added to your wall or fan page. There are many widgets to choose from, so it’s definitely worth a look to see what is available.

It’s a great article to read over if you would like to keep your facebook friends or fans updated on your website news and events.

Combined with iWeb SEO Tool to optimize your website for search engines, and Sitemap Automator, to get your website listed in all major search engines, this can be a great way to attract more visitors to your website.

Twitter.com is known as a micro-blogging website. A micro-blogging website is a website that lets you leave short posts, just a sentence or two, about what you are currently doing. You don’t even need to be next to a computer because you can post what you’re doing right from a cell phone.

With twitter you can set up a profile with you micro-blog and find other users to “follow”. Following a user lets you keep up to date with what they are doing at all times. Yes, that does sound a little scary, but users from all over the world have quickly embraced twitter even though it has only been online for a relatively short amount of time.

You can use twitter to quickly post what your company is currently doing. For example if you release a new product today or want to show off a new Website design. The trick to using twitter is to find users who have similar interests and start following their blog. As you build up the list of people who you follow and post interesting subjects, other users will begin to follow you as well.

You should also consider getting your existing website visitors following you on twitter by posting a link to your twitter account on your website.

Many services allow you to easily publish a quick summary of your latest blog posts to your twitter account. Other apps for iPhones or blackberrys let you easily “tweet” about what is currently happening with you.

While Facebook and MySpace provide a more general arena for social networking, more specific social networking websites are always being developed. Some can provide a lot of value towards your marketing efforts, others will provide you with a way to meet people with similar interests, while a large portion will only offer a short life span as they get caught up in the competitive online industry.

One of the largest social networking websites geared towards professionals is LinkedIn. Although LinkedIn will probably not provide a large amount of potential visitors, it provides an important opportunity to meet, network and build your reputation with like minded individuals all over the world. Building your network of professional colleagues can open new doors and reach the people who may be able to offer helpful advice and resources to starting and maintaining your online business.

LinkedIn is provided as more of an example of what you can do with social networking websites. There is ample opportunity to find networking websites related to your business and market. It is hugely beneficial to build a reputation with the key players in your industry and this is a great way to get your foot in the door.

LinkedIn can provide three key benefits for your website. The first by showing your public profile in Google search results when potential customers search for you or your product/service. If your website is new, leveraging the size and reputation of LinkedIn may be a quick way to start building recognition for yourself in search engines.

The second benefit allows you to answer questions using LinkedIn’s Answers section of their website. If you have experience with a certain subject, you can help others while providing additional information on your website or blog. If other people can view you as an expert in a certain subject matter, they may turn to your website or blog when they have similar questions in the future.

Lastly, like Facebook, you can create groups surrounding your product, service or website and get your visitors to join. If your website is geared to professionals of any sort, LinkedIn creates a great avenue for you to allow your visitors to connect with each other.

Both facebook.com and myspace.com are the two largest social networking websites in the world. A social networking website is a website that connects friends and family together using common interests groups. For years, myspace.com has been used my amateur and professional musicians, artists and movie stars to promote themselves and there work. Comedians such as Dane Cook have been rumored to owe their career to the popularity they received from utilizing myspace.com.

Both of these websites provide ample opportunities for promotion including posting your sample products, for example if you compose music, creating common interests groups, as well as cheap and targeted advertising. booksforschool.com, a Canadian based online textbook exchange service used facebook.com to advertise specifically to Canadian University students only. This lowered costs by only advertising to their target market and not paying to advertise to people who would never use the service such as students who have graduated years ago.

Facebook also lets you create company pages just like you can create a personal page for yourself. Your friends and customers can become fans of your company page and any updates you post to your wall will appear in their news feed.

You can use this feature to post about new products, special discount codes for your members only, or to simply engage with your customers on a more personal level.

When you create a company page, facebook lets you easily add a Facebook Connect widget to your website just like the one on the right and side of this blog. They provide all the code you need so you can easily advertise your company’s facebook page to your visitors and get them to join.

You can explorer the hundreds of facebooks apps you can add to your company page including automatic blog updates, twitter updates and even discussion boards.

Facebook and MySpace also provides an online market place and classifieds system which you can use to advertise your products for sale to thousands of online users.