integrating facebook -...
Post on 17-Oct-2020
5 Views
Preview:
TRANSCRIPT
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
top related