Adding your Instagram, Facebook or Twitter widget to your Monstra 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.
There are three (3) ways to add your widget to your Monstra website, i.e.
Adding your snippet directly on your page,
Creating a Block and adding the {block get=block_name} embed code to your page or
Creating a Snippet and adding the {snippet get="snippet_name"} embed code to your page.
In this tutorial we will show all three processes. Although creating a Block or a Snippet differs, the contents of the Block or the Snippet could be exactly the same. This contents could be the same as when you add the Snapwidget snippet directly to a page.
Monstra uses the Code Mirror editor to allow editing page, blog, Block and Snippet content with Custom HTML.
1. Adding your snippet directly to a page.
Note: this could be your Home page, Blog page, a Blog post or any other page you have created.
Log in to your Monstra website.
On your dashboard, select Pages under Content.
On the Pages page click on the Edit button corresponding to the page (or Blog post) you want to edit.
For this tutorial we will use the Home page.
On the Edit Page page, insert your snippet where you want your widget to be displayed. In our case we will insert it below any other contents.
Click on the Save and Exit button to save your changes and exit the Page editor. If you’d rather want to stay in the Page editor (for trying out a few variations of width, etc.), click on the Save button. You can then Save and Exit when done.
Your widget will be displayed as follows on your website.
2. Adding your snippet with a Monstra Block to a page.
Note: this could be your Home page, Blog page, a Blog post or any other page you have created.
Log in to your Monstra website.
On your dashboard, select Blocks under Content.
On the Blocks page, click on Create New Block.
On the New Block page, enter a Name for your New Block. If you plan to create a few Blocks with your own snippet as the basis but with some additional content such as the <div> and <hr> tags as shown in the previous instruction, add a number to the name, e.g. Snapwidget_001. Insert your snippet in the main editor text box. You can add any additional HTML code to the Block to ‘prettify’ the displayed widget.
Click on Save and Exit to exit the New Block editor.
The new Block will now be displayed in the list under Blocks on the Blocks page. Please note that Monstra will change the Underscore (a ‘_’) to a Dash (a ‘-‘) when saving the Block so don’t get confused when you do not see your Block on the list if you did use an Underscore in the name.
Click on the dropdown arrow next to the Edit button for the new Block and select View Embed Code on the list (this is the only option available).
On the Embed Code pop-up window, select and copy the Shortcode.
Close the pop-up window and return to your dashboard.
Select Pages under Content.
On the Edit Page page, insert the copied Embed Code where you want your widget to be displayed. In our case we will insert it below any other contents.
Click on the Save and Exit button to save your changes and exit the Page editor.
Your widget will be displayed as follows on your website (you will notice it is exactly the same as when you added it directly to the page as described previously).
3. Adding your snippet with a Monstra Snippet to a page.
Note: this could be your Home page, Blog page, a Blog post or any other page you have created.
Log in to your Monstra website.
On your dashboard, select Snippets under Extends.
On the Snippets page, click on Create New Snippet.
On the New Snippets page, enter a Name for your New Snippet. If you plan to create a few Snippets with your own snippet as the basis but with some additional content such as the <div> and <hr> tags as shown in the previous instruction, add a number to the name, e.g. Snapwidget_001. Insert your snippet in the main editor text box. You can add any additional HTML code to the Snippet to ‘prettify’ the displayed widget. You will see that the entered snippet contents is formatted properly as HTML without text wrapping.
Click on Save and Exit to exit the New Snippet editor.
The new Snippet will now be displayed in the list under Snippets on the Snippets page. Please note that Monstra will change the Underscore (a ‘_’) to a Dash (a ‘-‘) when saving the Snippet so don’t get confused when you do not see your Snippet on the list if you did use an Underscore in the name.
Click on the dropdown arrow next to the Edit button for the new Snippet and select View Embed Code on the list (this is the only option available).
On the Embed Code pop-up window, select and copy the Shortcode.
Close the pop-up window and return to your dashboard.
Select Pages under Content.
On the Edit Page page, insert the copied Embed Code where you want your widget to be displayed. In our case we will insert it below any other contents.
Click on the Save and Exit button to save your changes and exit the Page editor.
Your widget will be displayed as follows on your website (you will notice it is exactly the same as when you added it directly to the page as described previously).