Adding your Instagram widget to your Dotclear website/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 website.
Dotclear is an open-source web publishing software. The project's purpose is to provide a user-friendly tool allowing anyone to publish on the web, regardless of their technical skills.
For this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. We will go through the process of adding the widget to pages as well as posts. When adding your snippet code (or modifying it), always make sure the Source option is selected on the editor toolbar.
Dotclear uses the dcCKEditor allowing you to enter HTML, JavaScript as well as CSS code. This allows adding your widget snippet without any hassles.
A. Start.
Log in to Dotclear, go to your dashboard and click on Pages under the Blog left sidebar menu.
Select the page you want to add your widget to on the Pages page. For the first part of this tutorial we have selected a page to display the Grid Display widget.
The page editor will open allowing you to add your snippet to your page.
Insert your snippet code in the Content text box. Make sure the Source option is selected on the editor toolbar.
Click on Save to save the code to your page.
As soon as you have saved your code a Preview button will appear next to the Save button. To preview your snippet on the live page, click on Preview.
This will open the preview browser page. To close the preview and return to the editor page, click on the Close (X) button at the top right of the preview page.
To publish your page make sure Published is selected on the Page status dropdown list in the right sidebar menu and click on the Save button again.
If you click on any of the items in the Grid Display the item will be displayed in a lightbox.
B. Adding your Slideshow Display widget.
In the above we added the Grid Display widget code. Adding your Slideshow widget code follows the same procedure with a few possible changes which we will explain as we go along.
If you added your Slideshow Display widget it will be displayed as follows in the Preview page.
You will notice that the widget is displayed left justified.
You can use the justification setting on the editor toolbar to center justify the widget if required. In normal editor view (make sure Source is not selected) the editor will display the top part of the widget. Place your cursor to the right of the displayed image and select the required option on the editor toolbar.
Click on Save and Preview to see how the widget will now be displayed.
If you click on any of the images in the slideshow it will be displayed in a Lightbox.
C. Adding your widget to a Blog post.
The process of adding your widget (Grid or Slideshow) to a blog post is the same as adding it to a web page in Dotclear.
To create a new post select New Post under the Blog left sidebar menu.
This will open the post editor allowing you to create a new post with your widget as content.
Add a title for this post and insert your snippet. The saving, previewing as well as publishing the post is the same as for a page.
Previewing the post will display it as follows.T.
If you click on any of the items in the displayed widget (Grid or Slideshow), the item will be displayed in a lightbox.
