# Testing Facebook Share and AddThis buttons

**URL:** <https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363>\
**Category:** About This Message Board\
**Created:** [May 13, 2010, 11:52pm UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363 "2010-05-13T23:52:13Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Northern\_Piper](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/northern_piper/32/5304_2.png) [@Northern\_Piper](https://boards.straightdope.com/u/Northern_Piper)\
**Post date:** [May 14, 2010, 4:01am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/21 "2010-05-14T04:01:09Z")

</div>

Please help the techno-peasant: what do these new button-do-ma-hickeys do, exactly? why are they cool?

If it helps to explain my puzzlement, bear in mind that my first computer experience involved punch-cards to input my programs…and I’ve not had much upgrading since then.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:01am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/22 "2010-05-14T04:01:32Z")

</div>

> [@BigT](#):
>
> Can you not just put all the &nbsp; entities outside of the \<a\> tag? You know:
> 
> ```auto
> 
> <a href="http://www.addthis.com/bookmark.php?v=250&username=xashaddthis" class="addthis_button_compact">Share</a>      
> 
> ```

Nope. Doing that screws it up; you get the same overlap effect.

---

<div class="post-metadata">

**Author:** ![Siam\_Sam](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Siam\_Sam](https://boards.straightdope.com/u/Siam_Sam)\
**Post date:** [May 14, 2010, 4:03am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/23 "2010-05-14T04:03:15Z")

</div>

I just noticed these buttons today, and it may be my imagination but it seems like it the Board is now running slower for me. Coincidence? And it’s annoying to have that Bookmark & Share window pop up when I inadvertently mouse-over one of them.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:06am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/24 "2010-05-14T04:06:03Z")

</div>

> [@Siam\_Sam](#):
>
> I just noticed these buttons today, and it may be my imagination but it seems like it the Board is now running slower for me. Coincidence? And it’s annoying to have that Bookmark & Share window pop up when I inadvertently mouse-over one of them.

The board’s been running very slow this week in general.

Yeah, there’s no way to limit the pop-up behavior. If you mouse over, it will pop-up.

ETA: The Facebook Share button doesn’t cause a pop-up, the AddThis (second) button does. I’m going to leave it as is for a week, and if there is decent response on the second button I’m going to delete the Facebook Share button (because it’s already included in the second button anyway). But if the Facebook buttons gets a lot more usage than the AddThis button, then I might leave both in.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:17am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/25 "2010-05-14T04:17:40Z")

</div>

> [@Siam\_Sam](#):
>
> I just noticed these buttons today, and it may be my imagination but it seems like it the Board is now running slower for me. Coincidence?

Also, note that the buttons load only when you open a thread, NOT when you browse the forum main pages. So if the speed outside and inside a thread are the same then it’s not the buttons.

> [@](#):
>
> And it’s annoying to have that Bookmark & Share window pop up when I inadvertently mouse-over one of them.

[QUOTE=Todderbob]  
I’d be fine, if it was less ugly. Less ugly please.  
[/QUOTE]

OK, I think I figured out how to solve both these problems (in fact, all three if you include the whitespace issue). I’ve removed that orange + sign from the AddThis button, and I’ve removed the pop-up option. So now it looks like it’s part of the SDMB template, and it doesn’t pop-up when you mouse over. Except, you have to click on it to share anything.

So, for now, I’m keeping both buttons (the old style and the new style AddThis buttons) and depending on all your feedback and usage patterns (I have analytics set up), I’ll remove one of the AddThis and potentially also the Facebook button.

Keep your feedback coming.

---

<div class="post-metadata">

**Author:** ![Siam\_Sam](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Siam\_Sam](https://boards.straightdope.com/u/Siam_Sam)\
**Post date:** [May 14, 2010, 4:20am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/26 "2010-05-14T04:20:30Z")

</div>

No, it’s still popping up when I mouse over.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:27am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/27 "2010-05-14T04:27:32Z")

</div>

> [@Siam\_Sam](#):
>
> No, it’s still popping up when I mouse over.

There are two different AddThis buttons. One with the orange plus sign, and one without. The second one does not pop-up. Try it.

---

<div class="post-metadata">

**Author:** ![Siam\_Sam](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Siam\_Sam](https://boards.straightdope.com/u/Siam_Sam)\
**Post date:** [May 14, 2010, 4:28am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/28 "2010-05-14T04:28:53Z")

</div>

Do you mean I can make the orange plus sign go away? How do I do that?

---

<div class="post-metadata">

**Author:** ![MsWhatsit](https://avatars.discourse-cdn.com/v4/letter/m/eb8c5e/32.png) [@MsWhatsit](https://boards.straightdope.com/u/MsWhatsit)\
**Post date:** [May 14, 2010, 4:31am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/29 "2010-05-14T04:31:52Z")

</div>

There are now three share boxes showing up for me: the Facebook one, the orange plus sign one, and one that is text-only:

[Screen cap.](http://tinypic.com/r/ac6ewy/5)

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:43am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/30 "2010-05-14T04:43:27Z")

</div>

> [@Siam\_Sam](#):
>
> Do you mean I can make the orange plus sign go away? How do I do that?

Not yet. I’m still testing both designs to get feedback from everyone. So you can’t get rid of the plus sign now, but if I were to remove the button with the plus sign, the pop-up problem would go away.

The trade-off is between pop-up vs. convenience of sharing with one-click.

[QUOTE=MsWhatsit]  
There are now three share boxes showing up for me: the Facebook one, the orange plus sign one, and one that is text-only:  
[/QUOTE]  
Yes, that’s by design, since I’m still testing out all options to see which one is best.

So, we have:

**Button #1: Facebook button**  
Pros: Direct link to share on your Facebook wall. Probably the most used “sharing” site  
Cons: Ugly. Doesn’t blend in with the rest of the colors

**Button #2: AddThis (with orange plus sign)**  
Pros: All-in-one share button. Share using any options (Facebook, Twitter, Email, everything). One click access to all options.  
Cons: Ugly. Pop-up may be annoying to some users

**Button #3: AddThis (plain text “Share”, without orange plus sign)**  
Pros: Simple, clean, elegant. Support sharing through Facebook, Twitter, Email, everythin.  
Cons: Needs an extra click to get to the sharing options page. Not as convenient as Button #2.

So now, the end results (after maybe a week of data gathering) will be either:

a. Button #3 only (likely)  
b. Button #2 only (likely)  
c. Button #1 only (unlikely)  
d. Button #1 and #2 (possible)  
e. Button #1 and #3 (possible)

Feedback (and actual usage patterns) is key to making that decision.

ETA: If you’re late to this thread, some of the stuff might not make sense to you as I am constantly changing stuff around, so my posts may not reflect what you see.

---

<div class="post-metadata">

**Author:** ![Suburban\_Plankton](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/suburban_plankton/32/219_2.png) [@Suburban\_Plankton](https://boards.straightdope.com/u/Suburban_Plankton)\
**Post date:** [May 14, 2010, 4:51am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/31 "2010-05-14T04:51:15Z")

</div>

I prefer the second ‘Share’ button , for two reasons:

1. There’s no mouseover popup. I like it when my computer only does things when I tell it to
2. The text in that button is aligned with the buttons to the right (Thread Tools, etc.). The text in the other button is about a millimeter higher than the other buttons, which is enough to drive me absolutely batty

The ‘Facebook’ button, on the other hand, doesn’t bother me at all…  
One thing which does bother me about that last button, though, is that if you click on it the link opens in the current tab. Both the ‘orange plus sign’ button and the ‘Facebook’ button open in new tabs. I would much prefer having my ‘sharing’ page in a separate tab, and keep the Dope open in the current one

Firefox 3.6.3 on Windows 7, in case it makes a difference

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 4:55am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/32 "2010-05-14T04:55:18Z")

</div>

> [@Suburban\_Plankton](#):
>
> I prefer the second ‘Share’ button , for two reasons:

Good feedback.

Note that you can always right-click or middle-click the second AddThis button, and it works fine that way. So once you learn that simple trick, you don’t need to leave the tab you’re on.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 5:11am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/33 "2010-05-14T05:11:01Z")

</div>

> [@Suburban\_Plankton](#):
>
> The text in the other button is about a millimeter higher than the other buttons, which is enough to drive me absolutely batty

It seems to be driving more than just you batty. So I’ve now removed the text “Share” from the Button #2. Now it’s only an orange plus sign with no text (which also solves that annoying overlapping/blank space issue).

So Button #2 has moved up a notch in the survival ladder.

Right now it’s Button #3 over Button #2 (close behind) over Button #1 for me.

---

<div class="post-metadata">

**Author:** ![BigT](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/bigt/32/12044_2.png) [@BigT](https://boards.straightdope.com/u/BigT)\
**Post date:** [May 14, 2010, 8:45am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/34 "2010-05-14T08:45:02Z")

</div>

Well, I’ve been trying for a while to get the thing aligned properly. I got it working in my debugger, but it messes up if you actually change the page, due to the applied javascript. Since we can’t leave the javascript out, and it’s too obfuscated for me to figure out exactly what it’s doing, I’m left with just adding the following to the \<a\> tag

```auto

style="text-decoration: none"

```

Also, I note that you are trying out a button that does not include the popup. The [AddThis FAQ](http://www.addthis.com/help/menu-offset-and-delay#disable)covers the setting needed to only display the popup when you click. The current version takes you to new page, which is less desirable.

From what I understand, you can’t use this now, as it would disable it on all links on the page. And you’re wanting to tryout both the onhover and onclick behaviors. It probably wouldn’t hurt to ask them if it’s possible.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 9:32am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/35 "2010-05-14T09:32:08Z")

</div>

> [@BigT](#):
>
> Well, I’ve been trying for a while to get the thing aligned properly. I got it working in my debugger, but it messes up if you actually change the page, due to the applied javascript. Since we can’t leave the javascript out, and it’s too obfuscated for me to figure out exactly what it’s doing, I’m left with just adding the following to the \<a\> tag
> 
> ```auto
> 
> style="text-decoration: none"
> 
> ```

The problem is that the orange plus sign is invoked using:

\<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
**class=“addthis\_button\_compact”** \>Share\</a\>

So I can’t really add any styles or formatting to it.

> [@](#):
>
> Also, I note that you are trying out a button that does not include the popup. The [AddThis FAQ](http://www.addthis.com/help/menu-offset-and-delay#disable)covers the setting needed to only display the popup when you click. The current version takes you to new page, which is less desirable.
> 
> From what I understand, you can’t use this now, as it would disable it on all links on the page. And you’re wanting to tryout both the onhover and onclick behaviors. It probably wouldn’t hurt to ask them if it’s possible.

OK, I added that piece of code in. Let’s see what happens.

---

<div class="post-metadata">

**Author:** ![BigT](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/bigt/32/12044_2.png) [@BigT](https://boards.straightdope.com/u/BigT)\
**Post date:** [May 14, 2010, 9:46am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/36 "2010-05-14T09:46:01Z")

</div>

> [@xash](#):
>
> The problem is that the orange plus sign is invoked using:
> 
> \<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
> **class=“addthis\_button\_compact”** \>Share\</a\>
> 
> So I can’t really add any styles or formatting to it.
> 
> OK, I added that piece of code in. Let’s see what happens.

Use inline styles. You should be able to change that to

\<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
class=“addthis\_button\_compact”\*\* style=“text-decoration: none;”**\>Share\</a\>. Or. perhaps \<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
class=“addthis\_button\_compact”\> **\<span style=“text-decoration: none;”\>** Share**\</span\>\*\*\</a\>

[del]And, so far, that extra code hasn’t done anything.[/del] Scratch that. It took a bit to propagate, I guess. The orange icon now must be clicked to see the sharing options. Me likey.

Also, I found the orange plus sign at [http://s7.addthis.com/static/t00/logo1414.gif](http://s7.addthis.com/static/t00/logo1414.gif), and even have a version that uses \<img\> tags. It works, except the image also gets underlined, which looks weird. Oh, and the alignment sucks even more than using the CSS. I got it reasonably close the most commonly used magnifications, though.

---

<div class="post-metadata">

**Author:** ![BigT](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/bigt/32/12044_2.png) [@BigT](https://boards.straightdope.com/u/BigT)\
**Post date:** [May 14, 2010, 9:55am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/37 "2010-05-14T09:55:33Z")

</div>

Oh, and I never got the script working. Yeah, that’s important. It works just like the second Addthis link, taking you to a new page when you click on it. I tried invoking the javascript only when it was clicked, but that didn’t work. IF there’s a class for just text links, though you might be able to get the following to work:

\<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)” id=“link\_2”\>\<img style=“border-style: none; margin-right: 5px; vertical-align: -4px; text-decoration: none; width: 16px; height: 16px;” src=“[http://s7.addthis.com/static/t00/logo1414.gif](http://s7.addthis.com/static/t00/logo1414.gif)”/\>Share\</a\>

ETA: Did I mention I’ve been pretty much working on this since my last post six hours ago? 😛

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 10:07am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/38 "2010-05-14T10:07:40Z")

</div>

ETA: At this point, I’ve enabled the mouse-over pop-up, so any mouse-over pop-up is intentional.

> [@BigT](#):
>
> Use inline styles. You should be able to change that to
> 
> \<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
> class=“addthis\_button\_compact”\*\* style=“text-decoration: none;”\*\*\>Share\</a\>.

That didn’t do anything.

> [@](#):
>
> Or. perhaps \<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)”  
> class=“addthis\_button\_compact”\> **\<span style=“text-decoration: none;”\>Share\</span\>** \</a\>

This one is very interesting.

In Opera: it shows the orange plus sign with Share as before. The same screwup with alignment remains.

In Chrome: The orange plus sign doesn’t display, and the Share text alignment is screwed.

In Firefox: The orange plus sign doesn’t display, and the alignment is in line with the Thread Tools text. And the Share text causes a pop-up on mouseover. Ideally, this is what I want in all 3 browsers.

> [@](#):
>
> [del]And, so far, that extra code hasn’t done anything.[/del] Scratch that. It took a bit to propagate, I guess. The orange icon now must be clicked to see the sharing options. Me likey.

It wasn’t a propogation issue. I put it in the wrong place in the code and took a few minutes to figure it out.

> [@](#):
>
> Also, I found the orange plus sign at [http://s7.addthis.com/static/t00/logo1414.gif](http://s7.addthis.com/static/t00/logo1414.gif), and even have a version that uses \<img\> tags. It works, except the image also gets underlined, which looks weird. Oh, and the alignment sucks even more than using the CSS. I got it reasonably close the most commonly used magnifications, though.

I don’t actually want the orange plus sign if I can have just the text “Share” do what the orange plus sign does (i.e. pop-up on mouse over, and aligned with the rest of the text).

---

<div class="post-metadata">

**Author:** ![BigT](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/bigt/32/12044_2.png) [@BigT](https://boards.straightdope.com/u/BigT)\
**Post date:** [May 14, 2010, 10:11am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/39 "2010-05-14T10:11:31Z")

</div>

Perhaps [this](http://www.addthis.com/help/custom-buttons) would be of use, then.

ETA: So you prefer on-mouseover, rather than on-click? I prefer the latter.

---

<div class="post-metadata">

**Author:** ![xash](https://avatars.discourse-cdn.com/v4/letter/x/c6cbf5/32.png) [@xash](https://boards.straightdope.com/u/xash)\
**Post date:** [May 14, 2010, 10:15am UTC](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363/40 "2010-05-14T10:15:52Z")

</div>

> [@BigT](#):
>
> \<a href=“[http://www.addthis.com/bookmark.php?v=250&username=xashaddthis](http://www.addthis.com/bookmark.php?v=250&username=xashaddthis)” id=“link\_2”\>\<img style=“border-style: none; margin-right: 5px; vertical-align: -4px; text-decoration: none; width: 16px; height: 16px;” src=“[http://s7.addthis.com/static/t00/logo1414.gif](http://s7.addthis.com/static/t00/logo1414.gif)”/\>Share\</a\>

That won’t work because the actual menu box is loaded by the class, which is never invoked because the class has been substituted by a static image. Which is why your script won’t work in this case.

[Previous page](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363.md?page=1)

[Next page](https://boards.straightdope.com/t/testing-facebook-share-and-addthis-buttons/539363.md?page=3)