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!

[NicktheGeek]

looks like you didn't close the <span tag itself. There needs to be a > at the end of the tag to close it.

[mmafight]

Hi Nick,

I don't see exactly where you would like me to put it. If you mean this part (highlighted in RED):

<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"

This part:
middle;"><span class

Do you want me to make it like this?:
middle;"><span> class?

The current code doesn't have a > at the end of span, why would I have to do it here?

I tried it anyway like this and it did not work, no buttons appeared, just the code in the background:

<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>

Let me know if I am looking at the wrong thing, I would appreciate it if you can pinpoint exactly where.

Thanks again

[NicktheGeek]

The top one was fine. On the second two, just before the </span> you need a > to close out the opening span. You also need a ' before teh > to close st_url='

[NicktheGeek]

In most code, PHP, HTML, CSS, JS ..., you have to close anything you open. If there is a < there needs to be a > if there is a ' there needs to be a ' if there is a " you have to have a "

Ever use a ( you guessed it, you need a )

Since sometimes you have nested values like <span attribute="<?php some_function(); ?>"></span> you need to watch so that each < " < is closed with > " > and in the same order they are opened.

[mmafight]

Hi Nick,

Thanks so much for pointing that out, the important thing there was the closing with the ' and the >

As you can see now, the buttons are now live under each column (UFC and MMA News, UFC and MMA Videos), including the bottom section (UFC Chicks).

However, they are not aligned correctly. One is slightly higher than the other for some reason and the Google +1 for some reason is pushed more to the right. How would I be able to put them in one straight line, and with the same amount of spacing between each button?

Look at my Homepage MMAFight.com or check out the pic below and let me know what you think:






And:




Thanks again

[NicktheGeek]

You will need to use teh classes from your span to style the top padding or margin so they all line up.
http://www.w3schools.com/css/css_padding.asp

[mmafight]

So I was able to figure out how to align the icons on my homepage (MMAFight.com) under each thumbnail. However, for some reason the Google +1 button doesn't appear on the first post for Internet Explorer. It works just fine on Google Chrome and Firefox.

I have no idea why it does not appear on IE, how can I fix it? Look below for a screenshot and thanks in advance...

[NicktheGeek]

I don't know, you may need to ask the folks at ShareThis. If the code is correct it should loop the same on all the posts.