901600 - Share button on details page - use twitter/g+ icons instead (?)

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Jacob [:Jacob]]

On the make details page, there's a green "share" button for sharing the make on twitter or google plus.

I'd like to suggest we save the user an extra click and just display the icons without having to hit the green share button in order to access them.

Two reasons

1) It's an extra click

2) There's a universally accepted visual grammar of those icon buttons, where you see them and you are prompted to share. The green share button isn't ingrained the same way and is less likley to be noticed, and less likely to get the person to actually share the project.

Comment 1

[David Humphrey (:humph)]

The reason this was done was so that we don't pre-load the various sharing buttons, and thus subject our users to the data-collection that they do when you include them in your page.

That said, I think this is a UX/UI decision that needs to get made.  Do we care more about privacy or ease of use here?

Comment 2

[Cassie McDaniel [:cassiemc]]

I think it's very noble to not subject users to data-collection, and that feels like the Mozilla way. But I agree with Jacob on exposing the buttons upfront – it would be quicker and more clear for users, both ideals we are aiming for with future UI updates.

Am wondering if there is anything fancy we can do with frontend to win on both fronts?

Comment 3

[David Humphrey (:humph)]

CC'ing Pomax, too, since I think he worked on this originally.

Comment 4

[Zakeria Hassan]

I think there is a way we can share makes to social media and yes I agree if we use their API's to achieve this there may be some data collection / pre-loading. I think I might know of a work around to win on both fronts.

GooglePlus, facebook and many other social media's provides a url for users to share links. Perhaps we can just share a link to user's makes like for example:

> GOOGLE PLUS URL WEBSERVICE:
> https://plus.google.com/share?url=https://darthvader.makes.org/thimble/your-awesome-webpage-created-on-sun-oct-13-2013-421-am
>
> FACEBOOK URL WEBSERVICE:
> http://www.facebook.com/share.php?u=https://darthvader.makes.org/thimble/your-awesome-webpage-created-on-sun-oct-13-2013-421-am
>

This could work because we don't need to load any third party Javascript API's on webmaker.org . As well we can get free images graphics from <a href="https://www.iconfinder.com/search/?q=facebook">Iconfinder.com</a> instead of the pre-loading images offered with their (facebook, google, etc.) third party sdk's/api's.

Comment 5

[Zakeria Hassan]

If someone isn't already working on this. Please assign this one to me.

Thanks

Comment 6

[Jacob [:Jacob]]

Take it away good sir!

Comment 7

[Zakeria Hassan]

Attachment: https://github.com/mozilla/webmaker.org/pull/435

Comment 8

[Matthew Schranz [:mjschranz]]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

You have code from another ticket in this pull request.

Comment 9

[Zakeria Hassan]

Hi,

I've pushed my update to git. I used images from https://www.iconfinder.com but if I'm supposed to get the images from somewhere else please mention a link in the comments. Pomax mentioned in IRC that I should try https://github.com/neilorangepeel/Free-Social-Icons but it only has images for google+ not twitter.
 

Thanks,
Zak
IRC: Vader

Comment 10

[Dale Karp (:daleee)]

Hi Zakeria,

We use font-awesome on webmaker.org; it should have the icons you need!
http://fortawesome.github.io/Font-Awesome/

Comment 11

[inactivate account for kate]

Yeah actually http://fortawesome.github.io/Font-Awesome/cheatsheet/ is really useful to see what your options are.

You can use them like this:

<span class="icon-twitter"></span>

Comment 12

[Zakeria Hassan]

I used it except I used the <i class="icon-twitter"></i> and pushed it to git. Please review when you get a chance.

Thanks,
Zak
IRC: Vader

Comment 13

[inactivate account for kate]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

There are some extra commits not related to this bug, can you please remove/rebase this pull-request first?

Comment 14

[Zakeria Hassan]

@dale:
I fixed all the mistakes you mentioned in the pull request comments.

@k88hudson:
I would like to rebase after I get a r+. Please review and if the code is fine then I will rebase right away.

Comment 15

[Dale Karp (:daleee)]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

Some more suggestions/ideas. Looking good, though! Keep it up!

Comment 16

[Zakeria Hassan]

@k88hudson & @dale: 
I've cleaned my commits for branch bug901600. Sorry I mixed commits from another bug in this bug branch. I realized it would make review difficult. Since this bug is finished please let me know if this is either a r+ or r- .

Comment 17

[Zakeria Hassan]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

I've fixed the mistakes. Please review.

Comment 18

[Dale Karp (:daleee)]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

- Left comments in pull request
- Will need a squash before landing
- Will need a rebase before landing; cannot currently merge into tree.

Comment 19

[Zakeria Hassan]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

@dale:
I've fixed the syntax mistakes and squashed everything into 1 commit

Comment 20

[Dale Karp (:daleee)]

Left one comment on the PR, should be R+ after that from me.

Comment 21

[Zakeria Hassan]

@daleee:
I've fixed the mistakes you've mentioned in the PR. Please review.

Thanks,
Zak

Comment 22

[Dale Karp (:daleee)]

Comment on attachment 818010 [details] [review]
https://github.com/mozilla/webmaker.org/pull/435

Squash the commit and it gets an R+ from me.

Comment 23

[Zakeria Hassan]

squash and rebase complete

Comment 24

[Zakeria Hassan]

Since this bug has been reviewed and passed with an R+. Lets set this bug to resolved.

Thanks,
Zak

Comment 25

[Matthew Schranz [:mjschranz]]

Jacob can't help you land this code :)

Passing along to Kate to help land this.

Comment 26

[Matthew Schranz [:mjschranz]]

ping

Comment 27

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/96718f8e1b1eb36edac92fd04bf5bd2160679b70
bug901600: Added Twitter/ G+ Share buttons to details page