• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1561
  • Last Modified:

How can I align horizontally the social sharing buttons?

Can anyone help to fix these social sharing buttons to be like horizontally aligned properly ? including the FB Count, G+ Count also to be horizontal.

I have done so far like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style type="text/css">
.social_network {
    position : relative;
    list-style-type : none;
.social_network li {
    float : left;
    border : 1px solid rgba(0,0,0,.1);
    padding : 2px;  
	 display: inline-block; 


  <ul class="social_network">
	<li> <a href="#" target="_blank"><img src="<?php echo base_url();?>images/email.png" alt="Email" title="Email" />Email</a> </li>
	<!--FB -->
    <li> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      <!-- FB end-->
    <!--twitter -->
    <li> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="logudotcom" data-related="general_tips">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!--twitter end -->
    <!-- Place this tag in your head or just before your close body tag -->
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
      <!-- Place this tag where you want the +1 button to render -->
      <g:plusone size="tall"></g:plusone>
    <li> <a href="javascript:window.print();" target="_blank"><img src="<?php echo base_url();?>images/print2.png" border="0" alt="Print" title="Print" /> Print </a> </li>


Open in new window

Loganathan Natarajan
Loganathan Natarajan
  • 2
  • 2
1 Solution
Chris StanyonCommented:
You're not going to be able to do this with CSS. The google and facebook buttons are pulled in from javascript and the buttons are created inside an iFrame, which you can't style using CSS.

You will need to look at the relevant APIs to see the various options.

With google you have the option of specifying button size - you currently have it set to Tall - try standard:

<g:plusone size="standard"></g:plusone>

With facebook, you set the type (button_count):

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>

Have a read through their API docs for full information:
Loganathan NatarajanLAMP DeveloperAuthor Commented:
Could you please suggest or way to do without javascript? I could see many sites having those buttons sharing in same line(horizontal) ..how do they do?
Chris StanyonCommented:
Re-read my post - it shows you how to set the buttons horizontally.
Loganathan NatarajanLAMP DeveloperAuthor Commented:

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now