Content recommendations for mobile websites

A preview showing what the mobile recommendations looks like on a mobile
browser Google+ content recommendations combines search with social data to greet mobile visitors with additional relevant recommended content on your site.

Adding the recommendations bar to your pages

To add mobile recommendations to your page, you will add markup to link your web page to your Google+ Page and to load a JavaScript file. After editing your web pages, you can control the behavior of the widget from your Google+ dashboard.

You can get the code that you will copy and paste into your web pages from your Google+ Page dashboard:

Edit your Google+ Page and ensure that you have a website listed in the website field for the Google+ Page profile.
Open the Google+ dashboard.
Click Manage this page for the Google+ Page that you want to connect and then open the For your site tab.
On the For your site tab, click One time setup in the top right. If you previously clicked this button, the button will instead show as Get setup code.
In the dialog that displays, you will get two HTML code snippets that are preconfigured for this Google+ Page: a link element and a script element.
Add the HTML to all of the pages that will use the recommendations bar. If you skip the previous steps, you can get the numeric {{PAGE_ID}} from the Google+ Page URL.
1. Copy the LINK element and paste it into the HEAD element. The link should be in the following format:
```
<link href="https://plus.google.com/{{PAGE_ID}}" rel="publisher" />
```
2. Copy the following SCRIPT element and paste it into the HEAD element:
```
<script src="https://apis.google.com/js/platform.js" async defer></script>
```
Note: If you already use the https://apis.google.com/js/platform.js script on your pages, you can append the publisherid query parameter or replace the existing platform.js script with the script above. For configuration options for the API, see the JavaScript API.

Customizing when the recommendations display

In the For your site section in your Google+ Page's settings, you can control how recommendations are shown on your mobile pages without needing to make any changes to your code.

The following options are available from the settings page:

Turn on or off recommendations.
Choose pages or paths which should not show recommendations.
Choose pages or paths to prevent from displaying in the recommendations bar.
Choose when to show the recommendations bar:
- When the user scrolls up.
- When the user scrolls past an element with a specified ID.
- When the user scrolls past an element that matches a DOM query selector.

Browse to the For your site section of your Google+ Page from the Google+ Dashboard to adjust any of these options.

Seeing your changes

To improve performance, the browser caches a copy of the JavaScript so it might take up to half an hour for your changes to be visible to all visitors to your site. To see your changes sooner, you can clear your mobile browser cache and reload the page.

Browser support

The mobile recommendations are supported on Android (v2.3.3 and later) and iOS (v5 and later) devices and in the native Android browser, Chrome, and Safari.

Testing recommendations

To test recommendations you can use a mobile device that meets the browser support requirements, or you can test from a computer using one of the following methods:

Use a mobile emulator: You can use the Android emulator that is part of the Android SDK to run a virtual device and then launch the native Android browser to test your site. Similarly for iOS, if you have XCode, you can launch an iOS simulator and then test your site using the native Safari browser.
Use Chrome Dev Tools: Chrome's developer tools allow you to override browser settings like the user agent. The tools offer common, preconfigured user agents settings, which you can use to indicate to the server that you wish to view the mobile version of the page targeted for that particular user agent.

Troubleshooting

Recommendations bar is not showing

Check to make sure you have the Javascript API on the page and that it has the correct Google+ Page ID.
Low traffic sites might have few +1s, so there might not be enough available content to display. If you do not already use the +1 button, consider adding it to your pages.
Ensure that you are using canonicalization on your pages to help Google accurately count +1s.

I disabled the bar but it is still displaying

It can take up to a half hour for your changes to propagate. Try clearing your mobile browser's cache.
Verify that your Google+ Page ID is correctly listed in the publisherid query parameter where you load the JavaScript API. Verify this value matches your Page.

I changed my settings but I don't see the effect

It can take up to a half hour for your changes to propagate. Try clearing your mobile browser's cache.
Verify that your Google+ Page ID is correctly listed in the publisherid query parameter where you load the JavaScript API. Verify this value matches your Page.

Google+ custom URLs for Google+ Pages

Currently, you cannot use a custom URL for your page in the publisherid query parameter when leading the JavaScript API. You can retrieve the identifier by using the Google+ Dashboard and navigating to the For your site section in your Page's settings and clicking the Get setup code button. The ID is available in the markup that is shown.

You can also find the Google+ Page ID by inspecting one of the Google+ Page's posts. You can copy the link from the time stamp on the post to extract the numeric ID:
Showing what the timestamp and URL
looks like on a post.