CODEWITHSUNDEEP
htmlcssiframegoogle-plus
Igor Azevedo
Igor Azevedo

Reputation: 1185

Change Google+ badge style

I generated a Google+ badge for my page.

The thing is, it only has 2 themes (light and dark), and it doesn't fit quite well on my website.

I'd like to remove the gray border and make the background transparent.

The code Google provides basicly includes a js file with their API, which then appends an IFrame to my page with the badge.

Because of that, I can't change the CSS of the IFrame because the src's domain isn't the same domain as mine.

I cant seem to find any documented way to customize the badge style.

However, I came across with the Android website and noticed they have the same badge but managed to remove the background and border. After digging through the android's page source code I found that they are using the same API as I do and the same markup to include the badge.

Does anyone know how they managed to customize it?

Upvotes: 2

Views: 2571

Answers (2)

bloodymurderlive
bloodymurderlive

Reputation: 387

Consensus online seems to be that changing the background isn't possible.

The borders, however... The answer at this site worked for me: http://www.daddydesign.com/wordpress/how-to-customize-your-google-page-badge/

You add this script after the Google-supplied div for the badge:

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

Then add these styles in your header:

#googleplus_widget{
    width: 318px; /*two pixels LESS than badge width */
    height: 362px; /*two pixels LESS than badge height */
     /*float: left;*//*I replaced this with three lines below, which center the badge*/
    position:absolute;
    left:0;right:0;
    margin:0px auto 0px auto;
}
#googleplus_widget span{
    width: 318px; /*two pixels LESS than badge width */
    height: 362px; /*two pixels LESS than badge height */
    float: left;
    overflow: hidden;
    background: #fff;
}
#googleplus_widget span div{
    margin: -1px 0 0 -1px !important;
    position: relative;
}

The width and height attributes should be two pixels less than the width and height of your badge.

This is a pretty nice and clean solution, because you don't have to worry about positioning other elements on top of the borders to hide them, meaning the dimensions of the badge actually are what you see on the page.

Upvotes: 1

abraham
abraham

Reputation: 47873

Look at the styling for <a href="//plus.google.com/104629412415657030658" id="page-badge-border"></a> on android.com. It has a white boarder that covers the grey border of the badge.

Upvotes: 1

Related Questions