Google Badge For Your Website or Blog

Google badge will help you get users following your page, profile, or community, adding you to their circle which is another way of expanding your business. Here I already simplified the code, all you need to do is pick the one of your choice, effect your changes and then add to your site or blog.

Below is a code sample that gives you exactly something like in the image above. You can apply your changes to the code and use as deem fit.

<div
    class = "g-page"
    data-href = "//plus.google.com/u/0/117695046768020089599"
    data-layout = "portrait"
    data-showcoverphoto = "true"
    data-showtagline = "true"
    data-theme = "light"
    data-width = "300"
></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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Key changes you need to apply

Replace "117695046768020089599" with your profile, or page, or community ID 
data-layout = "portrait or landscape"
data-showcoverphoto = "true or false"
data-showtagline = "true or false"
data-theme = "light or dark"
data-width = "300"

Badge in Landscape

effect the following changes to profile and community badge respectively

1. For page badge:
class="g-page"

For page badge the following dimension were recommended:
--> Portrait layout
--/--> 180-450 pixels

--> Landscape layout
--/--> 273-450 pixels



2. For  person badge:
class = "g-person"

For person badge the following dimension were recommended:
--> Portrait layout
--/--> 180-450 pixels

--> Landscape layout
--/-->  273-450 pixels
3. For Community badge
class = "g-community"
add data-showowners = "true" to show community owners

For community badge the following dimension were recommended:
--> Portrait layout
--/--> 180-450 pixels

--> Landscape layout
--/--> 273-450 pixels

Hope this clear things up. You can adjust your data-width so that it fit to your content area.

Finally. Hit any of the social buttons or drop a comment below.