Forum Discussion

skylinegtr's avatar
skylinegtr
Mentor
10 years ago

Updating website content with iframe

Right now, I’m in charge of updating the community design and another person updating our Saleforce community. Both community have the same header and footer design which matches our company website. However, my company website will be updating the header and footer every 2-3 months. I want to use iframe to make the update easier for the both of us. Can this be done in Lithium? If so, how? Please provide me the steps to accomplish this task.

 

Thanks!

  • VarunGrazitti's avatar
    VarunGrazitti
    10 years ago

    skylinegtr - This is not a bad idea at all and is something we have implemented in one of the communities earlier. A live example of this is here,  the header and footer in this page are called in an iFrame for the very same reason which you mentioned, to keep it updated. Another example is here 

     

    You can check the source code of both the pages and will get the required code. Add the code for header iFrame in the header in wrapper and footer goes in the footer content area.

     

    Header:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://www.naughtydog.com/site/jive_head_min/" class="header-frame"></iframe>


Footer:

<div class="ud-ftr"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://www.naughtydog.com/site/jive_footer/" class="footer-frame"></iframe></div>

     

    There are many communities which are using this but just make sure that you keep in check that the dimensions (width and height) goes with your design even after they update. Otherwise, there are no real issue which we have faced. These are running for almost 3 years now without any issues.

     

    I hope this helps.

  • NoamanA's avatar
    NoamanA
    Lithium Alumni (Retired)
    10 years ago

    Hey skylinegtr

     

    We also offer the option of 'fetching' external headers and footers - see Option 1 here.

     

    In essence, you provide us with URLs for your headers and footers which we then map to custom settings.  Those settings are then available for referencing within your header and footer components.  We can configure how regularly those assets are 're-fetched' to ensure your pages remain current.

     

    There are some caveats to the content of the URLs which are covered in the article above.  URL fetches also aren't just limited to headers and footers, you can use them anywhere on your community pages and have as many as your community requires.

     

    If you wish to set up some URL fetches on your stage site, you can do so by contacting Support with the details.

     

    Regards

    Noaman

  • OlivierS's avatar
    OlivierS
    Lithium Alumni (Retired)
    10 years ago

    skylinegtr I usually stands by Bill Gates:

     

    “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.”

     

    Note: I'm not saying you're lazy !

     

    But I think on this occasion you might want to reconsider your requirement for the following reasons:

     

    • with Lithium, you have a stage environment. You can use it to test your new header and make sure it works well with your community. Letting the header (and footer) to be 'automatically' updated might end in disaster.
    • with Lithium, you have a CDN at your disposal, to speed up page load ; which your company website might not use.  
    • you might want to check how iFrame are behaving those days across browsers. I remember seing lots of issues with iFrames (and mainly IE).
    • skylinegtr's avatar
      skylinegtr
      Mentor
      10 years ago

      OlivierS By adding the iframe it can help us avoid updating the HTML and CSS in two different places. This is why the iFrame idea come up. Thank you for your feeback on this topic.

      • VarunGrazitti's avatar
        VarunGrazitti
        Boss
        10 years ago

        skylinegtr - This is not a bad idea at all and is something we have implemented in one of the communities earlier. A live example of this is here,  the header and footer in this page are called in an iFrame for the very same reason which you mentioned, to keep it updated. Another example is here 

         

        You can check the source code of both the pages and will get the required code. Add the code for header iFrame in the header in wrapper and footer goes in the footer content area.

         

        Header:

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://www.naughtydog.com/site/jive_head_min/" class="header-frame"></iframe>


Footer:

<div class="ud-ftr"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://www.naughtydog.com/site/jive_footer/" class="footer-frame"></iframe></div>

         

        There are many communities which are using this but just make sure that you keep in check that the dimensions (width and height) goes with your design even after they update. Otherwise, there are no real issue which we have faced. These are running for almost 3 years now without any issues.

         

        I hope this helps.