Aligning Social Media Icons Under Thumbnails (posts)

[mmafight]

Hello everyone, please refer everything below to my website MMAFight.com...

I needed some help on implementing the following code from ShareThis.com to my homepage. Under each of my thumbnails for each post (both columns at the top)- I have a F-share, Tweet, E-mail button. I want to switch that to Tweet, F-Like and Google +1. The following code is what I have now which keeps it in a straight line right under each thumbnail post:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center; vertical-align: middle;"><span class="st_facebook_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'  displayText="Facebook"></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_twitter_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText="Tweet"></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_email_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText="Email"></span></td>
      <td style="text-align: right; vertical-align: middle;"><a href="<?php the_permalink() ?>#comments"   rel="bookmark"><span class="comments"><?php   comments_number('0', '1', '%'); ?></span></a></td>
    </tr>
  </tbody>
</table>

This is what ShareThis.com tells me to use for what I want (Tweet, F-Like, Google +1)- New coding:

New Button Code:

<span  class='st_twitter_button' displayText='Tweet'></span><span  class='st_fblike_hcount' ></span><span  class='st_plusone_button' ></span>

Script Tag to put in Header:

<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'898aa522-a0d2-498a-b8b6-e66c995c31f5'});</script>

If someone can help me put in the new code correctly. Everytime I put it, it messes up the entire page. Notice that I want to put it in both columns at the top and the bottom piece as well (UFC Chicks).

Thanks in advance guys.

[NicktheGeek]

Please make the recommended change, post a link to your site, and let me know where this code is going.

[mmafight]

Hi Nick and thanks for the prompt response!

Website: http://MMAFight.com (Homepage)
Code location: Home.php

I want to change the social media icons I have now under each post with thumbnails (2 Columns: UFC and MMA News, UFC and MMA Videos. Also at the bottom: UFC Chicks)


Currently looks like this (F-Share, Tweet, E-mail):


I want it to look like this (Tweet, F-Like, +1):

[NicktheGeek]

have you switched the code?

[mmafight]

Well that's the thing Nick.

Currently my code looks like this:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center; vertical-align: middle;"><span class="st_facebook_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'  displayText="Facebook"></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_twitter_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText="Tweet"></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_email_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText="Email"></span></td>
      <td style="text-align: right; vertical-align: middle;"><a href="<?php the_permalink() ?>#comments"   rel="bookmark"><span class="comments"><?php   comments_number('0', '1', '%'); ?></span></a></td>
    </tr>
  </tbody>
</table>

I tried making the changes by putting it like this:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center; vertical-align: middle;"><span class="st_twitter_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'  displayText="Tweet"></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_fblike_hcount" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?></span></td>
      <td style="text-align: center; vertical-align: middle;"><span   class="st_plusone_button" st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?></span></td>
      <td style="text-align: right; vertical-align: middle;"><a href="<?php the_permalink() ?>#comments"   rel="bookmark"><span class="comments"><?php   comments_number('0', '1', '%'); ?></span></a></td>
    </tr>
  </tbody>
</table>

Notice that I removed "display Text=..." because the code that ShareThis.com gave me, does not include any "display Text" for Facebook Like and Google +1. The text is only for the Tweet button.
But it just messes up my entire page, I think I am doing something wrong. Let me know if what I did above looks correct.

[mmafight]

Any suggestions Nick?

If anyone else has any ideas on how to fix this, feel free to post your recommendations/suggestions.

Thanks in advance guys!