Adding your Instagram, Facebook or Twitter widget to your Bludit 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.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Some points to look at:
Code editor
Bludit allows you to add your widget by adding contents with HTML code or Markdown code (we will stick to HTML code).
To allow all HTML code for the purpose of adding your widget snippet you must make sure that the EasyMDE editor is activated. By default Bludit has the TinyMCE editor enabled. Have a look at HOW TO CHANGE THE EDITOR for more info regarding changing the editors.
Page types
In Bludit you can create Pages as:
Normal Pages – these are for blogging, i.e. links to these pages are displayed on the main Page (Home page) in the order they are added (or edited). Clicking on the blog post link will then open the Page itself.
Static Pages – these are the pages that will be listed on your menu on the same level as your Home page.
Adding code to these different page types is the same, so we will only look at the Static pages. For more information regarding the different page types, see the Bludit documentation.
Changing the editor settings
Log in to your Bludit website and in the left sidebar under SETTINGS click on Plugins.
Find TinyMCE on the list of plugins. If you see Deactivate it means that it is activated. If so then click on Deactivate to deactivate it.
Find EasyMDE on the list of plugins and click on Activate to activate it.
Leave all settings as they are and click on Save.
Adding your snippet code to a page
Note: We won’t go through the process of creating pages, we will use the pages that were created for the purpose of this tutorial.
Log in to your Bludit website and in the left sidebar under MANAGE click on Content.
On the Content tabs, select Static. Your Static pages will be displayed.
The 2 pages that we have created for this tutorial are empty except for the Title and 2x break elements to separate the widget from the displayed title.
Click on Edit for the page you want to add your snippet to.
In the text code block, insert your snippet and click on Save.
You can Preview your changes by clicking on the Preview button on the toolbar.
Go to your live website. The widget will now be displayed as follows on your live website.
The widget uses 100% of the available space. If this is what you want to see, skip the next part of the tutorial, else read how we can change the way it is displayed. Note that the widget is responsive (will change size on smaller displays).
We can change the width of the displayed widget by changing the iframe width to e.g. 75%:
The widget will now be displayed at 75% but it will be left-justified. To center-justify it (or even right-justify if you want to) we will encapsulate the widget in a
<div>area with the text-align attribute set to center (or right). Note that the widget stays responsive.
In the above we worked with the Grid Display widget. Adding the Slideshow Display widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).
If you added your responsive Slideshow snippet to your page it will be displayed as follows:
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. As with the Grid display, if this is what you want just skip the next steps.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.
We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following:
And displays as follows on your web page.
Make the following changes to the snippet.
Add 2
<div>areas with the following styles (the id’s are just for explanatory purposes for this tutorial, they are not used for any other purpose so you can actually leave them out).<div id=”Wrapper” style=”width: 50%; margin: 0 auto;”>(this sets the Wrapper to 50% of available width and center-justified). With this width setting we can change the width of the snippet to any width we want). Please note that if you make the width < 50% the social media buttons won’t be displayed properly on the images.<div id="Container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">(this sets the area used to display the iframe at 100% of the Wrapper width as well as height = 100% of the width)
Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;)
This will then display the widget as follows.
The widget is also responsive (change the width of your browser to check).