Integrating Facebook. Contents

Transcription

1 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

2 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: 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)

3 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

4 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

5 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)

6 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: 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)

7 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

8 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

9 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)

10 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: 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

11 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

12 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)

13 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)

14 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: 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)

15 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

16 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

17 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

18 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)

19 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: 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)

20 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

21 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

22 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)

23 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)

24 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: 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)

25 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)

26 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

27 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)

28 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 Last Updated 08/05/17