Skip to main content
 

John Hjelmstad / Jonathan Beri - same deal as sign in button...  let's incorporate it...

John Hjelmstad / Jonathan Beri - same deal as sign in button...  let's incorporate it...

Originally shared by Gerwin Sturm

As you might have noticed I invested quite some time in Polymer recently. What I like about web components is that they make a lot of things a lot easier, except...

Normally adding a +1 button (or any other Google+ plugin) to a website is just about the easiest thing you can do.

1. Take the code snippet from the docs, e.g. https://developers.google.com/+/web/+1button/

2. Paste it in your code at the appropriate place.

3. Done.

Unfortunately the gapi JS library doesn't like to work with the Shadow DOM. Even if you pass in a direct reference to an element inside of your element it won't work.

The (https://github.com/GoogleWebComponents/google-hangout-button/) works around this issue by adding an element to the light DOM, telling gapi to render the button there, then snatching the element and sending it to the shadow realm dom.

Since there are a lot more widgets to choose from, I took this idea and started by creating a generic element that takes `type` and `data` as attributes to render the appropriate plugin, using the same idea as the hangout-button.

So for the default +1 button you could just use

Or for a profile badge you would use

<google-plugin type='person' data='{"href": "https://plus.google.com/+GerwinSturm"}'>

From there I started to create specific elements, that have the relevant attributes for each plugin.

For now there are only two but others are easy to add:

(the profile attribute will be used to build the href attribute needed by the profile widget)

The plugins still aren't really happy inside of the shadow dom, displaying some errors in the console, and not all interaction seems to be working correctly.

I have some other ideas I will test to improve this, but maybe the gapi team will eventually support Shadow DOM properly ;)

For now these elements work better than not working at all :)

Source code: https://github.com/Scarygami/google-plugins

Docs: http://scarygami.github.io/google-plugins/components/google-plugins/

Demo: http://scarygami.github.io/google-plugins/components/google-plugins/demo.html

 

Your investment in authorship continues to pay dividends.

Your investment in authorship continues to pay dividends. Thanks everyone for implementing -- it makes products like this possible.

Originally shared by AJ Kohn

Content Recommendations for Your Mobile Website

When you help someone find a great article on your site, you’re not only making them happier, you’re inspiring deeper engagement and loyalty. That's why today, we're bringing together elements of Google+ and Google Search to suggest the right content from your mobile website, at just the right time.

For example: Forbes visitors can now more easily discover other Forbes articles based on Search Authorship, signals and other articles with lots of Google+ activity (including +1's and shares). In all cases, recommended content is based on the specific page the visitor is viewing, to boost the relevance of recommendations. And they only appear when people tap for more, so as not to interrupt their browsing experience.

Very interesting on a lot of fronts!