Facebook page alignment and removing the scroll bars

If you’ve read the previous post I did, Tutorial on how to add HTML to facebook, you probably know now how to get your custom HTML into a facebook page. Once you do, you might see a slight problem, your page may be miss-aligned and may have scroll bars. This happens if your images or DIVs are bigger than 520 pixels wide. Sometimes your elements would be 520 pixels wide and it would still have scroll bars and look all messed up, this might also be because you may have a border on the outer DIV or an image. If you’ve checked everything and it is all within the 520 pixel width but the scroll bars are not going away, you may be in the category of pages which just do not play well with the iFrame and to remedy this I”ve been using some CSS and JavaScript to move things into place and get rid of the scroll bars.

UPDATE: Also try doing it this way, I am told things have changed since I wrote this post.

First of all make sure your opening HTML tag looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The next thing you need to add to your page is the Facebook auto-size javaScript code. It goes right before the closing HEAD tag.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>  
       
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Then the last piece of code you need to insert goes before the closing BODY tag. Make sure to replace YOUR APP ID with your actual app ID.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId  : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});

sizeChangeCallback();
</script>

Now this is still not a guarantee that it’ll be perfect, there are a few bugs with auto-size function on facebook, so here is another piece of code to replace the first Facebook auto-size JavaScript code, it is an older and my own hacking of the code but it works on some of my pages.

Place this code right under the opening BODY tag:

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script type="text/javascript">
    function sizeChangeCallback() {
    FB.Canvas.setSize();
 }
</script>

And then add this at the very bottom before the closing BODY tag replacing the previous code:

<script language="javaScript">
    sizeChangeCallback();
</script>

The problem with getting this auto size thing to work has been going on over a year now and Facebook has still yet to fix this issue once and for all… There are so many fixes out on the web but none of them work every time. You just about have to try different things until you find the one that works for you. In fact, I am working on a page right now that I can not, for the life of me, get to resize. I’ve tried all the hacks and nothing fixes it permanently. It’ll work one time and then you refresh and it puts the scroll bars back in.

Another thing that may work is resizing everything to 518px in width and sometimes even to 510px to get it to work.

Also you can specify a static length for the page to do away with the scroll bars but then you have to know how tall your page will be. Dynamic content will not work with this if it changes the height of the page.

To specify the height, place this code before the closing HEAD tag:

<script type="text/javascript">

window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1100 });
}

</script>

And then add this code before the closing BODY tag:

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

Experiment with these things and you might find a combination that works for you. Let me know in the comments if you find a better way to do this, I’d love to hear about it.

Good luck.

Tutorial on how to add HTML to facebook

I wrote about this before but we all know that facebook changes things on daily basis so the previous article has become obsolete, this is why I decided to update it and actually create a whole new tutorial as mostly everything in the old one no longer applies.

To add some custom HTML to facebook you have to create a facebook page, (not to confuse with a personal facebook profile) and then add HTML to it via a custom iFrame Application. Now don’t get scared off by this, I will walk you through every step in this tutorial.

I’ll show you how to create a facebook page first and then we’ll get our hands dirty with the iFrame goodness.

Creating A Facebook Page

After logging into your facebook account, go to http://www.facebook.com/pages/create.php and follow me as we create a facebook page.

Choosing The Right Page Category

On this page you can choose to create one of six different types of pages, depending on what category your page topic falls under. Choosing the correct category for your page will ensure that your potential customers are able to find your company easier. You also get to have special information that you can add for each category that might not be available in other categories. So make sure to choose the correct category. Let’s take a look at each one and what kind of businesses they apply to.

Local Business or Place

If you have a physical retail location that customers would come and visit you at, your choice should be “Local Business or Place”. With this category you will be able to specify the address and hours of operation of the business as in other categories you would not necessarily have that option.

Company, Organization, or Institution

This category is for companies or organizations, ones that might have multiple locations or other bigger establishments like banks, factories or something like that. Other companies that might want to setup a page in this category are ones that might not necessarily have a local branch, even small businesses that are run from home. But before you choose this category, take a look at the next one, it might apply better for you… or it might not. Let’s see.

Brand or Product

If you offer a specific product or are a brand that you want to market, this category would be the best choice. Here, as you can imagine, you would be getting very specific about what the topic of a page would be. A product like a specific kind of shoes or a shoe brand, a type of furniture like a special chair design or a furniture brand. I think you get the picture what I’m talking about.

Artist, Band or Public Figure

This difference between this category and the next one might be a bit blurry but they are both for the entertainment industry except the first one here, the “Artist, Band or Public Figure” is for a specific artist, band or a public figure as upposed to the next one which is for a broader type of business, like an agency, sports league or a TV channel. So if you are a band or an actor, this “Artist, Band, etc…” category is for you.

Entertainment

As I mentioned above, this “Entertainment” category is for a wide variety of entertainment industry type business. If you are not an individual or a group like a band but a business that is in the entertainment industry you should choose this category.

Cause or Community

This category is for some sort of a cause, like a cure for a disease or a support campaign, also a community or a group of people that have like interests. If you are looking to add custom HTML to your page, this is not a good category to go with as a page in this category is not allowed to have iFrame tabs and another reason you should not pick this category is after it gets 10,000 fans, facebook will throw the page into a communities pile and you will no longer own it but will just be a member. So stay away from this one, find a reason why you qualify for any of the other ones.

I am going to create a page for a fictitious toy called Wobble Mobble, so I will choose the Brand or Product category and then will choose Games/Toys subcategory from the drop down menu and enter the name of the toy into the text box. Check the “I agree to Facebook Pages Terms” and click Get Started.

Your New Page

Now you have your brand new facebook page. It’s still super empty so you can, if you like, go through the steps they recommend to setup your page a bit more. Add a profile image and invite some friends… but on the other hand you might want to wait till you get your custom page up before you invite anybody here, so let’s get to that now.

Adding Custom HTML Using An iFrame Application

To add custom HTML to your page you need to create an application ‘Tab” within your page. This “Tab” will be what will hold the iFrame that will display your HTML. Yes I know sounds confusing, just follow me along, I’ll show you how this works.

Let me tell you how a facebook page works so you have a bigger picture and understand better what all these tabs pages and apps are all about.

A facebook page is not really a one, single page, it is more of a bunch of pages in one, we will call them tabs… more like a mini-website. It has a Wall tab, where you and the fans talk and add announcements, pictures, videos and what have you. Then there is the Info tab which holds the information about the page. A photos tab is where you will display all the photos that you upload to the page. These three tabs come included by default with your facebook page and you can add mode additional tabs. The only way to add these extra tabs is to add facebook apps to your page, each app you install will show up as a new tab. So what we need to do is create a custom app ourselves that we can add to our page as a new tab. This app that we create will pull an external web page via the iFrame, from somewhere online that will hold your custom HTML.

This was a quick crash course on adding custom HTML to your page, but now let’s dig in and see how it’s all actually done. We have the fan page so now we need to create an external page which will hold our custom HTML. This will require that we have some sort of web hosting already setup. I am going to assume that you already have a website online somewhere, so if you do not have one yet, you will need to find another tutorial about setting up a website first and then come back to this and continue from this point.

Creating A Custom HTML Web Page

Here all we really need to do is create a .php page that will hold the custom HTML code that we want displayed on the facebook page. You can build it as any standard html page, the only thing is you need to make sure your page is 520 px wide and make the page have a .php extension.

I built a simple HTML page and uploaded it to this website. It is accessible by simply going to the URL: http://www.webdesignideas.org/fb.php The iFrame in the new Facebook App that we create will call this page and display it right inside facebook. Now let’s create an app.

Creating A Facebook App

To get started creating an Facebook application, go to https://www.facebook.com/developers/createapp.php and enter the App name in the text box, then click Agree and Create App. You will get a Security Check box that will ask you to enter some text into a text box, do that and click Submit.

About Section

Now we get into setting up the app. On the first page (above) you will see that we have six sections on the left and we are on the About section right now. Here the only thing you need to set up is the Application Name, which we already entered on the previous page and it’s been automatically populated for us. You have a choice to upload an Icon and a Logo images for the App if you like. The next thing we need to enter is the User Support Address, which we have marked as email and entered my email into the text box. For the Contact Email I entered my email also. That will do it for this section. Do not click Save Changes until we are done with all the sections. Click on the Web Site section in the left sidebar.

Web Site Section

In the Web Site section I entered the website URL where the custom HTML page is residing, which is “http://www.webdesignideas.org”. Remember, this is not the actual URL of the page but the URL of the website where the page resides. Then I entered the domain of the site, which is just “webdesignideas.org” without the “http://www”. Click the Facebook Integration section in the left sidebar to continue.

Facebook Integration Section

This is the section where we tell facebook where to look for our custom HTML page. I gave the Canvas Page a url of http://apps.facebook.com/”wobblemobble”. This is the URL of where this App we just created will reside, so it is good to give it a url that represents your page name with no spaces between the words.

The Canvas URL is the URL of where our custom HTML page lives again, don’t forget the trailing slash, they really want that one. iFrame Size should be Auto-resize, and Social Discovery should be enabled.

The Tab Name we can make whatever we want, plus we’ll be able to change this later on so it really doesn’t matter at this point what you call it. I like my primary page to be called Welcome so that is what I entered. Then I entered the actual URL of the custom HTML page.

At this point you can click Save Changes button at the bottom.

New App Information

Congratulations, you’ve just built your first facebook app! Now let’s add it to our facebook page. Click the Application Profile Page button (see image above).

Your App Page On Facebook

This is your app’s page on facebook. Since this is not a public app but just a placeholder for our custom HTML, we will not need to personalize this area. Just ignore everything on this page except for the Add to My Page link in the left sidebar (see image above).

Find your page that you created earlier and click Add to Page next to it and click Close.

Now that you’ve added the app to your page, let’s go see what it looks like and set it up as the default tab. Click the Facebook logo at the top left to go to the your facebook profile page.

Setting Up The Page With The New App

On your facebook profile page click the Pages link in the left sidebar (see image above). Find your page in the list and click on it.

Now you should see the app that we’ve created in the left sidebar showing up as a one of the tabs. Ours is the Welcome one in the image above. Let’s click on it and see what it looks like.

The New Welcome Tab

As you can see we have our custom page showing right inside facebook. Now we can set this page to be the default tab that opens up to any one visiting the page that has not liked it yet. This is great to create offers and capture emails if you build a custom page that does something like that. Let’s make this tab default.

Click the Wall tab first in the left sidebar and then the Edit Page button on the top right.

Here pick your tab, in our case it is named Welcome, from the Default Landing Page menu and click Save Changes. Now anytime someone visits your page, the Welcome tab will be the first thing they see.

Whew, that was a long tutorial.. It’s almost 2 am already and I am ready to pass out. I’ll come back in the morning and go through the tutorial to make sure I didn’t make any mistakes as I’m half asleep. lol joking… zzzzz…….zzzz… oh, that’s right… where was I?

Anyway, I hope this tutorial helps you out. Please leave your comments and questions below and I will be all over them as flies on.. um… a picnic fruit tray.

Read the Facebook page alignment and removing the scroll bars next »

Later.

Creating A Facebook Fan Page & Customizing It For Your Business

UPDATED –> Thanks to facebook’s fast moving evolution, this article has become some what outdated. Please read the new Tutorial on how to add HTML to facebook that talks about creating a custom page on facebook.

So you have a Facebook account for your company and you have friends on there, what next? Facebook allows you to create a Fan page where you can dedicate this page to anything from a specific product to the entire brand and within this page you can create a custom looking page which can have a lot of functionality from your company’s website including links to products and sales pages. Once you have the page created you can collect Fans which does not require that you know the people like it does when you add friends. This expands the potential customer base significantly, so I recommend that every business has a Fan page setup.

In this article I will walk through creating this Facebook Fan page, step by step. I have to note though that like in previous Facebook articles that I wrote, as Facebook updates their site and the Applications get updated the information in this article may become outdated but the main idea and basic setup should still apply and I am sure you will be able to find the current information simply by searching Google.

Ok, let’s begin.

Continue reading “Creating A Facebook Fan Page & Customizing It For Your Business”

Ads on Facebook Featuring YOU, Without You Knowing It…

facebookadsviagra

So I got a message on Facebook that made me a bit upset. Here is what  I posted on impulse:

WHAT?? Facebook snuck this in while most of us were just commenting on friend’s status(es) and pictures. The new Facebook ads now incorporate YOUR photos into the ads when they show on your friends’ Facebook pages. So your friends will think this is not an add, but something you posted. If this is not the most horrible case of SPAM, I don’t know what is. I guess the fact that they allow you to turn your photos off for this evil project but still if you do not know this is happening, having an option to turn it off, deep in your settings pages does not really help with this deceiving monetizing scheme.

I was really upsset when I found out about this. And Facebook of all places? That is too weird to beleive.

Ok, here is how you turn it off in your Facebook account:

  1. Log in to Facebook
  2. On the top right (in the blue bar) roll over “settings”
  3. The fly out menu, click “privacy settings”
  4. Click, “News Feed And Wall”
  5. Click the “Facebook Ads” tab
  6. There is a drop down menu next to “Appearance in Facebook Ads” -click “no one

++++++++

UPDATED!!

++++++++

Then thanks to Anon’s comment below this turns out to be untrue so I wanted to appologise and provide the information that explains Facebook’s policy.

Debunking Rumors about Advertising and Photos

Please read this over to understand what’s going on so you don’t go off and continue spreading a crazy rumor like I did.

Sorry about that again.

Adding Custom HTML Box To My Facebook Page

0-papp

UPDATED –> Thanks to facebook’s fast moving evolution, this article has become some what outdated. Please read the new Tutorial on how to add HTML to facebook that talks about creating a custom page on facebook.

In the previous post I wrote about adding a custom HTML box to my Facebook Profile, today I will talk about adding  a custom HTML box to my Facebook Pages. I spent hours trying to figure out how this is done and realized after a while that Facebook is still having lots of navigation and usability issues. The navigation between the main Profile area and other elements of Facebook are not linked very well, at least no very intuitive and easy to get lost. Once you get something to work it is hard to find out how you did it and to replicate it.

After hours of surfing the help pages and forums I finally found some patterns and figured out how certain things are done.

Adding a custom HTML box to your Facebook Pages requires a different procedure and a separate Application from what was used in the previous post so to add an HTML box to Facebook Pages (not Facebook Profile) follow these instructions.

Continue reading “Adding Custom HTML Box To My Facebook Page”

Adding Custom HTML Box To My Facebook Profile

valik1

UPDATED –> Thanks to facebook’s fast moving evolution, this article has become some what outdated. Please read the new Tutorial on how to add HTML to facebook that talks about creating a custom page on facebook.

After spending some serious time on Facebook trying to do a few things on my profile I realized that Facebook’s navigation between different Facebook applications and elements are less then perfect. It took me hours but I finally found some patterns and figured out how certain things are done.

One of the things I needed to do was to add a custom HTML box to my Facebook Profile, but then I also wanted to do the same to my Facebook Pages that I’ve created. This document is the complete instructions on doing exactly that. So let’s dive in. We’ll first start with Facebook Profile page. I also did a post on adding custom HTML box to Facebook Pages, notice – Facebook Page, not Facebook Profile, these are different – read about the differences in this article.

Continue reading “Adding Custom HTML Box To My Facebook Profile”

Using Facebook “Social Ads” Feature To Sell More Products

Facebook has become one of the most well used and respected social networking websites.  It initially started out as a blogging platform for college students. It was a place where they could share pictures and communicate with each other. Today, people of all ages create Facebook pages in an effort to find and keep in touch with past and current friends. With millions of members, Facebook is quickly becoming a very popular place for marketers to advertise their products and/or services.

Facebook

Unlike many social networking sites which discourage advertising, Facebook welcomes it. Facebook’s Social Ads allow members to advertise their products and services to other members. Advertising can be targeted to one’s product demographic. If marketers are interested in aiming their marketing efforts at young, female adults, 25 and older, Facebook allows them to do so.

Continue reading “Using Facebook “Social Ads” Feature To Sell More Products”

Marketing Offline Using Facebook Business Cards

Start by marketing yourself offline. You have friends, family, clients, etc., make them remember who you are and how to find you and information about your business. This company, Ooprint has introduced a Fasebook business card that you can customize and have them printed. A Facebook business card is a great idea for marketing offline. Check them out and get 100 FREE ooprint biz cards.