Placing a Google+ badge on your website is a great way to grow your audience on Google+ and get more recommendations for your site in Google search. Using widgets to promote social networking sites is common practice these days. In fact, you’re not only benefiting your website but your end users as well. The only major downfall of adding all these social widgets to your website is that they don’t always match up well with your website’s branding.

In previous tutorials we have explained different tips and tricks to help blend different social media widgets with your website so that they look and feel like a part of it and not just dropped in. In this tutorial, we will teach you how to style one of the newest social widgets on the block, the Google+ badge. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to your own needs.

*Please Note: Since the Google+ badge’s main styling is inside the actual iFrame, there is very little custom modification that can be achieved. Full customization of the widget is currently not possible. If you know of any other methods of styling the Google+ badge please let us know in the comments.

Step 1: Setting Up Your Google+ Badge Widget

First things first, you need to get the code for your Google+ badge from Google. Click here to get your widget code, or copy and modify the code below.

Place this code where you want the badge to render (we will modify this later in the tutorial):

<div class="g-plus" data-width="300" data-height="131" data-theme="light" data-href="{URL TO YOUR GOOGLE+ PAGE}?rel=publisher"></div>
<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>

*Remember to replace ‘{URL TO YOUR GOOGLE+ PAGE}’ with the URL to your Google+ page.

Your Google+ badge should now look this (Go ahead and follow us):

Step 2: Wrapping the Google+ Badge Code

The next step is to wrap the actual Google+ badge widget code. We will be using a combination of a container DIV and a SPAN tag; by utilizing this combo we will have greater control over different customization options.

<div id="googleplus_widget">
  <span>
    <div class="g-plus" data-width="300" data-height="131" data-theme="light" data-href="{URL TO YOUR GOOGLE+ PAGE}?rel=publisher"></div>
    <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>
  </span>
</div>

Step 3: Hiding the Google+ Badge’s Default Border

In this step we are going to hide the Google+ badge’s default border by using some CSS tricks. For some of you, this end result may be the final solution for your styling needs. For others, you may want further customization, which will be covered in the next and final step.

#googleplus_widget{
	width: 298px;
	height: 116px; 
	float: left; 
}
#googleplus_widget span{
	width: 298px;
	height: 116px;
	float: left;
	overflow: hidden;
	background: #fff; 
}
#googleplus_widget span div{
	margin: -1px 0 0 -1px !important;
	position: relative; 
}

In order to hide the borders, you will need to know the actual size of the bordered content (the height of the border content is shorter than the actual height of the widget). If you plan on using a different size widget rather than the default size we are using in this tutorial, you need to measure the actual pixel size of the bordered content.

For this tutorial, the default widget size is 300 x 131 but the actual bordered content size is 300 x 131. So, in order to remove the 1px border, we set both our main container DIV and SPAN tag to 298 x 116. We also set the SPAN tag to overflow hidden so that nothing outside of 298 x 116 will be visible and gave it a background color of white (*optional – just looks better while widget is loading). The most crucial part of this trick is to reposition the widgets main DIV by moving it -1px to the top and -1px to the left, this will move the borders out of visible view.

If you followed all of the steps correctly so far, your Google+ badge should now look this:

Step 4: Adding Custom Style to the Google+ Badge

Now that we have hidden the widget’s default border we can choose to either leave it borderless or add our own custom border that matches the look and feel of our website. In this final step, we will show you how to add a custom border.

Going back to the CSS code from Step 3, we will simply add a border to the container DIV which we used to wrap our SPAN tag and widget code.

#googleplus_widget{
	width: 298px;
	height: 116px; 
	float: left; 
	border: 10px solid #ddd; 
}

Of course, adding a solid border is only one option as there are many different ways that you can now style the outer container. Another option could be to add padding and use a custom background image to achieve a more stylish border for your widget. Since we set up the combination of wrapping DIV and SPAN tags you now have greater control over the outer DIV while leaving the inner SPAN tag alone so that it will always hide the widget’s borders.

Your final Google+ badge should now look this:

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.