725759 - [One Mozilla] Universal Social Sharing Asset

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[mcbmoz]

Opening as content for One Mozilla, but Sean feel free to assign to Ty or Lee.

Design Requirements for a single/universal share button with two states:

*closed state - can be styled anyway you like, and can include icons (Matej can probably come up with some snappy copy)

*open state - reveals Twitter, Facebook, Google+ counts


Full scope of requirements (mostly for technical implementation): 

https://wiki.mozilla.org/Social_Sharing#Requirements

an example of this in action could be what http://sharethis.com/ does for users implementing the product.

Thanks Sean!

Comment 1

[mcbmoz]

Re-assinging to Ty, since he's working on this universal item over on the /contribute page.

Thanks Ty, if Tuesday is too tight a deadline, please let me know.

Comment 2

[mcbmoz]

Ty, will you have comps to share tomorrow @ One Mozilla meeting?

Comment 3

[mcbmoz]

Ty, here's feedback for the final pass:

*team found it very useable and clear (+++ for the use of the <3)
*eliminate the email icon

As long as the space accommodates the sizes, these can be added in the front-end implementation (if you don't have time or it doesn't makes sense to copy them into a PSD):

*FB like SDK - http://developers.facebook.com/docs/reference/plugins/like/
*Twitter Tweet SDK - https://twitter.com/about/resources/buttons
*Google Plus SDK - http://www.google.com/webmasters/+1/button/

Two sizes needed:

*the standard size used in the One Mozilla page and footer design (same)
*larger version that would be used on a product like Firefox Flicks or Firefox Live

When do you think you can have this finalized? We're ready to set up a webdev to turn this into a reality that lots of sites are chomping at the bit to use :-)

Comment 4

[mcbmoz]

Hey Ty, can you post the PSDs, we're due to pass them over to webdev tomorrow.

Thanks!

Comment 5

[Ty Flanagan]

Attachment: Moz.org Redesign - Social/Share Universal Widget (PNG)

Comment 6

[mcbmoz]

Thanks Ty! Resolved/Fixed.

Comment 7

[mcbmoz]

Ty, not seeing the PSD here. Just a png.

Comment 8

[Ty Flanagan]

Attachment: Moz.org Redesign - Social/Share Universal Widget (PSD)

Comment 9

[mcbmoz]

Ty, thanks for the first attachment. We noticed that there's only one size v. two as requested up in comment 3.

Can you provide the larger version for us in another file, thanks!

----

Two sizes needed:

*the standard size used in the One Mozilla page and footer design (same)
*larger version that would be used on a product like Firefox Flicks or Firefox Live

When do you think you can have this finalized? We're ready to set up a webdev to turn this into a reality that lots of sites are chomping at the bit to use :-)

Comment 10

[Ty Flanagan]

Attachment: Moz.org Redesign - Social/Share widget - In-Page Options

Comment 11

[Owen Coutts [:tallOwen]]

(In reply to Ty Flanagan from comment #10)
> Created attachment 600488 [details]
> Moz.org Redesign - Social/Share widget - In-Page Options

Hey Ty,

I don't think that facebook button in the first line is possible. The small facebook buttons need to have either the like count or the "social text". (see https://developers.facebook.com/docs/reference/plugins/like/ under attributes > layout)

Comment 12

[Ty Flanagan]

Hey Owen,

Im not sure if this was resolved in another bug, but did we go ahead and include the "like" counts beside the button for the initial state of the social buttons?

Comment 13

[Chris More [:cmore]]

Hey Ty.

The actual implementation of this social sharing asset is in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=723761

We are code complete for 1.0 and are entering the security review and QA review. The "like" counts for the initial state is out of scope for this version. The counts will only be shown once the "share this" is clicked and the individual services are displayed. To display the count on the initial state, we would have to track and monitor the clicks on Mozilla's side and that was out scope for this version. We have discussed this feature and will do this in a future release.

Thanks,
Chris

Comment 14

[Chris More [:cmore]]

Ty: Can we adjust the design so that the vertical drop down (middle one here: https://bug725759.bugzilla.mozilla.org/attachment.cgi?id=600027) is aligned to the center of the "Share This" instead of being centered with the caret? It will help with an issue we found when implementing it on a site. It will also be consistent in how the design is done for the larger horizontal (bottom on here: https://bug725759.bugzilla.mozilla.org/attachment.cgi?id=600027) because it is centered on the "Share This".

Thanks!

Comment 15

[Ty Flanagan]

Chris, can you show me a working example of what you have in mind? My initial concern is the interaction with the arrow and content being offset. We could consider having the wider white drop down with the share buttons placed side-by-side vs. stacked (much like the larger horz image) but without the share counts.

Comment 16

[Chris More [:cmore]]

(In reply to Ty Flanagan from comment #15)
> Chris, can you show me a working example of what you have in mind? My
> initial concern is the interaction with the arrow and content being offset.
> We could consider having the wider white drop down with the share buttons
> placed side-by-side vs. stacked (much like the larger horz image) but
> without the share counts.

Here is an example:

http://people.mozilla.org/~ocoutts/collusion/

I'm going to hold on suggesting any changes for now as we can resolve the implementation bug.

Comment 17

[Kohei Yoshino [:kohei]]

The social media sharing widget has already been implemented as per Bug 914879.