O'Reilly

Create a Google+ Mac App for Your Dock

By on  
Google Plus Icon

If you follow me on Twitter, you know that Google+ is my new tech porn.  Google+ is the same technological marvel we've come to expect from Google apps, but the elegant but still simplistic design is a welcomed change from Google.  I want to get used to using Google+ but I don't want to be conscious of keeping the tab open in Chrome.  Luckily MooTools developer Olmo Maldonado shared a slick method creating a custom Google+ app without the need for Fluid, and you can place the app in your dock for easy access!

This technique would allow you to create an app for any website, but the focus of this post will be Google+.  You could use Fluid.app for this, but the technique presented here allows for avoid Fluid.app.

Grab the Google+ Logo

Download the following Google+ logo to the Downloads directory of your computer:

Google Plus Icon

This logo will be used as the application and dock logo.

Download and Execute makeapp.sh

There's an outstanding script available on LifeHacker which provides the user a trio of simple prompts and creates an app based on the input.  Behind the scenes, makeapp.sh copies Google's Chrome and creates separate settings paths (for cookie and history separation).  With those created, an executable is created which opens the Chrome copy to the Google+ url.

Run the script from command line with:

chmod +x ./makeapp.sh && ./makeapp.sh

The script will ask you for three arguments;  provide the following:

  • Application name:  Google+
  • Web URL:  http://plus.google.com/
  • Icon Location:  /Users/{yourUserName}/Downloads/googleplus-icon.png

Google Plus Browser

Now open your applications folder and you'll see a new app called Google+!  Drag the app icon to the dock and now you have a Google+ app in your dock!  The separate history and cookie pool is important so that your traditional Chrome install doesn't muck with your Google+ app's information, and visa versa.  Have fun with Google+!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

  • pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios....

Discussion

  1. Fluid.app is a good solution too.

    • Right, but this solution prevents the need for Fluid.app

  2. This is exactly what I needed. Thank you David Walsh.

  3. And the most awkward Google+ page ever:

    https://plus.google.com/104560124403688998123

    • Leandro

      I think he tries to look this like a friendly competition and It’s fantastic it can be this way…

  4. Keep in mind that you should also use Google sync to keep your settings in place!

    http://www.google.com/mobile/sync/

  5. Erik DeLamarter

    Isn’t this exactly what google chrome’s application shortcuts are for ?

    • It is, indeed, _exactly_ what they’re for…but you can’t create Chrome app shortcuts in OS X.

  6. Love the icon and the idea that you can separate history and cookies, but when it comes to “run the script from command line” – I get really nervous, as this is way out of my league!

  7. Hi – Mashable had an article about incorporating your icon into a blog or website but I can’t find the code to do that … help!

  8. There seems to be one drawback to this solution: if you click a link to a web page, a new tab is opened in a dedicated window. The link is not opened in the default browser (i.e. the primary instance of Chrome).

  9. Jose

    nice one! simple and easy, but for some unknown reason the Google+ logo doesn’t display on my dock, only the script logo does… might have to check that later xD

  10. Thanks for this, David! This fixed my issue of using a Google Apps account and a Google Plus account together.

  11. There is still no notification like mail app has, true?

  12. I’m extremely pleased to uncover this web site. I wanted to thank you for ones time due to this wonderful read!! I definitely really liked every part of it and i also have you saved to fav to look at new stuff in your site.

  13. I used to use this solution, but as @Robert describes links should be opened in the default browser, not a new tab in the dedicated browser. Anyone find a solution to that problem?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...