Addthis social buttons

[Jon12345]

I want to install some social icon buttons to my 3.8x forum. The code is from addthis.com.

How would I put it just to the left of the Thread Tools button at the top of each thread?

Thanks,

Jon

[kh99]

If you edit the SHOWTHREAD template (in the Show Thread Templates group), and search for "<!-- toolbar", a little below that you should find this code:

		</div>
	</td>
	<td class="vbmenu_control" id="threadtools" nowrap="nowrap">
		<a href="$show[nojs_link]#goto_threadtools"<if condition="is_browser('ie')"> accesskey="3"</if>>$vbphrase[thread_tools]</a>

You could add a table cell for your code, like:

		</div>
	</td>
          <td class="tcat">
// Some code here
          </td> 	
            <td class="vbmenu_control" id="threadtools" nowrap="nowrap">
		<a href="$show[nojs_link]#goto_threadtools"<if condition="is_browser('ie')"> accesskey="3"</if>>$vbphrase[thread_tools]</a>

[Jon12345]

I've tried adding it there, but the buttons go vertically rather than horizontally. The table cell is there and I have even tried adding a width="300" to the cell using this:

<td width="300" class="tcat">

However, that still doesn't solve it.

Any ideas on why I can't make the cell wider so the buttons go horizontally?

Edit: I found some code in another thread: https://vborg.vbsupport.ru/showthread.php?t=209507

I used this:

<td class="vbmenu_control" id="threadtools" nowrap="nowrap">

That lets the buttons go horizontal in IE but not Firefox.

Any ideas on why not?

[kh99]

I'm not sure, but try using style="white-space: nowrap;" in place of nowrap="nowrap".

[Jon12345]

I tried changing it from:

<td class="vbmenu_control" id="addthis" nowrap="nowrap" width="150">

to

<td class="vbmenu_control" id="addthis" width="150" style="white-space: nowrap;">

That made it go vertical in both IE and Firefox, so still seeking a solution.

[kh99]

You could try making sure there is no white space in between your buttons (I assume they are links, so take out spaces or newlines between </a> and the next <a ...), and if you need space somewhere use &nbsp; instead of an actual space.

I'm not an expert in the layout stuff (in case you haven't figure that out yet), but if it still doesn't work it might help if you could post the actual code you're adding.

[Jon12345]

Here is the code in full, with my specific id edited for security:

<td class="vbmenu_control" id="addthis" nowrap="nowrap" width="150">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2ada7534567c8"></script>
<!-- AddThis Button END -->


</td>

[kh99]

OK, did you try this:

<td class="vbmenu_control" id="addthis" nowrap="nowrap" width="150">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2ada7534567c8"></script>
<!-- AddThis Button END -->


</td>

(I just took the all the line breaks out from between the <div> tags for that div).

[BirdOPrey5]

I do this for my share buttons... the edit to the SHOWTHREAD template was a little more complicated than I first expected.

This is what I wound up with- my edits are in red.

	<td class="tcat" width="175">
		<div class="smallfont">
		<if condition="$show['firstunreadlink']">
			<a href="$firstunread"><img class="inlineimg" src="$stylevar[imgdir_button]/firstnew.gif" alt="$vbphrase[view_first_unread]" border="0" /></a>
			<a href="$firstunread"><strong>$vbphrase[view_first_unread]</strong></a>
		</if>
		&nbsp;
		</div>
        <img src="clear.gif" width="175" height="1" border="0" />
	</td>
        <td class="alt1" width="100%" align="right" padding="0" style="padding-top:0px; padding-bottom:0px; padding-right:0px; background: #869BBF url(/forums/images/gradients/gradient_tcat.gif) repeat-x top left;">
        
          SHARE BUTTON CODE HERE

        </td>
	<td class="vbmenu_control" id="threadtools" nowrap="nowrap">
		<a href="$show[nojs_link]#goto_threadtools"<if condition="is_browser('ie')"> accesskey="3"</if>>$vbphrase[thread_tools]</a>

Note: I used class "alt1" and added in the background because when I used class "tcat" I was getting display issues with the Digg button. If you're not using Digg you can maybe get away with this line:

<td class="tcat" width="100%" align="right" padding="0" style="padding-top:0px; padding-bottom:0px; padding-right:0px;">

Instead of the longer "alt1" line.