Sometimes it happens that your website is on a platform that doesn’t natively support blogs, and there are no plugins available to remedy this. Some ecommerce platforms are this way– Volusion is a notable example. It is a highly intuitive and effective ecommerce platform that is easy to use for developers, store owners, and consumers alike. However, Volusion does not support blogs at all. This is a serious challenge for getting found, as blogs are a primary way to establish, increase, and maintain your site’s web presence.
One way to feature a blog on your website is to create a blog off-site. If you want to preserve the styling of your store on the blog, for a cohesive and consistent user-experience, you have two options. You can replicate the styling, which will be more or less difficult depending on your HTML, CSS, and Javascript knowledge, along with the complexity of the styling you’re trying to copy. Or you can feature the blog on a page within your site via an inline frame (iframe)– a page that will already feature the header, menu, and footer you want to preserve. For a very quick primer on iframes, check out W3schools page on iframes, or to see one in action check out the Kiel James Patrick blog page.
A page in an iframe brings with it its own challenges, one of which is getting links to open the way you want them to. By default a link in an iframe will want to open in that frame. This can be a problem if your blog links to anything on your website: you’ll end up with a store page nested within your store page, and so a header below your header, and a footer above your footer. It looks tacky and amateurish when it happens.
Fortunately the folks behind the HTML standard have provided for this kind of thing with some simple attributes you can add to the links in an iframe, depending upon how you want the target page to open. Adding these to the link (inside of the brackets < >) will tell the browser how where the target page should open. To do this, you will need to be able to modify the HTML code on the page appearing in the iframe.
- target=”_parent” tells the browser that the target page should open in the main browser tab (and not the frame). E.g., <a href=”www.example.com” target=”_parent”>Open this in the current tab!</a>
- target=”_self” tells the browser to open the target page in the iframe window. This is useful for any links pointing to your other blog articles. It will open the blog article in the frame, making it look like part of your main website. E.g., <a href=”www.example.com” target=_parent”>Open this inside the current frame!</a>
- target=”_blank” tells the browser to open the target page in a new tab. This is useful for any links that point to a website that is neither your main site nor your blog site. If you’re linking to an event your company will be participating in, using target=”_blank” will open the event page in a new tab, without taking your visitor away from your website.
There are other ‘target’ attributes, but these three are the most useful when working with iframes. To read more, the W3schools target page is a good quick reference. Another handy attribute is the ‘base’ attribute, which can set a default ‘target’ behavior for a page. Again, W3schools quick reference.