Content Syndication – How to Create an iFrame

How to Create an iFrame on Your Web Page

1. Create a new HTML file, place some content in it and save it as “newpage.html”

2. Create another HTML file and call it “holdingpage.html”, and include the following syntax within the .. tags of this web page.


<iframe src="newpage.html" width="600" height="800"
frameborder="0" scrolling="auto" name="myInlineFrame"></iframe>

<a href="http://www.yoursitename.com" target="_blank">
http://www.isitebuild.com</a>

This places newpage.html inside the floating frame….holdingpage.html. The text for non-compatible browsers is for those folks with web browsers that can’t process iframes…they can’t see the frame.


All Current browsers (Internet Explorer 6,7 Netscape 6,7 and Opera 5/6) handle iframes. Some very old browsers can’t process iFrames, however this is not a large concern as most folks use the browsers mentioned.

Attribute List:

src = the source file the iframe uses, i.e newpage.html
name = a unique name for the iframe (not essential)
frameborder = 0 | 1 – Sets the iframe an outline border (1) or no outline border (0)
width = pixels, i.e 200
height = pixels, i.e 200
scrolling = yes | no | auto – Sets scrolling. auto means scrollbars appear when text overflows initial size
align = left | right | center – Alignment of the iframe, horizontally

3. You can change these attributes to any size you wish. The iFrame must be large enough to accommodate your content. Creating a smaller iFrame will make it easier for visitors to find your syndicated content, and also to position it on your page.

4. Upload newpage.html and holdingpage.html to your server. You will now see your iframe and its contents appear within your web page as a new window.

5. Make your syndicated content available for others to place on their sites.

Create a link on your site that says: “Syndicate this content” and include a tutorial (like the one I created in this article). This will make it easy for them to implement your content on their own sites.

Here’s an example of an iFrame embedded within this web page to syndicate my article headlines:

*******************************************************



Content syndicated
by iSiteBuild.com

********************************************************

Here’s the code to embed the above iFrame on your own web page so you can syndicate my article headlines.

***************************************************************

<iframe src="http://www.isitebuild.com/syn.html" width="200" height="200"
frameborder="0" scrolling="auto" name="myInlineFrame"></iframe>

<a href="http://www.isitebuild.com" target="_blank">
Content syndicated</br> by iSiteBuild.com</a>

****************************************************************
(If you wish to syndicate my article headlines, please send me the location of the URL that contains the iFrame).

You now have a way to syndicate your content all over the Web that will result in increased traffic and generating backlinks from other sites.

Comments

  1. thank you, now I have a clue how to make an iFrame and how to remove the borders . . . 🙂 great help

  2. Excellent! I had been troubled by how to remove the border of iframes using the width=”100%” setting. This answers my problem. Many thanks.

  3. I wrote an article on iframes and went into a bit more detail about what each part of the code did. Though I did try to keep it simple for newbies

    Rick

  4. D D Vaghasiya says

    hi thanks for write this blog because i learn how to use ifram in web page. thanks allot.

  5. Does this work in WordPress blogs?

  6. Thank you for the information!

  7. Took me time to read all the comments, but I definitely enjoyed the write-up. It proved to be Pretty useful to me and I’m positive to all the commenters here It’s always nice when you can not only be informed, but also entertained I’m positive you had fun writing this article.

  8. Thank you very much boss for sharing Iframe Tutorial.

Trackbacks

  1. […] Read this article on: “How to Create an iFrame” […]

  2. […] Syndicate content […]

Leave a Reply to How to Nest an iFrame Cancel reply

*