Adding your Instagram, Facebook or Twitter widget to your HTMLy 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.
Log in to your HTMLy website.
Custom HTML is added as normal text in HTMLy and can be added wherever it suits you. In this tutorial we will run through 3 ways of adding your widget, i.e.
Home Page
In a blog post
An existing page other than Home page
Adding your widget to your HTMLy Home page
On your dashboard select Home on the menu bar.
This will display the Home page in Edit mode to allow you to add or modify content.
Click on Edit. You will be presented by the layout of the current contents of your Home page. On the left is the editor and on the right the actual contents as displayed in the previous figure.
On the editor toolbar you will see a few options, e.g. Bold, Italic, etc. If you use these the code that will be entered is MarkDown code but if you are familiar with HTML you can also enter the HTML code. If you want to enter a horizontal line above or below your widget you can click on the Horizontal Rule button and it will insert the MarkDown code for a Horizontal Rule, i.e. ‘----------‘.
You can also just add the HTML tag <hr> for the same (see previous figure with both options). This also applies to Bold, Italic, etc. where Bold in HTML is
<b>…</b>and**…**in MarkDown and Italic in HTML is<i>…</i>and*…*in MarkDown.
As discussed above you will see that content in HTMLy is what you want to be displayed. The only fixed item on your Home page is the Title (see figure below).
This means that if you want to add a Header to your widget you will have to add some code to the snippet. Adding a header is done via HTML coding using e.g.
<h1>…</h1>or<h2>…</h2>depending on the size of the Header you require.
Without the Header your widget will be displayed as follows
This is done with the standard snippet code as provided by SnapWidget
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/123456" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
For this tutorial we have done the following to add a Header:
<h1>Our Products</h1>
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/123456" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
This will then display as follows
Decide where you want to add your widget, paste the snippet into the text box and click on Save.
If you don’t see the contents displayed while viewing in a browser, click on the Clear cache button and retry.
Adding your widget to a blog post
If you already have created a post that you want to add the widget to, click on Posts and select the post. If not you will have to create a post by clicking on the Add content button.
This will provide the following options for a post type.
For this tutorial we will select a Regular post. Click on Regular post and create a post with the details you want to be displayed. The Title, Category and Tag is mandatory and the rest is optional.
In the text box add a description of your post and then add your snippet below it. The same code changes as in the Home page part explained above applies here.
Click on Publish to publish the post to your HTMLy website. It should display as follows.
Adding your widget to an existing page other than your Home page
Adding your snippet to a page other than your Home page is exactly the same as adding it your Home page. On your dashboard select the page on the menu bar.
This will display your page in Edit mode to allow you to add content.
Click on Edit. You will be presented by the layout of the current contents of your Home page. On the left is the editor and on the right the actual contents as displayed in the previous figure.
Follow the procedure as explained in the Home page part to add your snippet to this page. You can also add Headers and Horizontal Rulers to the text. Here is an example of what it could look like (remember to click on Clear cache if your page doesn’t display properly.
