Fix Space Gap in Google+ Twitter Social Buttons with CSS

Fix Space Gap in Google+ Twitter Social Buttons with CSSSocial sharing button from Facebook, Twitter, Google+, and such is a great way to broadcast your content and message through viral user networks. But these social sharing buttons come with different visual design, sizes, layouts, programming languages, etc. Often you will run into issue to consolidate and integrate them together seamlessly into your overall website design.

Google +1 Button Horizontal Gap Issue

With the most commonly-used medium-size +1 button with horizontal bubble count from Google+, the width is fixed at 90px (Google+, Pinterest, etc.) by default. Google does not provide a way for you to customize the width value. According to Google +1 Button Doc, the bubble portion on the right reserved for the count is even wider than the width of the +1 button itself. That is a lot of space reserved for user +1s (up to 4 digits to be filled). With this default setting, if you concatenate Google+, Twitter, and other social buttons together side-by-side like we do above, you will see a lot of horizontal space gap in-between the buttons initially until you have thousands of user +1s on the page. Statistically, 99% of all the web pages worldwide will fall under this threshold. Following is an example:


 

Twitter Button Horizontal Gap Issue

With the most commonly-used tweet button with horizontal count format  from Twitter, the width is fixed at 110px (Twitter, Buffer, etc.). According to Twitter Button FAQ and Documentation, the 55 pixels on the right half is reserved for the count – same as the width of Twitter button itself. That is a lot of space reserved for user tweets (up to 5 digits to be filled). And it is even wider for the international language versions – Japanese button at 130px total. With this default setting, if you concatenate Twitter, Google+, and other social buttons together side-by-side like we do above, you will see a lot of horizontal space gap in-between the buttons initially until you have thousands of user tweets on the page. Statistically, 99% of all the web pages worldwide will fall under this threshold.

Note: The Twitter button issue seems only related to the iFrame version of their button. The JavaScript version of the button code seems working fine with dynamically-adjusted count bubble width.

Solution #1: Use Javascrip Button Code (Twitter-only)

For the people who is having space gap issue with their iFrame version of the Twitter button code, we recommend to change to Twitter’s Javascript version button code. Your issue should goes away. If for some reason, you cannot or do not want to switch to the JavaScript version, try the solution #2 below.

Solution #2: Use Custom CSS Override

Alternatively, you can change the button size and position by applying custom CSS override on the specific button <div> id or class definition. You cannot change the value of the button CSS <div> attributes and values directly in button render code or on web page because the button HTML elements are generated on the server-side dynamically. But you can define CSS override in your own CSS file with the desired width value. For example in the Google +1 button, the 1st +1 button <div> id is “___plusone_0″ (Note: the 2nd +1 button id will be “___plusone_1″ and so forth if you have multiple +1 button on the same web page). To change the +1 button and bubble width from 90px to 70px, you can define the following custom CSS:

#___plusone_0 {
width: 70px !important;
}

To change the Tweet button and bubble width from 110px to 90px, you can define the following custom CSS:

.twitter-share-button {
width: 90px !important;
}

The !important code is necessary to make it work if your button HTML is wrapped in a <iframe> tag in the iFrame-version code. Otherwise you can leave it out. You can see the end result from the social button row at the top of this page. You should obviously adjust your max width for each social button as your audience count grow in order to show all the counts. Our solution is only to provide you a way to dynamically adjust it based on your need at least till Google+ and others come up with a more dynamic solution.

The same technique can be used to customize almost every aspect of the button CSS layout format such as width, height, position, align, margin, padding, font, text color, background color, border, etc. for almost all social buttons as long as you can identify the button <div> class name.

Like this post? Follow us on Facebook, Google+, Twitter, or Blog for more updates. Connect with us if you think our post are helpful to you. We would love to hear your success.

Leave a Reply

30 Day Free Trial. No Credit Card Needed.

Blueurl Marketing Cloud

Social, SEO, blog, backlink, email, image, and video marketing softwares packaged on one single cloud hosting platform. [ Learn More ]

Buy Now ($14.95/mon)

Blueurl Commerce Cloud

Sell eCommerce, eMembership, eClass on one integrated platform with all BlueMarketing features included. [ Learn More ]

Buy Now ($29.95/mon)

Blueurl Services Cloud

All-in-one services on custom addons, design, build to awesome your business with all BlueMarketing & BlueCommerce features included. [ Learn More ]

Buy Now ($59.95/mon)