Closed Bug 772906 Opened 12 years ago Closed 12 years ago

[July Campaign] Implement Facebook tab page on getpersonas.com

Categories

(Websites Graveyard :: getpersonas.com, defect)

Product:
Websites Graveyard
Component:
getpersonas.com
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: ckoehler, Assigned: osmose)

References

Details

(Whiteboard: [due: 7/16])

Attachments

(7 files)

Firefox FB Custom Tab - 03 (Non-Firefox)
1.20 MB, image/png
Details
Facebook square icon - 01
18.30 KB, image/png
Details
Facebook Olympics page tab - 01
13.29 KB, image/png
Details
Facebook Olympics page tab - 02
14.41 KB, image/png
Details
Facebook Olympics page tab - 03
15.42 KB, image/png
Details
Facebook Olympics page tab - 04
15.38 KB, image/png
Details
Facebook Olympics page tab - 05
1.18 MB, image/png
Details 
This Facebook tab will feature 50 different flag/country Firefox Personas in celebration of this summer's Olymipic games.

Requirements for Firefox users:
* when the user hovers over a persona thumbnail with their mouse, the persona is previewed
* when they click on a persona thumbnail, the persona is applied

Requirements for non-Firefox users:
* non-firefox users will see a slightly different design
* waiting on clarification on desired behavior regarding persona thumbnails

L10N work for this page is being tracked in bug 772469.

Design is available in bug 766475, psd pending.
Thanks Christie. 

We had also talked about:

* Sorting the Personas in alphabetical order.
* Showing a custom mockup of fanned Persona designs (at the bottom) based on OS, or simply defaulting to a Window's mockup.
* Listing the Country name under each Persona.
* Pending total Personas, we may have more than 50.  We can either curate and cut at 50 and link to AMO for the full set, or just expand the grid of designs until all designs are displayed. we'll have 50+ country flags, + 1 generic one. 
* For non-FF users, there will be a link to the FF download page (no button, as discussed).
Depends on: 766473, 772469
First pass is available at http://mkelly.khan.mozilla.org/olympics-fb-tab.html

In order for the persona preview and installation to work, you'll have to add mkelly.khan.mozilla.org to your persona whitelist. To do this:

1. Open up the Preferences dialog in Firefox.
2. Go to the Security Tab.
3. Click the "Exceptions" button next to the "Warn me when sites try to install add-ons" item.
4. Enter mkelly.khan.mozilla.org in the box at the top of the dialog and click the "Allow" button.

Once that's done you should be able to preview and install the personas.

Notes:
- There's code for detecting if the user is running Firefox or not, but nothing changes yet; will the only change here be the green-button-like download link from the design mockups?

- The list of personas will grow as we add more personas, moving from left to right and down by rows.

- Some of the strings in the design didn't exactly match the ones used by l10n; I've swapped them with the final strings used by l10n.

- Do we have a list of browsers that we need this to support?

- Remaining work will be changes based on design direction, hooking up l10n (will connect with pascalc on this this week), getting the code reviewed, and testing on several browsers.

Let me know when we have the final list of personas and I'll add them to the page.
me neither.
D'oh, khan can only be seen from the VPN. My bad.

I'm working on setting up a place to preview this, will post a link when it's ready.
Okay, preview should be up at http://balwiki.com/previews/olympics-fb-tab/

You'll still have to follow the instructions above to preview personas, but use balwiki.com for the domain instead of mkelly.khan.mozilla.org.

Let me know if there are any more issues! :D
This looks good, Mike. Preview works for me after white-listing the test domain. 

In order to test within Facebook we need a staging site capable of https. I'm going to go ahead and file a bug to have the code pushed to getpersonas.allizom.org. 

Tara, the sooner we have the final non-Firefox design from Lee the better.

The remaining persona designs should be complete by close of business on Wednesday.

L10N progress is being tracked in bug 772469.
(In reply to Christie Koehler [:ckoehler] from comment #7)

> 
> Tara, the sooner we have the final non-Firefox design from Lee the better.

Thanks! I pinged Lee today, he should hopefully be able to work on this tomorrow.
Hi All,
The version for the non-Firefox users is the same as the other version with the exception of changing the "Rollover to try..." CTA to "Download Firefox to try..." below the subhead copy. 

The PSD that I provided doesn't employ the download button, and also contains all of the flag thumbnails as requested. There's a layer with "Download Firefox to try or apply these themes." in the "CALLOUT" layer.

Regarding the mockups, the fan of theme examples are based on Win7. Building out the iOS versions of these themes will take a bit more time to mockup. Is there also a web dev consideration of drumming up another version of the page (iOS vs. Win)? Are the 2 variations necessary?
Thanks Lee!

Just a note, due to how the string was submitted for localization, we won't be able to link just the words "Download Firefox", but can make the entire string a link. Is that okay?
It's not ideal - but if that's what we're up against, it will do. On the bright-side, it'll be a bigger target to click on!
Here's the tab within Facebook:
https://www.facebook.com/pages/Olympics-Test/393968713986340?sk=app_176847575782085

In order for the Persona preview to work, you'll need to add getpersonas.allizom.org to Preferences > Security > Exceptions.

Note, this preview is setup on a test page that my Facebook account owns. We should work with William R in the next day or so to get this setup on our Firefox account.
Looks great to me, Thanks Christie

Are you waiting for the collection to be complete before dropping in the rest of the designs? even as FPO (so we can see how much of scroll this is)? 

I've cc-ed William so he can chime in as needed and help.  wohoo!
(In reply to Christie Koehler [:ckoehler] from comment #12)
> Note, this preview is setup on a test page that my Facebook account owns. We
> should work with William R in the next day or so to get this setup on our
> Firefox account.

If you add me as an admin/developer for the app, I can add it to the Firefox page. 

From what I can tell, there's no easy way to test it on our page without making it live for everyone. We can quickly hide/show the tab as needed though.

Christie, let me know how you would like to stage this and test.
(In reply to Tara (musingt) from comment #13)
> Are you waiting for the collection to be complete before dropping in the
> rest of the designs? even as FPO (so we can see how much of scroll this is)? 

Yes, but mkelly will add placeholders if he has time.
Hey all

Sorry, but we'll need to pull the word "summer" from assets that contain it. This is to avoid potential legal issues with the Olympic Organization.  "summer" is a word that is banned during this timeframe on anything that relates to the olympics without aan official license.  Long story short, the word "summer" alone could get us into trouble and I'd like to avoid that. 

Lets discuss what this means, but if we can just chop off the text at the top of this tab and have it just say "Show your support!" would be best.
Can we make this change in code? removing the line of text and moving the graphics all up accordingly?  please advise.  thanks again.
We need a few things to complete setup of the Facebook page tab:

1. Page Tab Image (111x74px)

2. Display Name (of the app)

3. Page Tab Name

4. Square image to use for icon (up to 128x128)
(In reply to Christie Koehler [:ckoehler] from comment #15)
> Yes, but mkelly will add placeholders if he has time.

Placeholders are up at http://balwiki.com/previews/olympics-fb-tab/
(In reply to Christie Koehler [:ckoehler] from comment #18)
> We need a few things to complete setup of the Facebook page tab:
> 
> 1. Page Tab Image (111x74px)
> 2. Display Name (of the app)
> 3. Page Tab Name

Matej can you please help with 1,2,3?
We need to avoid the usual banned words.  But also keep it short. it's a nice challenge :) I'm happy with something like "Firefox Themes", "Community Spirit" or something along those lines. 

> 
> 4. Square image to use for icon (up to 128x128)

Lee, can you help with this one please?
(In reply to Michael Kelly [:mkelly] from comment #19)
> (In reply to Christie Koehler [:ckoehler] from comment #15)
> > Yes, but mkelly will add placeholders if he has time.
> 
> Placeholders are up at http://balwiki.com/previews/olympics-fb-tab/

Please edit the link to remove banned/infringing words (per my email) thanks so much.

Also, can you please edit the tab to remove "Summer" ?  the header text should be "Show your support!"  thanks again.
(In reply to Tara (musingt) from comment #20)
> (In reply to Christie Koehler [:ckoehler] from comment #18)
> > We need a few things to complete setup of the Facebook page tab:
> > 
> > 1. Page Tab Image (111x74px)
> > 2. Display Name (of the app)
> > 3. Page Tab Name
> 
> Matej can you please help with 1,2,3?
> We need to avoid the usual banned words.  But also keep it short. it's a
> nice challenge :) I'm happy with something like "Firefox Themes", "Community
> Spirit" or something along those lines. 

Sorry, not totally sure what the ask is here. Does "Show your support!" from comment 21 cover it?

Also, it looks like 1. is an image. Does that need words to go with it?
Matej, yes you're right sorry.  #1 goes to Lee.

These are the thumbnails that show on Facebook, and the name of the tab itself (outside of the design we created).  Christie can you point to where these are so Matej/Lee have the right reference?
The repo and balwiki preview have been cleared of any references to the Olympics or the summer. The new preview is available at http://balwiki.com/previews/july-campaign-fb-tab/.

Stage will be updated shortly with the new version.
(In reply to Tara (musingt) from comment #23)
> These are the thumbnails that show on Facebook, and the name of the tab
> itself (outside of the design we created).  Christie can you point to where
> these are so Matej/Lee have the right reference?

Not sure what you're asking for. 

Here is annotated screen capture of the page which shows each of these elements:
http://img59.imageshack.us/img59/3158/selection086.png

And here's some info about which image assets are used where:
https://developers.facebook.com/docs/guides/appcenter/#uploading

If that doesn't answer your question, let me know.
Thank you.

Matej/Lee, does this help?

-------

Will the non-FF version of the tab also have a scroll bar or will that just be a static image since the iframe won't really function.  just curious.
Thanks for attaching the annotated screen capture, Christie. The Facebook asset info page, doesn't list the 111x74 image - does anyone know where this one goes? 

Also, a general question: Do we want to simply use the our (normal) Firefox logo in these images? I'm a bit confused about putting the cauldron image in them...?
As long as the thumbnail is clear that this isn't a generic tab about Firefox or "supporting" the mission / product ... whatever you think works best is fine with me.  But the copy and graphic should ideally take cues from the campaign.
(In reply to Lee Tom from comment #28)
> Thanks for attaching the annotated screen capture, Christie. The Facebook
> asset info page, doesn't list the 111x74 image - does anyone know where this
> one goes? 

The 111x74 image is the graphic on our Facebook page that will link to the custom tab. You can see the space for three custom tabs below the "Liked" button in attachment 634457 [details]. I think a graphic with the cauldron would work well here.
Facebook square icon - 128x128px
attaching a few page tab graphics to choose from....

    
    

    
  


  

    
    

    
  


  

    
    

    
  
(In reply to Tara (musingt) from comment #27)
> Thank you.
> 
> Matej/Lee, does this help?

Yup, totally, thanks. Here are some options:


Show your support

Global spirit

Spirit of community

Flag themes

Celebrate community

    
    

    
  
(In reply to Lee Tom from comment #32)
> attaching a few page tab graphics to choose from....

Thanks Lee! I like both Option 1 and Option 3 for the tab thumbnail. Tara, what's your preference?

    
    

    
  
option 3 !! it's a nice teaser.  Thanks Lee.

for the copy, How about "Flag Themes" ? it's clear.  the AMO collection is also called National Flags 2012

    
    

    
  
FWIW, my fave is option #1 (if we can get away with the Roman numerals)

(In reply to William Reynolds [:williamr] from comment #37)
> (In reply to Lee Tom from comment #32)
> > attaching a few page tab graphics to choose from....
> 
> Thanks Lee! I like both Option 1 and Option 3 for the tab thumbnail. Tara,
> what's your preference?

    
    

    
  
Hi there, drawing your attention to Lee's latest comment on design:
https://bugzilla.mozilla.org/show_bug.cgi?id=766475#c67

Attachment: https://bug766475.bugzilla.mozilla.org/attachment.cgi?id=643484

(In reply to Lee Tom from comment #67)
> Created attachment 643484 [details]
> Firefox FB Custom Tab - 04 (margins)
> 
> Hi all, sorry to reopen - Since we deleted the "this summer!" portion of
> copy in the headline, I noticed an awkward amount of margin below the
> headline to the rest of the page. Can we adjust? 
> 
> a: Cauldron + flags + fan of themes > all bump up 70px higher on page
> b: "Customize Firefox..." copy section bumps up 60px higher on page
>

    
    

    
  
Hi.  The link at the bottom of the tab should point to the AMO collection, not getpersonas.com  Thanks.

    
    

    
  
Preview at http://balwiki.com/previews/july-campaign-fb-tab/?lang=fr has been updated. I'm pretty sure all the input has been integrated into this, but let me know if I've missed anything.

Note the `lang=fr` part at the end of the URL - you can now change this to see other locales that the tab is available in (available locale codes are listed on http://l10n.mozilla-community.org/~pascalc/langchecker/?locale=all&website=3&file=olympics.lang). 

The space around the headline has been adjusted, but a little differently than Lee suggested in order to accommodate locales where the headline is two lines tall. Let me know if there's still too much spacing and it needs adjustment again (and check it out in several locales to make sure it looks as you expect in them as well).

Will focus next on adding the other personas from the collection on AMO, adding the download link for non-Firefox browsers, and detecting the locale automatically on Facebook.

    
  
Summary: [Olympics] Implement Facebook tab page on getpersonas.com → [July Campaign] Implement Facebook tab page on getpersonas.com

    
    

    
  
Preview has been updated with all the country personas from the AMO collection, the non-Firefox download link, and Facebook locale detection. 

I've seen a few generic personas in the collection and mentioned as a part of the promo. Which ones do we want to include, and what should we display in place of their name? This might cause an l10n issue because the names given to the generic personas on getpersonas are not in the l10n files and won't be translated.

Once we finalize the persona list I can request another push to getpersonas staging so we can start testing. That should be the last change needed unless there are any more requests or I've missed something?

    
    

    
  
(In reply to Michael Kelly [:mkelly] from comment #43)
> Preview has been updated with all the country personas from the AMO
> collection, the non-Firefox download link, and Facebook locale detection. 

Thank you! Looking great. 

> 
> I've seen a few generic personas in the collection and mentioned as a part
> of the promo. Which ones do we want to include, and what should we display
> in place of their name? 

We've been calling these "Global Spirit" with numbers, and generally pointing to the non-Firefox ones.  Offering all 4 in the main Collection but plan was to only showcase 2 in the FB tab.

>This might cause an l10n issue because the names
> given to the generic personas on getpersonas are not in the l10n files and
> won't be translated.

Eeek.  It's something I didn't think of earlier.  Here are some options:
* Not including a name (putting those at the end of the list) 
* Pointing to the one with Firefox logos and calling them "Firefox"  perhaps "Firefox I" "Firefox II".  The latter isn't the most inspiring name but it won't require translating strings (I hope).  I can ask Pascal, too to see what he suggests. 
* Lastly, we can not put these in the tab if it's an issue. 

> 
> Once we finalize the persona list I can request another push to getpersonas
> staging so we can start testing. That should be the last change needed
> unless there are any more requests or I've missed something?

There should be an alt. flag for Italy... I'd like to point to that instead (though it's not a blocker).

    
    

    
  
ah, Spain is also the wrong design (has the wrong footer) not sure if this impacts the custom tab, but I've asked Amy to update Spain.

    
    

    
  
Hi again, sorry for the multiple posts. There seems to be some discrepency between the lists I have for country flags:

* Master list:  has 57 flags. We've added one alt for Taiwan due to political sensitivities. We've also added the 2 generic ones (currently not on the fb tab)
* AMO collection: has 60 flags (it is also missing 2)

I need to figure out which ones are missing and get these updated asap.

Thanks.

    
    

    
  
OK.

US and Australia are missing:

https://addons.mozilla.org/en-US/firefox/addon/united-states-of-america/
https://addons.mozilla.org/en-US/firefox/addon/australia-flag/

Please add these :)

Meanwhile, Amy will need to update Spain, 
and will be adding an alt theme for Italy.

    
  
Depends on: 775821

    
    

    
  
(In reply to Tara (musingt) from comment #44)

> >This might cause an l10n issue because the names
> > given to the generic personas on getpersonas are not in the l10n files and
> > won't be translated.
> 
> Eeek.  It's something I didn't think of earlier.  Here are some options:
> * Not including a name (putting those at the end of the list) 
> * Pointing to the one with Firefox logos and calling them "Firefox"  perhaps
> "Firefox I" "Firefox II".  The latter isn't the most inspiring name but it
> won't require translating strings (I hope).  I can ask Pascal, too to see
> what he suggests. 
> * Lastly, we can not put these in the tab if it's an issue. 
> 

You could also call them:
:-) 1
:-) 2

That would work for all locales and it would be more funny than 'Firefox 1' I think.

I'd like to avoid adding yet more strings for that project as I have other projects that also need attention next week and I can't guarantee that we will have new strings done for your deadline.

Could you also update the miniature flag for France on this page? The French flag is called "drapeau tricolore" (3-color flag) for a reason ;). Currently, it looks like the Malta flag, not the French one. Thanks

    
    

    
  
New personas have been added and are live on the balwiki preview as well as the Facebook app preview. We ended up opting for having no name on the generic personas and showing them at the bottom of the list.

    
    

    
  
Thanks!  quick question(s):

* Is there a reason why south africa is at the bottom? (given alphabetical listing)
* Is there any reason to edit the thumbnail preview of the French theme? I'm working on updating that Persona (Pascal, sorry I thought we were ok here). If we can edit the thumbnail that'd be great... if not I'll have to try and an updated design done and loaded asap.
* I can't see the live preview but am assuming that works and I don't have the right credentials to test it. right?

    
    

    
  
> * Is there a reason why south africa is at the bottom? (given alphabetical
> listing)

Ah, whoops. When I first added the sorting we were sorting by English country name, but I changed those values to country codes as part of l10n changes, so it's sorting by country code now, which puts South Africa (za) at the bottom.

It's still consistent across locales. Do you want the sorting changed?

> * Is there any reason to edit the thumbnail preview of the French theme? I'm
> working on updating that Persona (Pascal, sorry I thought we were ok here).
> If we can edit the thumbnail that'd be great... if not I'll have to try and
> an updated design done and loaded asap.

The thumbnail was generated automatically by getpersonas, but we can replace it with a custom one as long as it is a 200x67 JPG image. Is the persona changing as well, or just the thumbnail?

> * I can't see the live preview but am assuming that works and I don't have
> the right credentials to test it. right?

I don't have access to the app settings, but that might be the case. ckoehler will be able to answer this.

    
    

    
  
(In reply to Tara (musingt) from comment #50)
> * I can't see the live preview but am assuming that works and I don't have
> the right credentials to test it. right?

You don't need any credentials to see it. What happens when you try to load the url? Are you getting an error?

This is the fb staging url:
https://www.facebook.com/pages/Moz-Test/365444213526033?sk=app_176847575782085

    
    

    
  
(In reply to Christie Koehler [:ckoehler] from comment #52)
> (In reply to Tara (musingt) from comment #50)
> > * I can't see the live preview but am assuming that works and I don't have
> > the right credentials to test it. right?
> 
> You don't need any credentials to see it. What happens when you try to load
> the url? Are you getting an error?
> 
> This is the fb staging url:
> https://www.facebook.com/pages/Moz-Test/
> 365444213526033?sk=app_176847575782085

I can see the tab fine, but the themes aren't previewing when I roll over them. Is that expected on staging?

    
    

    
  
The themes don't preview for me either.

Also, for the non-FF use case, can we include the little arrow? is it possible to have that pointing to the copy string to highlight that a bit more?  the thumbnails are actionable though nothing happens on click, so I would prefer that it's clear they need Firefox to use these.  So, I thought it's worth adding the arrow or re-iterating the "download firefox" at the bottom?  thoughts?

    
    

    
  
(In reply to Tara (musingt) from comment #54)
> The themes don't preview for me either.

Oh, for that, you need to add getpersonas.allizom.org to your whitelist with the directions from comment 2.
 
> Also, for the non-FF use case, can we include the little arrow? is it
> possible to have that pointing to the copy string to highlight that a bit
> more?  the thumbnails are actionable though nothing happens on click, so I
> would prefer that it's clear they need Firefox to use these.  So, I thought
> it's worth adding the arrow or re-iterating the "download firefox" at the
> bottom?  thoughts?

So you want the arrow in the non-Firefox view, and you want it to the right of the download Firefox link and pointing to the left?

    
    

    
  
I think the arrows for the non-FF case will be weird (pointing to the CTA). If anything, maybe an arrow pointing towards the thumbs (similar to the FF-user version). 

I do think it wouldn't hurt to repeat the "Download Firefox to try or apply these themes" at the bottom of the list again (non-FF version) though. 

I was thinking it could go somewhere beneath the last row of thumbnails - perhaps 40px below / center justified / 40px margin to the edge of recessed bg

mkelly, let me know if a mockup would help.

    
    

    
  
I think the arrows for the non-FF case will be weird (pointing to the CTA). If anything, maybe an arrow pointing down towards the thumbs (similar to the FF-user version). 

I do think it wouldn't hurt to repeat the "Download Firefox to try or apply these themes" at the bottom of the list again (non-FF version) though. 

I was thinking it could go somewhere beneath the last row of thumbnails - perhaps 40px below / center justified / 40px margin to the edge of recessed bg

mkelly, let me know if a mockup would help.

    
    

    
  
Thanks Lee.  I think we may need to just pump up the background of that space a little to highlight the string.  Mkelly, I think Lee is planning on giving you another layer to add behind the link (or some graphical element) to highlight that string more.  Is that okay?

    
  
Assignee: nobody → mkelly

    
    

    
  
(In reply to Tara (musingt) from comment #58)
> Thanks Lee.  I think we may need to just pump up the background of that
> space a little to highlight the string.  Mkelly, I think Lee is planning on
> giving you another layer to add behind the link (or some graphical element)
> to highlight that string more.  Is that okay?

Sure, just attach an updated PSD in the case of new graphical elements and I can add it. We'll probably hold off on pushing it to stage until next week though for a final stage push, so it'll only show on the balwiki preview for now.

    
    

    
  


  
Added a border to the non-FFx user CTA, and an additional CTA beneath the grid of thumbnails. Let me know if anyone has questions or concerns - I can post the PSD asap, otherwise. tHanks!

    
    

    
  
like!

    
    

    
  
mkelly, here's the updated PSD:
http://cl.ly/3721453q1L3A

    
    

    
  
French flag is now identifiable in thumbnails and the persona itself it also better looking IMO, thanks.

    
    

    
  
Mike, it looks like we're not getting all translated strings. The following are displaying in en-US for all locales:

* Show your support!

* Customize Firefox with your nation's flag and join us in celebrating the global spirit of community.

* Roll over to try, click to apply.

And I see translations in the lang files. Is this a config/IT issue?

    
    

    
  
Christie , if the code is available at some repository on svn/github/hg, I can have a look. A common mistake that could cause that bug is  that you have extra spaces in your l10n function calls or non-breakable spaces in your strings instead of normal spaces (and vice-versa).

    
    

    
  
(In reply to Pascal Chevrel:pascalc from comment #67)
> Christie , if the code is available at some repository on svn/github/hg, I
> can have a look. A common mistake that could cause that bug is  that you

I believe it is:
http://viewvc.svn.mozilla.org/vc/projects/getpersonas.com/trunk/server/external/mozilla/july-campaign-fb-tab/

    
    

    
  
define('LANG_FILE', 'olympics.lang');
should now be:
define('LANG_FILE', 'julyevent.lang');

    
    

    
  
Looks like that change didn't get committed to git before I updated SVN. Whoops!

Fix added in http://viewvc.svn.mozilla.org/vc?view=revision&revision=107787.

    
    

    
  
Verified translations are looking good with both text & flags displaying correctly for staged locales.

    
    

    
  
Facebook tab was verified & released.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
Product: Websites → Websites Graveyard

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: