How to Customise a Static HTML: (iframe) tab

scroll to section

This is one of our series of social media marketing video tutorials that we’re planning to roll out over the next few months covering Facebook, YouTube and LinkedIn. Last month we released some great video tutorials on Twitter Marketing, so if you found these useful we hope you like our latest videos.

How to customise a Static HTML: iframe tab is an intermediate guide to Facebook, designed for people who are familiar with Facebook’s basic settings. In this easy to follow guide we will show you how to customise your Static HTML iframe or Welcome page, using an image URL location. If you found this tutorial helpful then please LIKE or leave a comment below. Remember to watch this space as we will be releasing Facebook video tutorials on the following hot topics over the next couple of months:

Video Transcription

So now we’ve installed the Static HTML (iframe) app, we can go ahead and customise the app itself. So if I scroll down, just under the Facebook advertisement, click on the “iFrame”, you’ve named “Welcome”, click on that one. It’s going to bring up this area so the top area is for non fans, people who haven’t liked the page and the bottom one is for people who actually like the page. Now all I need to do for this one, is I want to install an image on both boxes so when people click on each box, there’s an image that represents something. It could be a campaign, it could be something that we’re promoting, but I want it displayed. So you can host the image over on your own server, or there’s a number of websites. The one I use is Photobucket. You can also host it on Flicker and there are many, many others. So what I wanted to do if, if I just scroll down here, on the right hand side it gives me the information I need. It’s got a direct link or a HTML code, so you want to just click on that and it automatically copies it. Now if I just minimise that, I’ve got a bit of code here and this needs to go into the top area. So what I can actually do is just, I’ve copied that original code and I want to copy this and then just paste it into this box. And that’s basically the style. It’s got the width and the height, and then it’s got the link directly to this image here. Now just below it, obviously there’s another box, so this is for the actual fans and here’s a bit more information. So again I’ll just copy that information and I want to just post that in there. Now I’ll just make that large. Once you’ve done that you want to save the changes, and you can actually preview. So this one is what the public will actually see, without liking the page, and the second one is what they see when they’ve liked the page. And this as well, there’s an area here that’s quite active as a hotspot that they download in ebook. But this is kind of an example of an old campaign that we’ve run so I just kind of want to show you how it works. Again we can go back to the “Editor” and we can make any changes there. So once you’re done, “Preview” and you’re done. So if you’ve got any questions on anything that I’ve discussed or anything that I’ve showed you, please feel free to leave in the “Comments” section below. Obviously HTML is a completely different animal. It’s something that you really need to get your head around. Even at a very basic level you’re going to need, when you start looking at things like iframes you’re going to need to have some sort of knowledge of how HTML works. If could be a case of just copying and pasting into the boxes, but you need to kind of have a grasp of how to format. But we will be doing a series on HTML, also SEO, so what out for those ones

Request a Call Back
Request a call back

Provide your email address and contact details below to request a call back and we will get in touch as soon as possible.


Pin It on Pinterest

Share This