Closed Bug 914879 Opened 12 years ago Closed 12 years ago

Add social media sharing widget to the Firefox download page

Categories

(www.mozilla.org :: Pages & Content, defect, P3)

Product:
www.mozilla.org
Component:
Pages & Content
Platform:
x86
macOS
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: cmore, Assigned: agibson)

References

(Blocks 1 open bug)

Details

(Whiteboard: [kb=1112688] )

Attachments

(3 files)

Share button fb box cropped
95.02 KB, image/png
Details
widget-crop-blog.jpg
208.86 KB, image/jpeg
Details
Social share looks good now!
319.94 KB, image/png
Details
Add the secure social sharing widget to the second scene of the /firefox/new/ page to allow for users to share the download experience. Note: The URL that is shared needs to be tested to not include #download-fx in the URL as we want to point those future users to the first scene. https://github.com/mozilla/SocialShare
We need to find out if the social sharing widget has ever been localized. Here is an example of the widget on the blog: https://blog.mozilla.org/websites/2013/07/11/web-productions-project-update-july-2013/ The text that would need to be translated is "share this".
We could add the "share this" to the end of the green "Thanks for downloading Firefox! As a non-profit, we’re free to innovate on your behalf without any pressure to compromise. You’re going to love the difference." or centered just below it.
habber/jbertsch: any thoughts here on placement of the social widget?
(In reply to Chris More [:cmore] from comment #2) > We could add the "share this" to the end of the green "Thanks for > downloading Firefox! As a non-profit, we’re free to innovate on your behalf > without any pressure to compromise. You’re going to love the difference." or > centered just below it. I like this idea, Cmore. Adding the bug to the mozilla.org kanban board under Research & Design.
Whiteboard: [kb=1112688]
Priority: -- → P3
Blocks: 745355
Fyi - I added the ability to localize the SocialShare widget when we used it for the Firefox OS page. You can translate the "Share this" string as well as set the Facebook share button language (there's a helper util added in Bedrock to automate this, as the Facebook SDK uses a different locale code format to bedrock).
Let's add this to the base template which means that "share this" will appear in english for all locales since "share this" is not yet translated. Laura Forrest and Jen Bertsch are fine with it showing up in English until the translations are done.
:agibson: Did you use the word "share" in the template? It may be easier to re-use that same string since it is already localized. Also, where is the js in bedrock for the share button? Can it be placed somewhere that it can be references from anywhere in Bedrock so all we have to do is style it specific to the page it is implemented on?
(In reply to Chris More [:cmore] from comment #7) > :agibson: Did you use the word "share" in the template? It may be easier to > re-use that same string since it is already localized. Yes the word "Share" is already used in the Firefox OS page template. > Also, where is the js in bedrock for the share button? I added some features directly to the SocialShare widget to allow for l10n. You can now pass in the share string via the attribute `data-label` in the template, and also set the Facebook language code using `data-fb-lang`. For help setting the correct Facebook language code, there is a context processor in bedrock here: https://github.com/mozilla/bedrock/blob/master/bedrock/mozorg/context_processors.py#L40 This uses a utility method here: https://github.com/mozilla/bedrock/blob/master/bedrock/mozorg/context_processors.py#L40 This can be used from any page in bedrock via `{{ facebook_locale }}` and will select the most appropriate Facebook SDK language code, based on the current bedrock locale. So, in the template you should just be able to do: `<div class="socialshare" data-type="small-bubbles" data-label="{{_('Share this')}}" data-fb-lang="{{ facebook_locale }}"></div>` > Can it be placed somewhere that it can be references from anywhere > in Bedrock so all we have to do is style it specific to the page > it is implemented on? The share widget HTML is used directly in the Firefox OS page template currently, but we could move it to an include to make it more modular. Happy to pick this one up when it's ready.
(In reply to Chris More [:cmore] from comment #0) > Note: The URL that is shared needs to be tested to not include #download-fx > in the URL as we want to point those future users to the first scene. Just tested this using the three social media buttons and can confirm that hashes are not sent as part of the request, so we should be ok here.
(In reply to Alex Gibson [:agibson] from comment #9) > (In reply to Chris More [:cmore] from comment #0) > > Note: The URL that is shared needs to be tested to not include #download-fx > > in the URL as we want to point those future users to the first scene. > > Just tested this using the three social media buttons and can confirm that > hashes are not sent as part of the request, so we should be ok here. Awesome! Thanks for testing that. I assumed they would be not, but was slightly worried they would be.
I like the Share This style on our blog: https://blog.mozilla.org/websites/2013/07/11/web-productions-project-update-july-2013/ However, I mocked up variations both with and without the heart icon. For this case, I prefer no heart icon. Thoughts? With heart icon: http://cl.ly/image/3k2i1G2B2q10 Without heart icon: http://cl.ly/image/2Q1o0q3P212S For languages that would cause the "Share this" widget to wrap to the 3rd line, (alone, like this: http://cl.ly/image/2A1V0r1m3p47) can we force a word from the message to wrap with it so that it isn't standing alone on the 3rd line?
(In reply to hhabstritt from comment #11) > For languages that would cause the "Share this" widget to wrap to the 3rd > line, (alone, like this: http://cl.ly/image/2A1V0r1m3p47) can we force a > word from the message to wrap with it so that it isn't standing alone on the > 3rd line? You could force a word from the message to wrap by inserting a line break into the translated string. This is probably not desirable though, as it would negatively effect the appearance of the line break at different screen sizes. The thank you text and 'share this' element would probably need to flow naturally here for this design.
I guess it's a question of what looks worse :) Forcing a line break or having the widget stand alone on the 3rd line? It seems pretty situational for what would be preferred here. We could let it naturally wrap at first and then take a look at a few languages once this is live and see how it looks.
Also, we were going to use the word "Share" instead of "Share this" because it is already translated as a string. I think I like it without the heart.
Hey Chris - is this work blocked by the download unification project? If not, what needs to happen next?
(In reply to Laura Forrest from comment #15) > Hey Chris - is this work blocked by the download unification project? If > not, what needs to happen next? :lforrest: This can be done as soon as the updated /firefox/new/ is pushed to master and out the door tomorrow. There are too many things hitting /firefox/new/ right now and it is backing up behind it. That's why it has to get launched tomorrow for this and others. It is a pretty small change. :agibson: let's work on this early next week with the string of "Share" since is already localized and without the heart symbol.
alex: you can move forward with adding these buttons to the second scene of the download page now that the unified /firefox/new/ updates are live. Can we get this live by next Thursday the 26th?
Assignee: nobody → agibson
(In reply to Chris More [:cmore] from comment #17) > alex: you can move forward with adding these buttons to the second scene of > the download page now that the unified /firefox/new/ updates are live. Can > we get this live by next Thursday the 26th? Yes that should be fine, picking this one up!
(In reply to Chris More [:cmore] from comment #16) > > :agibson: let's work on this early next week with the string of "Share" > since is already localized and without the heart symbol. Share is translated for the locales that translated the Firefox OS consumer site (10 locales), we have 55 locales with the new download page for Desktop (about 97% of our l10n userbase) and 40 more needed to cover all of our locales. If we want a good coverage of our userbase, we need the string for at least our 30 top locales.
(In reply to Pascal Chevrel:pascalc from comment #20) > (In reply to Chris More [:cmore] from comment #16) > > > > :agibson: let's work on this early next week with the string of "Share" > > since is already localized and without the heart symbol. > > Share is translated for the locales that translated the Firefox OS consumer > site (10 locales), we have 55 locales with the new download page for Desktop > (about 97% of our l10n userbase) and 40 more needed to cover all of our > locales. If we want a good coverage of our userbase, we need the string for > at least our 30 top locales. Good point. Given that the share functionality is not the main call-to-action as they have already downloaded, do you think if "Share" showed up on a non-en-US page and was not translated, that it would damage the perception of the page?
PR has been reviewed and is ready to merge - are we good to go with this one, or do we need to wait for l10n?
please wait for l10n, we are currentmy outreaching localizers for home page localization, that means many people will translate all the stuff that recently landed in their repos, including that string. FYI, 33 locales now have translated that string, I would prefer that we wait at least for the end of the week and maybe reach 50 locales.
Do we have an update on the string here? It is only the word "share", i.e. "Pascal recently moved this string in main.lang (r120127), so it should be available."
The string is translated in 46 locales, those represent about 70% of our l10n userbase
(In reply to Pascal Chevrel:pascalc from comment #25) > The string is translated in 46 locales, those represent about 70% of our > l10n userbase Thanks for the update!
Thanks for the update, Pascal! Now that we've hit 70% are we good to mark the PR as 'ready to merge', or would you prefer to wait a little more?
I would prefer that we wait after the summit basically because I would like to have less small things going to prod to watch during the event :)
Ok understood :) I don't think we're planning on doing another prod push before the summit, but this is good to wait until after nonetheless.
Going to merge this one today now that we are back from the summit, unless anyone would like to wait some more.
(In reply to Alex Gibson [:agibson] from comment #30) > Going to merge this one today now that we are back from the summit, unless > anyone would like to wait some more. we should wait until pascalc can update us on the status of the "share" string. We may have to wait a few days given post-summit-recovery.
ok, no problem!
Number of locales done: 52 (96.41% of our l10n user base) We are good to go in terms of translation coverage, we may hit visual bugs for strings significantly longer than English
(In reply to Pascal Chevrel:pascalc from comment #33) > Number of locales done: 52 (96.41% of our l10n user base) > We are good to go in terms of translation coverage, we may hit visual bugs > for strings significantly longer than English I think that's a green light! Once we merge to -dev, we can view some of the longer strings to see if there will need to be any CSS adjustments. Thanks. Alex: merge away.
A pointer to you guys, I just added a per string metric to my langchecker script on this view: http://l10n.mozilla-community.org/~pascalc/langchecker/?action=translate&file=firefox/new.lang (click on the green English string, look at the bottom) So that gives you our user base coverage on a per string basis in case you want to check progress by yourself, you just have to change the file path for the lang file to match the ones we use in bedrock. per page coverage is still available on this view: http://l10n.mozilla-community.org/~pascalc/langchecker/?locale=all&website=0&file=mozorg/contribute.lang
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/1ac6d5e2281aa096ebdcf343ab86e37a93d5a6e1 [fix bug 914879] Add social media sharing widget to the Firefox download page https://github.com/mozilla/bedrock/commit/69e0d8ac51102cf1e6a394df2c14a457dd7cfe68 Merge pull request #1254 from alexgibson/bug-914879-add-sharing-firefox-download-page [fix bug 914879] Add social media sharing widget to the Firefox download...
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
This is tested on Chrome and you cannot see the sharing box pop up for Facebook.
Attached image widget-crop-blog.jpg —
I'm seeing this issue on the blog widget also (screenshot attached). Looks like there is a bug in the way the facebook iframe works inside the social share container. I'll patch this for the /new page. Then we can see about getting the bug fixed in the SocialShare repo.
Opened a PR here: https://github.com/mozilla/bedrock/pull/1295 This one can't be tested locally, as the facebook widget does not run under localhost. I'm trying to source a demo server so we can review the changes. For part of this fix I needed to change placement of the share widget button to be centered below the "thank you" text, as opposed to being inline (which has variable length). This is needed in some cases because the facebook widget determines it's own size/placement for the iframe share pane, depending on where it is rendered.
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/f3b4d0c1da57872fea04729a7c554ebf3580e07c [bug 914879] Facebook share iframe cropped on firefox new page https://github.com/mozilla/bedrock/commit/d12f7b240dc01ccbd970a0a400b1cdceb2002ba7 Merge pull request #1295 from mozilla/bug-914879-facebook-share-iframe-cropped-new-page [bug 914879] Facebook share iframe cropped on firefox /new page
fixed on stage. https://www.allizom.org/en-US/firefox/new/#download-fx There is a bit of a delay before the widget appears after clicking the Share button
(In reply to raymond [:retornam] (needinfo? me) from comment #43) > fixed on stage. https://www.allizom.org/en-US/firefox/new/#download-fx > > There is a bit of a delay before the widget appears after clicking the Share > button The delay is normal and is because it takes a second for the remote JS files to execute and the buttons to display.
This is on production now.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: