TechLifeWeb

The other day i saw this article on The Next Web about adding a Google+ share icon to your WordPress blog.  It is based on the original article from Alex Moss.  The main limitation is that it uses the mobile version of Google+ to make it work. Not a big deal just not that pretty.

So I thought this is pretty handy and while WordPress is huge among bloggers, there are still tons of other sites and blogs that might want a sharing button.  Then I thought I could take it a step further and include a way to add attribution.

On Google+, you give someone attribution or address someone by putting a + in front of their name. For example +George Washington.  Google Plus then turns these into links and notifies the person they have been mentioned in a post. The problem is, if you “+” some one that isn’t in one of your Circles it doesn’t always work. Unless you know the little known secret: you can “+” a user number and it should work everytime. This also ensures your are attributing the right +John Smith! My code below will take advantage of this feature since people outside of your circles could be sharing from your site.

So, how do you get your user number? Just go to Google Plus and click on your profile. Your user number is that big bunch of numbers up in your url

right after plus.google.com.
Below is the code to place anywhere in your site where you want the share button to show up.

Note: If you want to use attribution, replace the numbers after via + with the numbers from YOUR user number. Be sure to leave the “+” there!

If you do NOT want to use attribution, delete everything between the quotes after attrib=. So it should read: attrib=’ ‘

<a href=”javascript:var d=document,w=window,attrib=’ via +123456789012345678901‘,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f=’https://m.google.com/app/plus/x/’,l=d.location,e=encodeURIComponent,u=f+’?content=’+e(d.title)+e(‘ – ‘)+e(l.href)+e(attrib)+’&v=compose&hideloc=1′;a=function(){if(!w.open(u,’gplusshare’,'toolbar=0,resizable=1,scrollbars=1,status=1,width=450,height=295′))l.href=u;};if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();void(0)”><img class="scale-with-grid" src=”http://dl.dropbox.com/u/118970/plus-share.png” width=”55″ height=”22″ alt=”Share this post on Google+” title=”Share this post on Google+”></a>

Here is the same code in a text file that should make it easier to use since these kinds of things with quotation marks can get confused by browsers.  share.txt

You shoud be able to use this code on any site that lets you add html. Google may have something else in the works to make this easier. But for now, this should fill the gap.

I’ve been spending more of my on-line time on Google+.  I love it because people share great things and it is really easy to add new great people to follow.

One wish I have is to have it be even easier to share things that I find around the web. Google has made it easy for sites to add a +1 button but it isn’t exactly easy to share content. It isn’t to copy a URL and paste it into Google+ but come on, shouldn’t computers help us out here?

To that end, I have put together this bookmarklet to make sharing easier.

If you aren’t familiar with bookmarklets, they are links you add to your browser’s Bookmarks Toolbar. The idea is that you save the link below to your bookmark bar or favorites. Then when you are out on the web and want to share a page with your Google+ followers, you click the link in your bookmarks and it will grab the title and URL of your page, open a new window and let you compose a post to Google+.

Is it perfect? The good part is that it should work just fine whether you use Chrome, Firefox or even IE. Probably others too but I haven’t tested it. The caveat is that it uses the mobile version of Google+ which if you want to post publicly is easy but takes an extra step if you want to just post to some of your Circles.

How to get the bookmarklet

First be sure that your Bookmarks bar is turned on (see below if not)

Drag this link: Share to G+ up to your Bookmarks Toolbar.

UPDATE 29OCT11: New version! See the update at the end of this post.

A note about Bookmarklets in Chrome: Seems there is a bug in Google Chrome that doesn’t automatically set the title of a bookmarklet so you just get the default icon. The icon will work just fine but if you want a title next to it so you remember what the link does, simply right-click on the icon in your bookmark bar and click edit. Add a name like “Share to G+” (without the quotes) and then click OK. Update 29oct11: Since the original post, Google has fixed this issue.

How to turn on the bookmark bar in various browsers
To turn on the Bookmark Bar in Chrome:

• Click the wrench icon on the browser toolbar.
• Select Bookmarks.
• Select Always show bookmarks bar.
• (or ctrl+shift+B)

To turn on the Bookmarks Toolbar in Firefox:

• On the menu bar, click View, select Toolbars, and then select Bookmarks Toolbar.

To turn on the Links bar in IE:

• On the menu bar, click View, select Toolbars, and then select Links.
• Note: in IE, it might be easier for you to right-click on the link above and then select ‘Add to Favorites’. Then in the dialog that pops up, choose the links folder.

Usage
When you are on a page and you click the bookmarklet you will see this screen. See the notes on it for more information:

UPDATE 29OCT11: New version does a +1 and Share using the interface well are all used to in Google+! Now your shares don’t look like they are coming from the mobile interface. Drag this one to your toolbar:
+Share on G+