Adding a Static HTML app to your Facebook page is relatively straightforward if slightly long process. Following this gallery should make it easier.

For this guide I am using the Thunderpenny Static HTML app which can be found here.

The online HTML editor I reference during the guide can be found at htmleditor.in.

Clicking on  an image will open the images in a viewer where you can see the full size image (or almost) and click through the gallery.

So let’s get started.

Click Save and Publish

Once back at the Editing tab page click the “Save and Publish” button.

Click on the Welcome app button

Next we need to configure the app to display what we want it to display. To do so we can click on its button as highlighted.

Apps Page - Click on Edit Settings

This opens the Apps page. Click on “Edit Settings”

Choose image file

Notice on this screen that there is a limit to the dimensions of the image. As undelined this is 111 pixels wide by 74 pixels high. Using your favourite art package make an image that matches these dimensions and click “Open File” to browse for your file.

Choose html from the app buffet

The next page allows us to make a selection from a few choices. In this instance I wish to add an html page. So I will click “Use this app” in the HTML box.

Choose Apps

Then click on “Apps” to access the Apps page.

Lets Change the Button Image

Lets change the button image from the default star to something that better fits into our page. Click the “Edit Page” button and choose any of the first group of options.

As Seen by Logged Out Visitor

As it will appear to logged out visitors. This is very similar to the view a logged in visitor will see.

All Saved Click Done

Once saved that button will now display All Saved. Now if you click Done you will get a preview of the app.

add to page

Double check that the page name is correct, if you Admin more than one page. Then click “Add”

Upload a custom image

This page shows you the page name, application tab name and its current image. Click “Change” again to change the image.

Static html app landing page

So lets get started by clicking the big blue “Add Static HTML to a Page” button in the middle.

Preview

This is the Preview window. Double check the text is as you would like it to be and if you need to make any changes got back to the HTML editor webpage and then copy and paste the code again. Once satisfied click Done.

Page with edited button

And also changed on your Facebook page.

HTML editor 2 - HTML Source

This is what it looks like when viewing the html source for my text. The menu has greyed out a lot of the buttons leaving a few available. You can either click the square with the circle in it on the top row to select all your code or click inside the code area and press CTRL+A on your keyboard or right click and choose Select All. The code box will become highlighted and you can then click CTRL+C or right click the mouse and choose Copy to copy your text.

HTML editor 1

This is the HTML Editor webpage. It has most of the functions found in a standard Word Processor and a few more. Hovering over a button on the page will bring up a short explanation of each item if required. For now I am going to copy the text from my websites homepage and format it as i need to then hit the source button.

Final preview

This is your preview page and will be what you see when you click on the button on your page.

Editing tab 2 - Paste HTML

Going back to the Editing tab page and click in the large white box and delete the text there. Once cleared right click and choose Paste or press CTRL+V on your keyboard. This will paste your HTML code into the app and look similar to the image here. Click the Preview button for a preview of what it looks like.

Editing tab

This is the Editing Tab page. On here we can enter the html code that we wish to display. An easy way that I have found to get the HTML code is to use an online editor such as HTML Editor from Techpoint.in. Open this site in a new window or Tab.

My App Button

In true Blue Peter style, here is one I made earlier. Once you have selected the file it will take you back to the App settings page. Simply close that tab or window and from the Apps page you can click “Edit Settings” and “Change” again to see that the image has changed or go to your Facebook page and refresh if needed.

Custom image uploaded

Notice the Image has changed within the app settings

Click to change the tab image

This brings up the App settings page where we can the Click “Change” to change the app’s image.

Static HTML-Click Save and Publish

If you have any questions do not hesitate to ask over at the Facebook page or leave a comment below.  If you know someone who would benefit from anything that I have written here on the website or on the Facebook or Google+ pages. Then please Like, +1 and share the site and other pages with them and your friends and family.

Author: William Winslow
Find me on

Find Easy as 1 2 PC on Google+ and Facebook

About these ads