How to Customize Google Plus Badge for Website or WordPress Blog

Updated on

Important Note –

Google is shutting down Google Plus. Here are the details regarding the same. So, you might not be able to use Google+ Badge in the future.

  • Google+ APIs will be shut down on March 7, 2019. This includes Google+ Sign-in. Learn more.
  • Google+ integrations for web and mobile apps will also cease to function March 7, 2019.
  • This will be a progressive shutdown, with intermittent failures starting as early as January 28, 2019.

Do you want to change the look and feel of your Google Plus Badge, here is a simple tutorial on how to Customize Google Plus Badge for Website or WordPress Blog?

Everybody is showcasing their social circles, fan followings on websites and blogs by using Social widgets. And I do recommend the same, in fact, it is an easy way to showcase your social presence to your visitors.

It is also quite helpful to build a new fan following. You can get Facebook Page Plugin and Google+ Badge widgets code from their developers’ page.

How to Customize Google Plus Badge
How to Customize Google Plus Badge

I personally don’t like that the most of social widgets code cannot be modified. Social Services like Facebook and Google+ forced us to use default widget codes.

It is really hard to modify your G+ Badge and Facebook Page Plugin because they load on your webpage by pushing default JavaScript from the server of the service provider.

Here I am offering some basic CSS code components to Customize Google Plus Badge for Website or WordPress Blog.

How to Customize Google Plus Badge

Let’s start customizing your Google Plus Badge. There is two type of Badges available for websites, one is Portrait mode and other is in Landscape mode as shown in pictures below.

How-to-Customize-Google-Plus-Badge-1
Google Plus Badge- Portrait
How-to-Customize-Google-Plus-Badge-2
Google Plus Badge- Landscape

You can use the following code to customize the Google Plus Badge.

Customizable Code of Google Plus Badge – Portrait Mode

</*
Product Name: Customizable Google+ Badge Code - Portrait
Product URL: https://technumero.com/customize-google-plus-badge-website-wordpress-blog/
Description: How to Customize Google Plus Badge
Tags: Google Plus, CSS, Badge
---------
DO NOT EDIT ABOVE GIVEN DETAILS.
---------
*/>
</***********************************************************
Customizable Google+ Badge Code - Portrait
************************************************************/>
</*******START*******/>
<style type="text/css">
.gplusouter {
height:auto;
width:auto;
background-color:#ccc;
padding-top:10px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
border:1px solid #aaa;
}
.gplusinner {
height:auto;
border:1px solid #ccc;
overflow:hidden !important;
}
</style>
</*******END*******/>

Customizable Code of Google Plus Badge – Landscape Mode

</*
Product Name: Customizable Google+ Badge Code - Landscape
Product URL: https://technumero.com/customize-google-plus-badge-website-wordpress-blog/
Description: How to Customize Google Plus Badge
Tags: Google Plus, CSS, Badge
---------
DO NOT EDIT ABOVE GIVEN DETAILS.
---------
*/>
</***********************************************************
Customizable Google+ Badge Code - Landscape
************************************************************/>
</*******START*******/>
<style type="text/css">
.gplusouter {
height:auto;
width:auto;
background-color:#ccc;
padding-top:10px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
border:1px solid #aaa;
}
.gplusinner {
height:auto;
border:1px solid #ccc;
overflow:hidden !important;
}
</style>
</*******END*******/>

How to use Customized code

  1.  You need to copy the code provided above and it into the widget or where you want to display Google Plus Badge.
  2. Then Get your Google+ Badge code from here, and add it to the same widget where you have added the CSS code.
  3. That’s it, save the widget and refresh your page.

Hope you find this tutorial useful. Are you planning to customize your Google+ Badge? or you might want to recommend this guide with one of your friends, do share this post.

Suggest if you have any idea to customize G+ badge in any different way. Share your views about this post via the comment section below.

Also, read:
How to Add and Customize Facebook Social Plugins – Facebook Page Plugin

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

Hand-picked Related Articles

8 thoughts on “How to Customize Google Plus Badge for Website or WordPress Blog”

  1. Avatar of uhelliton

    Thanks, Friends……Helped me!!!

    Reply
  2. Avatar of Freethinker

    How to make Facebook page embed responsive?

    Reply
    • You can fix the width of container, where you want to embed Facebook post/page.

      Reply
  3. Avatar of excelive

    does the code above can be used on the blogger?

    Reply
    • Yes, definitely! It will work on any kind of website.

      Reply
  4. Avatar of Ifinder

    Worked fine, but
    Getting border/padding – wanted without border/padding
    Edited for g-person, got it
    Used in a test blog
    Regards

    Reply
    • Avatar of Saurabh K

      Just remove the style/css code. It will disable the border.
      Cheers!

      Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.