Integrating Facebook

Grow your audience by making it easy for your readers to like, share

or send pages from YourWebShop to their friends on Facebook.

Contents

Like Button ……………………………………………………………………………………… 2

Share Button ………………………………………………………………………………….. 6

Send Button …………………………………………………………………………………. 10

Page Plugin …………………………………………………………………………………… 14

Comments Plugin …………………………………………………………………………. 19

Follow Button ………………………………………………………………………………. 23

Like Button

Let people share pages and content from your site back to their

Facebook profile with one click, so all their friends can read them.

A single click on the Like button will 'like' pieces of content on the web

and share them on Facebook. You can also display a Share button next

to the Like button to let people add a personal message and customize

who they share with.

To integrate the Like Button into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/like-

button#configurator

Pick the URL of a YourWebShop Page you want to use with the Like

button

Paste the URL to the Like button code configurator (red box 1)

In red box 2 adjust the width of your Like button (or leave blank for

the default as in this example)

Adjust the layout of the Like button choosing between standard, box

count, button count and button (red box 3)

Adjust the action type choosing between Like and Recommend (red

box 4)

In red box 5 tick the boxes if you wish to show friends faces and / or

include a Share button

Click the Get Code button (red box 6)

In the window that appears click Iframe (red box 1)

Copy the code in red box 2 to your clip board

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Like button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML Like button code into the WYSIWYG editor where you

want the Facebook Like button to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save”

button

When the page is viewed live online the Like button will be displayed

where you placed it (see the red box below as an example)

Share Button

Allow people to share to Facebook, share with particular friends or

with a group. Alternatively, they can share in a private message.

The Share button lets people add a personalized message to links

before sharing on their timeline, in groups, or to their friends via a

Facebook Message.

To integrate the Share Button into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/share-

button#configurator

Pick the URL of a YourWebShop Page you want to use with the Share

button

Paste the URL to the Share button code configurator (red box 1)

In red box 2 adjust the layout of the share button choosing between

box count, button count and button

In red box 3 adjust the size of the share button choosing between

small and large

In red box 4 you can choose to tick the Mobile Iframe box. If ticked the

share button will open the share dialog in an iframe (instead of a

popup) on top of your website on mobile. This option is only available

for mobile, not desktop

When you are happy with your share button click the Get Code button

in red box 5

In the window that appears click Iframe (red box 1)

Copy the code in red box 2 to your clip board

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Share button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML Share button code into the WYSIWYG editor where

you want the Facebook Share button to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save”

button

When the page is viewed live online the Share button will be displayed

where you placed it (see the red box below as an example)

Send Button

The Send button lets people privately send content on your site to one

or more friends in a Facebook message.

To integrate the Send Button into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/send-button#send-

button-configurator

Pick the URL of a YourWebShop Page you want to use with the send

button

Paste the URL to the Send button code configurator (red box 1)

Click the Get Code button in red box 2

Copy the code in red box 1 to your clip board

Leave this browser tab window open (you will need it again later)

Open a new browser tab and log into Manage YourWebShop by

entering your existing login credentials used on our main website

shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Send button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the JavaScript SDK code into the WYSIWYG editor at the top of

the page (as shown in red box 1)

Navigate back to the tab with Facebook Send button code in it and

copy the code from red box 2

In the WYSIWYG editor paste this code wherever you want the Send

button plugin to appear on your page (eg red box 2)

Scroll to the top of the WYSIWIG editor page and click the blue “Save” button

When the page is viewed live online the Send button will be displayed where

you placed it (see the red box below as an example)

Page Plugin

With the Page Plugin, you can embed components of your Facebook page

right onto your website.

The Page Plugin lets you easily embed and promote any Facebook Page on

your website. Just like on Facebook, your visitors can like and share the page

without leaving your site.

To integrate the Page Plugin into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/page-plugin

Pick the URL of your Facebook page you want to use with the Page Plugin

Paste the URL to the Page Plugin code configurator (red box 1)

In red box 2 type the tabs that you want the plugin to render. You can now

have timeline, events and messages tabs on the plugin:

Timeline Tab: Will show the most recent posts of your Facebook page

timeline

Events Tab: People can follow your page events and subscribe to events from

the plugin

Messages Tab: People can message your page directly from your website.

People need to be logged in to use this feature

You can add a single tab showing either the timeline, events or messages or

use a comma-separated list within the data-tabs attribute to add multiple

tabs

In red box 3 you can set the pixel width of the plugin. The minimum is 180

and the maximum is 500. If left blank it will be set to a default of 340 pixels

In red box 4 you can set the pixel height of the plugin. The minimum is 70 and

if it is left blank it will be set to a default of 500 pixels

In red box 5 you can opt to use a small header or hide the cover photo

In red box 6 you can select to adapt to plugin container width and show

friends faces. By selecting show friends faces the plugin will show who likes

your Page with real people's profile images rather than just a number. People

visiting your page will see a count of friends that like the page as well as their

profile photos

When you are happy with the plugin press the get code button in red box 7

In the window that appears click Iframe (red box 1)

Copy the code in red box 2 to your clip board

Log into Manage YourWebShop by entering your existing login credentials

used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on “Design

& Content”, then “Content Pages”, followed by the content page where you

want to insert the Facebook Page Plugin

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by selecting the

icon from the editor menu in the top left hand corner

Paste the HTML page plugin code into the WYSIWYG editor where you want

the Facebook Page Plugin to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save” button

When the page is viewed live online the Facebook Page Plugin will be

displayed where you placed it (see the red box below as an example)

Comments Plugin

The comments plugin lets people comment on content on your site

using their Facebook account. People can choose to share their

comment activity with their friends (and friends of their friends) on

Facebook as well. The comments plugin also includes built-in

moderation tools and social relevance ranking.

Comments: Enable high quality discussions.

The highest quality conversations start with who you are. With

Facebook Comments, people use their real Facebook identity, leading

to better conversations on relevant topics.

Facebook Comments enables people to easily have a discussion

around your content, leading to improvement in engagement and

time spent on site. With our powerful moderation tools, you're always

in control of the conversation.

To integrate the Comments Plugin into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/comments#configura

tor

Pick the URL of a YourWebShop Page you want to use with the

Facebook Comments Plugin

Paste the URL to the Comments Plugin code generator (red box 1)

In red box 2 adjust the width of the plugin (or leave blank for the

default as in this example). This width can be either a pixel value or a

percentage (such as 100%) for fluid width. The mobile version of the

comments plugin ignores the width parameter and instead has a fluid

width of 100%. The minimum width supported by the comments

plugin is 320 pixels. The default is 550 pixels

In red box 3 you can specify the number of comments to show by

default. The minimum value is one and the default is 10

Click the Get Code button in red box 4

Copy the code in red box 1 to your clip board

Leave this browser tab window open (you will need it again later)

Open a new browser tab and log into Manage YourWebShop by

entering your existing login credentials used on our main website

shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Facebook Comments Plugin

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the JavaScript SDK code into the WYSIWYG editor at the top of

the page (as shown in red box 1)

Navigate back to the tab with Facebook Comments Plugin code in it

and copy the code from red box 1

In the WYSIWYG editor paste this code wherever you want the

Comments Plugin to appear on your page (eg red box 2)

Scroll to the top of the WYSIWIG editor page and click the blue “Save”

button

When the page is viewed live online the Facebook Comments Plugin

will be displayed where you placed it (see the red box below as an

example)

Follow Button

The Follow button lets people subscribe to the public updates of

others on Facebook.

To integrate the Follow button into YourWebShop first navigate to:

https://developers.facebook.com/docs/plugins/follow-button

Pick the URL of your Facebook Page you want to use with the Follow

button

Paste the URL to the Follow button code configurator (red box 1)

In red box 2 specify the width in pixels of the Follow button. If left

blank (as in this example) it will be the default number

In red box 3 specify the height in pixels of the Follow button. If left

blank (as in this example) it will be the default number

In red box 4 choose the layout style of the button. Can be standard,

box count, button count or button

In red box 5 you can decide if the follow button is small or large

In red box 6 you can specify whether to display profile photos below

the button (standard layout only)

When you are happy with the final design of the Follow button click

the Get Code button in red box 7

In the window that appears click Iframe (red box 1)

Copy the code in red box 2 to your clip board

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Facebook Follow button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML Follow button code into the WYSIWYG editor where

you want the Facebook Follow button to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save” button

When the page is viewed live online the Facebook Follow Button will be

displayed where you placed it (see the red box below as an example)

This guide was produced by Christopher Roberts from the ecommerce department at Ralawise.

Should you require any further assistance, please contact the ecommerce support team on 01244 283208.

Last Updated 08/05/17