Setting up Google 2FA using an app not SMS

Google appear to be intentionally hiding the option to use an authenticator app such as Google Authenticator, 1Password and LastPass to store and generate 2FA codes for your Google Account login.

You can use them, but it’s not clear how, and you have to temporarily submit a mobile number you have access to before you’ll find the option available to you.

  • Head to manage your account.
  • Choose to add 2FA
  • Select to do it via SMS
  • Submit your number
  • Enter the code they send you
  • On the next screen select to add an authenticator app
  • Follow the steps and submit the code you can now access
  • View the backup codes and store them somewhere safely
  • Finally you can remove your mobile number from the list of option

So to not use your mobile number and SMS (which is vulnerable to hijacking) you first have to submit your mobile number ¯\_(ツ)_/¯

Hide Google Related Bar On Your Website With CSS

Update: The css method of removing / hiding the related bar no longer works. See the new (javascript only) fix at bottom of this post.

Google recently released a new browser extension for Internet Explorer and Google Chrome called Google Related. I’m sure it will be coming to Firefox soon.

The extension adds a bar to the bottom of some website which shows things like maps, video, images, reviews and related websites.

To get the bar to show at the bottom of your browser Google injects an iframe at the end of your body tag which is positioned with css to always sit at the bottom of your browser and has a high z-index to ensure it always sits above everything else on the page.

No longer working css fix

The beauty of Google Related using an iframe in your own pages html is that you can hide it using a single css declaration. For now it’s as simple as…

iframe.grelated-iframe {
	display: none;
}

…although in the future, if Google get wise to webmasters hiding their Google Related bar you may need to do something like

iframe.grelated-iframe {
	left:-99999px !important;
	display: none !important;
}

Update November 2011

Google no longer makes it easy to hide the tool using css. They’ve ensured every css property you could use to hide the iframe is forced as !important.

The only option left (if you still want to hide the bar) is to use javascript to hide or remove the element.

I’m suggesting a setInterval incase Google does an update which keeps trying to reshow / add the iframe.
I’m suggesting ‘none !important’ because it’s the highest selector value you can add and least likely to be replaced by other css on the page or that Google choose to inject.

setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);

That javascript will check all iframes in the page once every second to see if it’s the pesky Google related bar by checking the url (which may need updating in the future!) and hides it if it does.

If you’re unsure of what to do with the javascript code, copy the JavaScript above and paste it into a .js file which is included on every page of your site, or copy the whole next code chunk and paste it just before the closing body tag of your page.

<script type="text/javascript">
setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);
</script>

If you use jQuery on your site then the following will do something very similar:

setInterval(function()
{
    $('body > iframe[src^=http://www.gstatic]').css({display:'none !important'});
},1000);

Hide / Remove Info Window / Bubble for Embedded Google Maps

A quick note added in February 2011. Google has now removed the iwloc part of the url in most cases. To remove the pin, you can now add &amp;iwloc=near to the end of the iframe src attribute. So….

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&aq=&sll=53.41654,-2.236788&sspn=0.033864,0.090294&ie=UTF8&hq=&hnear=Manchester&t=h&z=12&ll=53.480712,-2.234376&output=embed“></iframe>

…would become…

<iframe width=”300″ height=”300″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=manchester&aq=&sll=53.41654,-2.236788&sspn=0.033864,0.090294&ie=UTF8&hq=&hnear=Manchester&t=h&z=12&ll=53.480712,-2.234376&output=embed&iwloc=near“></iframe>

Thanks to John below for pointing this out

Old information:

Google have tweaked things again. Here is the latest way (March 2009) to embed a map including a location pin without the annoying info window or info bubble showing above it and ruining the maps centre location.

This is particularly important if you are using a small sized map less than around 400px square.

Continue reading