Using Facebook with InstantPro
Freeola Internet Get Dotted Domains Blog Guides Forums
Using Facebook with InstantPro
Menu

October 2017: Google announce that your site needs SSL

Google Chrome to issue a security warning when visiting sites without an SSL Certificate. Learn more.
Latest news

Freeola Guides


Using Facebook with InstantPro

By Freeola Support on 3rd May, 2017 | 0 Comment(s)

If you have a Facebook page set up, there are loads of great social plugins that you can add to your pages in InstantPro.

 

For the purpose of this tutorial, we will add Like & Share buttons. Adding the other Social Plugins is much the same – it will just involves selecting the required plugin from the list and following the instructions laid out in this tutorial regarding the code.

 

Linking to Facebook is a great idea, as it will allow you to reach a wider audience.

 

Step 1: From the Main Menu select Custom Code & Snippets from under the Website Tools heading.

 

Main Menu

 

Step 2: Select the Custom <body> Code tab.

 

Custom Body Code

 

Step 3: You’ll now need to head to the Facebook for developers site by clicking here.

 

From the options on the left hand side, select your desired plugin, as mentioned for the purpose of this tutorial; we’ll be adding the Like Button.

 

Facebook for Developers

 

Step 4: You will now need to complete the Like Button Configurator as seen below:

 

Button Configurations

 

In the URL to Like field, enter the URL of your Facebook page (you can find this by going to your Facebook page and copying the URL from the browser bar). In the example above, we’ve used Freeola’s Facebook page.

 

Next you can enter the Width (this must be no larger that 672px for InstantPro sites). You can also adjust the Layout and Action Type, we’ve decided to leave them as they are.

 

Once you are happy with your selections press the Get Code button.

 

Step 5: Now copy the first section of code, as seen in the image below:

 

Copy Body Code

 

Go back to InstantPro and paste the code into the Custom <body> Code section and press Save.


Body Code Pasted

 

Step 6: Now open the Custom Code Snippets tab and press the Add New Snippet button, choose a name for your snippet and enter this into the Snippet Name field.


Snippets

 

Step 7: Go back to Facebook for developers and copy the code from the second box, as seen in the image below:

 

Copy Snippet

 

Paste this into the Snippet Content field (as shown below), then press Save and Finish.

 

Snippet Paste

 

Step 8: You’ll now need to add the Like button to your chosen pages. To do this, from the Main Menu select Page Manager, select to edit the page you would like to add the snippet to. From the options on the left, select Add Snippet, drag & drop the Snippet onto the page, and place it where you would like the Like button to appear, double click inside the snippet box and from the drop down select the Like Button snippet you added. Once you are happy with the placement press Finish.

 

Snippet Added

 

If you would like to check that the button is displaying correctly on your site, click the Preview Website button in the InstantPro header.

 

Page Preview




Did you find this article helpful?

Yes | No


Article Comments (0)
There are currently no comments on this article.
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.