Monday 23 January 2012

A Simple Facebook Page Customization:Using Static HTML App

Good day folks! Are you guys familiar with Facebook pages? It's a feature of Facebook wherein you could make your own business page, fan page and other types of pages. On this post, We'll be showing you guys how to simply customize your page a bit using Static HTML App.

First things first, we have to use a Facebook application called Static HTML

  1. Search for Static HTML
  2. Like the application
At this juncture, we need to create a page.

  1. Click Create Page
  2. Select Page Type and input any necessary information.
  3. Add a photo or Skip and do it later.
  4. Get Fans or Skip and do it later.
  5. Input the sites Basic info, then click Continue.
Now we are done with our page. Next is do a little customization using Static HTML App.

  1. Go to Static HTML App. If you don't know how to find it, search it again on the search box. Once you are on the page, click Go to App.
  2. Click Add Static HTML to Page.
  3. Choose a page where you wish to add the application then click Add Static HTML:iframe tabs.




At this juncture, we already have a page and a Static HTML app. You will notice a new tab named Welcome is added under your photo.


 There is our app now. Next thing we do is set the app we made as the default page. 
  1. Click the Edit Page button at the upper right side of the page.
  2. Set the Default Landing Tab: option to our app which is Welcome.
Now when a person views your page, it will go straight to your Static HTML App. 

Now, view your page and select the Static HTML App. You will notice 2 text boxes. The boxes is where you put your static html codes.

The upper box is the page where persons who haven't like your page will see while the lower box is where your fans or those who only liked your page can see.

As an example, lets add an image to the first box. lets add an image tag on the first box.



Note that you can put an image of with the width of 520px. However, you can decide on the height image.

Save the changes then try to view your page. If you liked your page, you can unlike it to see the changes. You can like it back when your done. You can do the same with the second box as well.



Now, what if I want those who liked the page directly go to another site? You can add a little javascript code to make this possible:


How about to a new window? Simple use the default syntax for opening a new window in javascript.



Above is an example of how to implement the said scenario. However, since Javascript is browser dependent, it will always depend on the user's browsers. If the browser strictly blocks any pop up window, then this is not possible.

I hope this article would help you guys. Any corrections or suggestions will be gladly accepted if you guys have any.

No comments:

Post a Comment