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.
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.
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
- You need to copy the code provided above and it into the widget or where you want to display Google Plus Badge.
- Then Get your Google+ Badge code from here, and add it to the same widget where you have added the CSS code.
- 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
Thanks, Friends……Helped me!!!
Glad. You find it helpful 🙂
How to make Facebook page embed responsive?
You can fix the width of container, where you want to embed Facebook post/page.
does the code above can be used on the blogger?
Yes, definitely! It will work on any kind of website.
Worked fine, but
Getting border/padding – wanted without border/padding
Edited for g-person, got it
Used in a test blog
Regards
Just remove the style/css code. It will disable the border.
Cheers!