lindner

Heads up webmasters -- please consider updating your javascript snippets.

Originally shared by Ilya Grigorik

All Google+ widgets have been updated to use the script[async + defer] pattern! E.g. +1 button docs: http://bit.ly/YHoj96

What's the benefit? Loading widgets via script[async+defer] does not block the document parser (see [1]), and allows the preload scanner to discover the script resource and initiate an earlier fetch (see [2]). Net outcome, both your page and the widget load faster! Have a G+ widget on your page? Check out the docs for guidance on how to update your snippets.

Kudos to the G+ team for taking the lead on this! Hope to see more widget providers adopt the same pattern.

[1] https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactiv...

[2] https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

#paullindner #paullindner

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

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

#gde #googleplus #polymer #opensourcecode

#paullindner #paullindner #gde #googleplus #polymer #opensourcecode

Hi widget lovers.  You may have noticed a new look for the +1 and +Share buttons that are consistent with the Follow and Badge widgets.  We hope you like them.

You'll also notice that they scale up beautifully.  All of our buttons are now using SVG to render the iconography, and the Roboto font for text. There's even some SMIL animations hiding in there too.  All of this is perfect for your new high dpi laptop, tablet or phone. ‡

Please let us know if they're working for you and if you have any suggestions. Thanks for using Google+ widgets!

‡ results may vary on IE8 and Gingerbread browsers.

#paullindner #paullindner

Would people be interested in a periodic hangout where me and my weekly Google guest makeover your web site with Googley features? We'd have a special guest each time and go over things like authorship markup, security, performance, APIs, widgets etc?

+1 this post if you're interested. Feel free to nominate your favorite site you'd like me to put under the microscope in the comments...

[nifty CC BY-NC-SA 2.0 photo from flickr user spike55151]

#paullindner #paullindner

I'm happy to announce that Hi5 has Widget support.  Yes, I know that this is soooo last year. However there's a twist that makes it better.

We worked closely with Rock You and Slide to integrate tightly with our site, using open standards wherever possible.  For example, for slideshows we created Atom Feeds for each photo album, and a feed-of-albums feed for the list of all albums.  And when it came time to share profile information for horoscopes (birthday) and languages spoken we used FOAF.  Thus we get partners to adopt open standards, plus the work we did for them is usable by everyone. 

The only tricky part was authentication and authorization.  Right now it's using our own AuthToken implementation, but it could probably be done in a better way.  I looked into OpenID as a mechanism, but's way too end-user centric for this type of thing.

Coming soon we should have full Atom endpoints (both in/out with WSSE auth), OpenID provider, and a few other standards based things like XMPP vCard support.  All of this is being done with an Web Services Aspect Oriented toolkit called Enunciate, which has made writing these services a very enjoyable experience.

#atom #foaf #hi5 #openid #widgets