Testing Facebook Share and AddThis buttons

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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


style="text-decoration: none"

Also, I note that you are trying out a button that does not include the popup. The AddThis FAQcovers 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.

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

<a href=“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
class=“addthis_button_compact”** style=“text-decoration: none;”>Share</a>. Or. perhaps <a href=“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, 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.

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” 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”/>Share</a>

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

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

That didn’t do anything.

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.

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.

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

Perhaps this would be of use, then.

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

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.