Add your Disqus or similar third party services on a page for comments on blog posts or use as a guestbook
This tutorial will use Disqus (https://disqus.com) as an example to show how to add this type of services which has dynamic contents on a page for comments on blog posts or use as a guestbook.
We will demonstrate how to add Disqus on the page "index.html" in the website created from Getting Started Tutorial. You can also get the same website by creating a new website from the template "Sample Template".
We will assume that you already have an account with Disqus.
Open the website from the Getting Started Tutorial or create a new one from the template "Sample Template".
Open the page "index.html".
Insert an HTML Source element on the page by clicking on this button on the toolbar or select "Insert" > "HTML Source" from the main menu.
Double-click on the newly inserted HTML Source element to open it in the "HTML Source Editor".
Login to Disqus "https://disqus.com"
Select "Admin" on Disqus site.
Select "Settings". Choose a site or an organization from the pop-up dialog.
Select "Installation".
Browse to the bottom of the page and click on the following button. We are going to use the "Universal Code".
You will see the following section on the page.
Click on the textbox below the heading "Place the following code where you'd like Disqus to load". Press CTRL-A to select all the text. Right-click on the selected text and select "Copy" from the context menu.
Go back to the "HTML Source Editor" and paste the text to the editor.
Click on the "Save and Close" button.
Move the element to 10 pixels from the left and 1100 pixels from the top. Resize it to 600 x 150.
Right-click on the "HTML Source" element and select "Properties" from the context menu. Select the option "Auto height". Click the OK button to save the setting. When the height of the contents is increased, it will expand downward to accommodate them and pushing down the footer.
Please note that there can only be a single HTML Source element that has auto height and auto width on a page. It must be at the bottom of the other elements on the page as when it expands, it will overlap with any elements that are below it.
When previewing in browsers, it will look like below. The contents expand downward and push down the footer.