I recently added a Google+ badge to the sidebar of a WordPress website that I maintain. Adding the badge itself was straightforward, but I had some trouble because the minimum width of the badge was 180px and the width of my sidebar was 160px. This led to the badge being shifted to the right, like this:

Google+ badge before shifting to the left

The Facebook box and Twitter links above and below are centred correctly, but the Google+ box was over to the right ever so slightly. I tried changing the width, but eventually solved my problem very simply in CSS. I inspected the element and found that the badge is being displayed in an iframe inside a div called ‘___page0’. So I selected that div and the iframe inside it and shifted them both over to the left 10px, like so:

#___page_0, #___page_0 iframe{
position: relative;
left: -10px;
}

Now the badge is centred correctly!

Google+ badge after shifting to the left

I tried to change the width using CSS, but struggled as I think the width is set by the Javascript used to create the badge. I’m sure there must be some way of achieving this, but I’m happy with my CSS fix. Please let me know if you find a way of forcing the minimum width below 180px, it’d be really useful to know!

One thought on “Changing the position of a Google+ badge in the WordPress sidebar

Leave a Reply

Your email address will not be published.