Adding your Instagram, Facebook or Twitter widget to your Serendipity 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.
Serendipity allows you to create a website within a couple of minutes without real coding knowledge. Some knowledge of HTML and CSS will be to your advantage when adding your widget but all steps are explained in detail so you can don’t need to be an HTML boffin.
Adding your widget to your Serendipity website is achieved by adding Custom HTML to a blog entry on your website. For this tutorial we will demonstrate adding the Grid Display and the Slideshow Display. The process is the same for both display types with a few subtle differences to make the widget appear as you need. As we go along we will explain the difference.
Please note that Serendipity allows you to use a WYSIWYG editor.
Log in to your Serendipity website.
On your dashboard, click on the Personal Settings button.
Scroll down to the Editor part, this is where you can choose to use a WYSIWYG editor or not.
If you choose to use a WYSIWYG editor (anyone on the list) there are a few rules where it reformats your code. To change these settings you can go through the whole setup process of the editor (meaning you need to have access to your webhost folders to do this).
For the purpose of this tutorial we won’t go into these details. We will use the normal (non-WYSIWYG) editor.
Click on Save at the bottom of the Personal Settings page if you made any changes to the Settings.
With the non-WYSIWYG editor selected, Serendipity does not display your widget in edit mode but it allows you to see it in a Preview mode which is not always accurate. To see the result on your website you must save your changes after any change you make to an entry and refresh your website view.
Adding your snippet to your web page.
Log in to your Serendipity website.
On your dashboard under Content, click on New Entry or Edit Entries (any of the 2 options depending on what you want to do). If you selected Edit Entries, select the entry you want to edit.
The editor for New or Existing entries is exactly the same. For the purpose of this tutorial we will add a new entry.
In the Title text box, insert an appropriate title for your entry.
If you have categories set up on your website, select it under Categories.
Enter your snippet in the Entry Body text area.
Scroll down to the end of the Entry Editor form and under Advanced Options (expand if necessary), select Markup: NL2BR under Disable Markup plugins for this entry before saving your post. This will eliminate any useless spaces before your displayed widget.
Click on Preview to see what your widget will look like.
To see how it will be displayed on you website, make sure the Publish option is selected and click on Save.
View your website.
Adding a Grid Display widget.
If you added your standard unmodified Grid Display widget snippet to your webpage then your widget will now be displayed as we have shown in the previous picture.
To change the displayed width you can change the iframe width of your snippet, e.g. change the width to 75%.
If you only change the width of the iframe it will now be displayed smaller and left-justified on your webpage.
To display the widget center-justified we are going to encapsulate the widget in a <div>…</div> area and add in-line CSS (the style parameter) to the <div> tag.
If you reduce the displayed width too much you won’t be able to click on the thumbnails to display the pictures in the Lightbox, only the Sharing buttons (Facebook, Twitter and Pinterest) will be available. This you can test by trial and error but we found that with the iframe width set to 75% this is about the smallest you can go. This also depends on how you did set up your widget on your SnapWidget dashboard on snapwidget.com.
Add a
<div>tag just before the <iframe … tag and add style=”text-align:center;” to it.
Your widget will now be displayed as follows on your web page.
The above tutorial is for adding your Grid Display widget to your website. The next part will cover the process for adding a Slideshow Display widget.
Adding a Slideshow Display widget.
For proper usage of your Slideshow widget on your Serendipity website you will need a non-responsive widget. You have 2 options:
Create a new Slideshow widget (free or PRO) and set Responsive to No.
Change the responsive setting of your existing widget to No. If you are using your Slideshow widget on other websites as well, we suggest to rather create a new widget with the same parameters.
If you add your snippet to your web page your widget will now be displayed as follows.
As with the Grid Display, with the Slideshow snippet you cannot change the justification of the widget. To change the appearance of your Slideshow widget we will be adding some code to the contents of your snippet. We will create a new content block (a <div> area) with the style property set as follows:
Encapsulate the widget in a <div>…</div> area with the style property parameters as shown above.
The iframe size (width and height can be changed by modifying the width and height values in the style property of the iframe. The initial values will be the Thumbnail Size as set up on your SnapWidget dashboard. These values must be in pixels, not percentage (remember we are now working with a non-responsive widget). We will change these values to 300px for this tutorial. Please note that the width and the height values must always be the same to create a square widget display.
Complete modified snippet:
This will then display your widget as follows.
Using the above settings to change the appearance of your Slideshow widget will influence the display of the Sharing Buttons (Facebook, Twitter and Pinterest). With the layout used in this tutorial we found that if the <iframe> area width was set to below 400px, the Sharing Buttons are not displayed (for the Pro widget they are still displayed in the Lightbox when clicking on an image).
Remember to click on Save after each change you make to the inserted code.