Adding Facebook to your Website
If you have a personal Facebook page, or even one for your business, you are able to integrate features from the Facebook account with your InstantPro Web site.
Adding these features will enable your friends and/or customers to keep up with your latest facebook updates via your web site.
This information can be added by creating a
Facebook Widget
for your web site. This widget can then be customised to show specific information from your Facebook page.
This tutorial will deal with adding third party code in to InstantPro. Before proceeding we suggest you familiarise yourself with the
Adding HTML code tutorial
so that you are comfortable with some of the steps this tutorial will contain.
To follow this tutorial you will need to log in to your
MyFreeola account and open up the InstantPro Website Builder.
1.
To best illustrate how to add this feature to your InstantPro Web Site a new
Standard type page will be created to which the Facebook Widget will be added.
For help with creating pages we suggest you read the
Creating a Standard Page tutorial.
The image below shows the page to which we will add the Facebook widget.
Click image to view full-size
The page has been split in to two table cells. The text is contained within the left table cell, and the Facebook Widget will be added in to the right table cell.
For more information on tables please read the
HTML Tables Tutorial.
To display the Facebook widget on your website it is necessary to add some extra code to the web page. To do this you will need to click the HTML button, which is highlighted above.
2.
Clicking the HTML button will open the HTML editor, where you will be able to view the source code of your Web page.
Click image to view full-size
Once generated, the Facebook Widget code will be added via the HTML editor. You will now need to visit the
Facebook Widgets Page to create your widget and generate the code. The link will open in a new window, so you will still be able to follow this guide.
3.
On the Facebook Widgets page you will first have to choose the type of Widget you wish to create. Throughout the tutorial a
Page Badge will be created.
Click image to view full-size
Simply click the Page Badge option to proceed to the next step.
If you only have a personal Facebook page, you will need to click Profile Badge from the image shown above. This will take you through a similar process to that described below and will allow you to display
items such as your Facebook status and location on your web site.
4.
You will now be able begin editing how your widget will appear on your page.
Click image to view full-size
To the left you will see a preview of how the widget will appear, and to the right you will see an edit link (which is highlighted in the image above). Click this button to being editing the page badge.
5.
You can now choose what information is shown on the page badge and how it is displayed.
Click image to view full-size
You can first choose whether the badge is displayed vertically, horizontally, or in two columns. If you are unsure as to what would look better, the image to the right will change to give a preview according to the layout option you choose.
After selecting the layout, you will next need to define the items which appear on the page. There are 4 options from which to choose. For the example only the Name, and Picture options are selected.
Once you have defined the badge, click the Save button as highlighted in the image above.
6.
After saving the layout you will be directed to a page where you are able to choose where you will be adding the badge.
Click image to view full-size
You will need to select the Other option from this page.
7.
On clicking the
Other option you will generate the code which you will need to add to your InstantPro website to display your badge on your site.
Click image to view full-size
You will need to highlight the code shown in the box, and copy this so that it can be pasted in to the HTML editor mentioned earlier.
8.
Now the widget code has been generated it will need to be added to the InstantPro web page.
As mentioned earlier in this guide, the Facebook widget will appear in the empty table cell of our example page. In order to achieve this it is necessary to ensure that the Facebook Widget code is placed within the correct location of the HTML code.
Click image to view full-size
In the image shown under
Step 2
there are opening (<td>) and closing (</td>) table cell tags at the end of the page. As there is nothing contained between these tags this indicates an empty table cell. In the main image above you will see the Facebook Widget code
has been added between these tags so as to ensure correct placement on the page. For clarity, the Facebook code has been outlined in red.
Once the code has been added, click the Update button to add the code to the page.
9.
Once you have saved the code you will be returned to the InstantPro Text Editor, where you will be able to see how your page will appear on your page.
You can see the widget has been added exactly where indicated at the start of the guide.
Click image to view full-size
If you are happy with how the widget appears on your page click the Save button, as indicated in the image above, to apply these settings to the page.
10.
Now the content has been saved, the Facebook widget appears on the live page as is shown below:
Click image to view full-size
If you wish to view the page as it appears on the live web site, you can do so on the
InstantPro Tutorials Facebook Widget page. You will also notice that by clicking on the Badge/Widget
you are linked to the InstantPro Tutorials Facebook page.
If you are an avid user of social networking web sites, don't forget that you can
Add Twitter to your Web Site too!
