Adding your Instagram, Facebook or Twitter widget to your FlatPress blog 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 blog.
FlatPress is a lightweight, easy-to-set-up blogging engine. Plain and simple, just PHP. No database needed! Being around since 2006, FlatPress is mature and well-tested.
For this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. You can add your widget to a blog post as well as to a Static page.
To allow the use of Custom HTML code (CSS, JS and iframes) we need to make sure that under the BBCode setting.
A. Editor setup to allow Custom HTML
Log into your FlatPress account and on your dashboard (the Administration area) select Plugins on the top toolbar.
Select BBCode on the Plugins tab and enable the Inline HTML as well as the Toolbar option.
Click on Save configuration to complete the setup.
B. Adding your widget to a static page
Log into your FlatPress account and on your dashboard (the Administration area) select Statics on the top toolbar. Select the page you want to edit from the provided list under Manage Statics.
FlatPress will then display the Wite Static editor for the specific page
Insert your widget snippet in the Content area (at the bottom).
Click on Preview to display a Preview of your widget in the top area
Due to the limited height available for the Preview, it could happen that the whole widget could not be displayed. It will then display a vertical scrollbar.
To see what the widget will look like on your live website, click on Publish and open your website in a new page in your browser
The widget fills the whole available width on your page. If this is what you want, skip the following steps. If you want to make the widget smaller you can change the iframe width in the snippet to e.g., 80%.
The widget will now be displayed at 80% 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 width set to 80% and the margin set to auto. Leave the iframe width at 100%. Note that the widget stays responsive. Please note that if you make the width < 80% the social media buttons won’t be displayed properly on the images and you won’t be able to click on an image to display it in a lightbox.
This will then display the widget as follows (have a look at how the social media buttons are displayed).
If you click on any of the images in the grid, the image will be displayed in a lightbox.
C. Adding your widget to a static page
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: 65%; margin: 0 auto;”>(this sets the Wrapper to 65% 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 < 65% 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.
D. Adding your widget to a blog post.
Adding your widget to a blog post uses the same process as for the static pages, they will then be displayed as blog posts with the normal information such as dates, who posted it, etc.
