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:
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!
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!
Hi, admin this is really great way to add Google+ badge to your site..
thanks for this great tutorial..!