Adding your Instagram, Facebook or Twitter widget to your GRAV website is easy. Follow these steps to create your widget.

Once you've created your widget, follow the appropriate steps below to add it to your website.

Some info on GRAV.

  • GRAV is a very simple website builder with minimal features but with the proper plug-ins it can be extended to a really useful system. The built-in editor is based on Markdown but also allows HTML coding and it allows scripts, links and iframes.
  • One thing to keep in mind is that your snippet must always be encapsulated in a <div>…</div>  area. This also allows us to change the way the widget appears, e.g. change the width of the widget, add a header, centre the widget on the page, etc. (but more about that later). No Markdown code is allowed within a <div>  area. 
  • Adding your widget to any GRAV page or blog post is done in exactly the same way. Just select the page (or blog post page) that you want to add the widget to.

Adding your widget

  • Log in to your GRAV website. 
  • Select Configuration.
  • On the System tab under Content, make sure Markdown and Twig are both selected.
  • Click on Save (top right-hand) to save the configuration.
  • Select Pages. You will see an indicator of how many pages do exist in your GRAV web site - this includes blog posts as these are handled as normal pages in GRAV. 
  • Click on Expand All to show all pages on your website.

 

  • Select the page you want to edit.
  • You can select Normal or Expert editing. For this tutorial we will stick to Normal.
  • Select the Content tab and insert your snippet below any existing content. Remember we mentioned to encapsulate the snippet in a <div></div> area? This means you must start with a <div> tag, insert your snippet and end with a </div> tag.
  • Click on the Preview button to see what the widget would look like. Remember to click on the Editor button when you want to edit the code again.

           

  • You will notice in the preview that the widget fills the whole width of the page which is OK if you want it this way. If you want to reduce the width of your widget you can do this via the width setting of the iframe in your snippet, i.e. width:50%; "></iframe>  will have the following effect. Remember this doesn’t change the width of your widget used on other pages on this web site or on other sites, this is only applicable to this one instance. This will then display the widget left justified on your page which is perhaps not so pleasing on the eye.
  • To centre the widget on your page without modifying the iframe width, you can modify the starting <div> tag with the following <div style="width:50%; margin:0 auto; text-align:center;"> 

 

  • If you want to add a header above your widget you can use the editor to add the header in Markdown code or you can use HTML to achieve this. This is an example of a widget with a header and width set to 50% done in HTML code.

Code

Preview

  • Please note that the Preview does not display Headers and text as coded. To see the proper result, click on Save and view your page in a browser.
  • As mentioned at the start of this tutorial, the process of adding your widget to any page (or blog post page) on your GRAV web site is exactly the same. The following shows what the example blog roll would look like on the sample web site. Here we have added a Horizontal line (<hr/> ) as well as an extra break (<br/> ) before and after the widget. You can apply the same to the previous steps as well if required.
Did this answer your question?