Easy as 1 2 PC

Once back at the Editing tab page click the “Save and Publish” 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.

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

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.

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.

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

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 it will appear to logged out visitors. This is very similar to the view a logged in visitor will see.

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

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

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

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

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.

And also changed on your Facebook page.

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.

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.

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

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.

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.

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.

Notice the Image has changed within the app settings

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