Integrate Google + Contents

Transcription

1 Integrate Google + Contents +1 Button.. 2 Google+ Badge.. 6 Share. 10 Follow 14

2 +1 Button Let visitors recommend your content on Google Search and share it on Google+. You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading. To integrate the Google +1 Button into YourWebShop first navigate to: First select the size of your button in red box 1 choosing between small, medium, standard and tall In red box 2 pick the annotation of your +1 Button, either inline, bubble or none

3 Copy the code in red box 3 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 Google +1 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

4 Paste the code into the WYSIWYG editor at the very bottom of the page (as shown in red box 1) Navigate back to the tab with Google +1 Button code in it and copy the code from red box 4 In the WYSIWYG editor paste this code wherever you want the Google +1 button 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 +1 button will be displayed where you placed it (see the red box below as an example)

5

6 Google+ Badge Link your Google+ page to your site. Get more recommendations for your site in Google search and grow your audience on Google+. To integrate the Google+ Badge into YourWebShop first navigate to: Pick the URL of a Google+ user, profile or community page you want to badge to display on yourwebshop Paste the URL to the Google+ Badge code configurator (red box 1)

7 In red box 2 choose between Icon and Badge (recommended) In red box 3 choose between a portrait and landscape layout In red box 4 drag the slider to adjust the width of your Google+ badge In red box 5 choose between a light and dark colour theme In red box 6 choose whether to enable or disable the cover photo In red box 7 choose whether to enable or disable the tagline Copy the code in red box 8 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 Google+ Badge

8 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 code into the WYSIWYG editor at the very bottom of the page (as shown in red box 1)

9 Navigate back to the tab with Google+ Badge code in it and copy the code from red box 9 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 Google+ Badge will be displayed where you placed it (see the red box below as an example)

10 Share Add this button to content across your site to make sharing on Google+ easy. This button is perfect for content that users may want to share but not +1 (e.g. news or controversial content). When a user finds something interesting on the web, sometimes a lightweight endorsement feels right. Other times, a user just wants to share it with friends, right away. This document will help webmasters and programmers add a Google+ share button to their pages. To integrate the Google+ Share Button into YourWebShop first navigate to: Select the annotation for the button, choosing between none, bubble (horizontal), bubble (vertical) and inline (red box 1)

11 In red box 2 pick the size of your Google+ Share button choosing between small, medium and large Copy the code in red box 3 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 Google+ Share button Scroll down to the WYSIWYG editor

12 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 code into the WYSIWYG editor at the very bottom of the page (as shown in red box 1) Navigate back to the tab with Google+ Share Button code in it and copy the code from red box 4 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

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

14 Google+ Follow Button Link your Google+ page to your site. Get more recommendations for your site in Google search and grow your audience on Google+. The Google+ Follow button is a simple widget that works well in site designs that that use other social follow buttons or when space is constrained. Like the badges, your users can immediately add your page or profile to their circles without leaving your site. To integrate the Google+ Follow Button into YourWebShop first navigate to: First paste the URL of a google user page, profile or community into red box 1 Then choose between a small, medium and large button size in red box 2

15 In red box 3 select the annotation for the button, choosing between bubble (horizontal), bubble (vertical) and none Copy the code in red box 4 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 Google+ Follow button

16 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 code into the WYSIWYG editor at the very bottom of the page (as shown in red box 1) Navigate back to the tab with Google+1 Follow button code in it and copy the code from red box 5 In the WYSIWYG editor paste this code wherever you want the follow button to appear on your page (eg red box 2) Scroll to the top of the WYSIWIG editor page and click the blue Save button

17 When the page is viewed live online the Google+ 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 Last Updated 08/05/17