584065 - Add Twitter button to opinions

Status: VERIFIED FIXED

(Input :: General, enhancement, P3)

Description

[Fred Wenzel [:wenzel]]

If and when we can link to messages directly, we should consider providing an automatic short URL for each message (perhaps on a separate domain), so it's easier to tweet/link to the messages.

Comment 1

[Aakash Desai [:aakashd]]

Agreed, this would be a pretty nice win.

Comment 2

[Fred Wenzel [:wenzel]]

We talked about it a little and we *could* use the mzl.la corporate bit.ly account, though that'd require an API call for every one of the messages submitted, which would be a lot.

Another option I see is, not creating a short URL by default, but on the individual message page, we could make a link that AJAXily contacts our app -- the app then creates a short URL and returns it (and saves it to the DB). The next time someone visits that message page, we remember the previously created short URL and include it in a <link/> header as well as in the page (omitting the AJAX call this time around).

That would limit the amount of URLs created heavily, which is good, but sadly the short URL would also not be guessable (i.e. not deterministic), nor would tools like the "copy shorturl" jetpack work pretty well.

Opinions?

Comment 3

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

I think adding an extra API call for each of the messages is definitely a bit much.  I would definitely prefer an Ajax-type call to the bit.ly API when the user would like to create a short url for the page.

If we are only concerned about Twitter - we could just use the Tweet button. It will automatically create a short url for use in Tweets.  The upside is that we don't have to do any extra coding on our side.  The downside is that we won't be able to record metrics about how many people are clicking through on the short url.

http://twitter.com/goodies/tweetbutton

Comment 4

[Aakash Desai [:aakashd]]

A tweet link within the options box on each individual message would be a sane way to do this.

Comment 5

[Aakash Desai [:aakashd]]

Some info on implementation: http://www.davepcguy.com/archive/tweet-this-and-url-shortening-api/

Comment 6

[Chris Howse [:chowse]]

Will this be exclusively for tweeting messages, or for getting a URL to share w/ any service?

For the former, there's no UI work needed, other than adding a 'Tweet Message' option to the drop-down menu.

For the latter, I'll attach a potential UI...

Comment 7

[Chris Howse [:chowse]]

Attachment: UI for Copying/Sharing Message URLs

Since we cannot set clipboard content automatically (w/o using Flash), this is a UI for getting a short URL for a message and optionally tweeting it.

When the lightbox appears, the URL field should be given focus w/ all text selected. If the user copies the text, the lightbox is dismissed immediately. We can do this by trapping an oncopy event (https://developer.mozilla.org/en/DOM/element.oncopy). The user can also click the 'Tweet' button to tweet the URL instead. Hitting Esc, clicking the 'Esc' button, or clicking outside of the lightbox will close it.

Comment 8

[Aakash Desai [:aakashd]]

I'd like to keep it to twitter for this bug. We can incorporate other social networking options sometime later

Comment 9

[Fred Wenzel [:wenzel]]

If this bug is about adding twitter and only twitter to Input for now, then we can just add a simple link to the options dropdown (that opens in a new window), pointing to something like this:

http://twitter.com/?status=App%20Tab%20-%20Love%20it!%20Great%20way%20to%20organize%20always-opened%20pages,%20like%20mail%20and%20calendar,%20into%20a%20small%20sticky%20group%20on%20the%20far%20left.%20http://input.mozilla.com/en-US/opinion/621785%20#fxinput

Problem here is, that'll almost always be too long for a tweet, even after twitter itself crunches the URL through bit.ly :-/

Comment 10

[Fred Wenzel [:wenzel]]

Sorry, there was an encoding error in the long, previous message.

http://twitter.com/?status=App%20Tab%20-%20Love%20it!%20Great%20way%20to%20organize%20always-opened%20pages,%20like%20mail%20and%20calendar,%20into%20a%20small%20sticky%20group%20on%20the%20far%20left.%20http://input.mozilla.com/en-US/opinion/621785%20%23fxinput

Comment 11

[Fred Wenzel [:wenzel]]

And then there's also this: http://blog.bit.ly/post/85334248/bit-ly-tweet-track-chicklet-for-publishers

but we'd need to add two external JavaScript resources to our page, really? :(

Comment 12

[Aakash Desai [:aakashd]]

We don't need to re-tweet the message as much as we just need to link to the message via a Input URL and launch the twitter webapp

Comment 13

[Fred Wenzel [:wenzel]]

In that case, do we just want to link to twitter with http://twitter.com/?status=http%3A//input.mozilla.com/en-US/opinion/621785%20%23fxinput then? That'll allow users to play with it all they want -- though it does not contain any of the message itself.

Comment 14

[Fred Wenzel [:wenzel]]

davedash: r?

http://github.com/fwenzel/reporter/commit/b41c3f4

This only adds the twitter button on the single-message page. I am unsure if that's good UX though, perhaps we need to add it everywhere (and put the twitter JS file into the base template? Eeew.)

Comment 15

[Fred Wenzel [:wenzel]]

ARGH, that was the wrong bug. Please ignore comment 14.

Comment 16

[Fred Wenzel [:wenzel]]

(In reply to comment #15)
> ARGH, that was the wrong bug. Please ignore comment 14.

I was lying. This *is* the right bug. The multiple copy-and-share-this bugs confuse me.

Comment 17

[Fred Wenzel [:wenzel]]

I discussed this with Dave, and we now added a twitter button directly to the single-message page.

http://github.com/fwenzel/reporter/commit/aa2b13f

Please check this out on stage once it updates, and reopen if this is missing something.

Comment 18

[Fred Wenzel [:wenzel]]

This is not discoverable enough -- we need it to be more discoverable. It should be a text in the toolbox on the right of every message.

Comment 19

[Chris Howse [:chowse]]

Apparently you can pass arbitrary URLs (and text) into Twitter's share service, so we could simply use a link from the toolbox.

Here are the parameters:

http://dev.twitter.com/pages/tweet_button#properties

Here's an example:

http://twitter.com/share?url=http://example.com/&text=Check+out+this+sweet+feedback+-%3E

Ideally, we should add a little Javascript that should open the Twitter URL in a new window (similar to how the Tweet button works). You can find the dimensions of the window here:

http://dev.twitter.com/pages/tweet_button_faq#share-box

Comment 20

[Fred Wenzel [:wenzel]]

Thank you for doing the research here, Chris. This is exactly what we need. I particularly like it because it's discoverable and simple, and it does not require third-party JavaScript.

Comment 21

[Fred Wenzel [:wenzel]]

This worked great. The link is called "Tweet this" now and opens in a JS popup, or as a new window if you have JS disabled.

Comment 22

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; I couldn't really break this, and I tried Unicode and stuff too :-)

Comment 23

[Stephen Donner [:stephend] Not actively reading bugmail]

In-Litmus+: https://litmus.mozilla.org/show_test.cgi?id=13808