Buyers Guide: OG Tags for shares (required for MozFest)

[xmatthewx]

At MozFest, we will have a raffle to incentive people sharing and commenting on products in the buyer's guide. To do this well, we'll need OG Tags in place for nice tweets with good description and images.

• Step 1: engineer with logo and basic description (fail proof fallback)
• Step 2: gather ideal description and image (this will take a minute)
• Step 3: build out with optimized content

cc @alanmoo @caltrider @beccaklam to make it so

[alanmoo]

@mmmavis This is something you have experience with, let's talk soon about if you can help out with this.

[mmmavis]

@alanmoo we will have to make sure og tags related code is generated on server side in order for this to work. I think Pulse still has issues around this due to the same reason + getting it to work with react-router's routes with params.

[alanmoo]

Buyer's guide is mostly server-side rendered, so this shouldn't be an issue. No react-routing here.

[kristinashu]

I'll get copy from Jen for this and then add it here.

[kristinashu]

Adding a note from @Pomax that we will need both OG and a Twitter share card.

[beccaklam]

Talked through with @kristinashu and upon further reflection I don't think we need this given that we already have the survey on each product page. There should be enough ways to generate 5000 engagements. So please ignore my previous request!

@kristinashu @mmmavis @alanmoo Sorry for the late notice on this but for tracking engagements at MozFest (with a goal of 5000 in mind), Jen and I were wondering if it would be possible to set up unique social shares on each product page. This would increase the ways people could engage with the guide in a manner we could count. We know it's late in the game though, so if it's not feasible within the timeline, that's fine.

[kristinashu]

Terminology

OG description, not editable by user:

(example from last year)

Tweet or FB post content, editable by user (automatically comes with OG description):

(example from last year)

Summary of what we want

OG description

• copy "This year, learn what tech comes with privacy included, using Mozilla's buyer's guide for connected gadgets."
• image share.jpg.zip

For header share icons

• user clicks a share icon in the header
• tweet or fb post content: "I found this really useful website and wanted to share. It’s @mozilla’s holiday buyer’s guide to help understand what connected products are safe and which ones aren’t. So you don’t give someone a gift that could spy on them this holiday. It’s at PrivacyNotIncluded.org"
• OG description appears automatically
• comp of where share icons are:

For product page copy link:

• OG description appears automatically

For product page creep-o-meter:

• after voting a user clicks share icon in the creep-o-meter section
• tweet or fb post content (editable by user): "I think this product is CREEPY. What do you think? Check out the Creep-O-Meter over on @mozilla’s PrivacyNotINcluded.org holiday buyer’s guide."
  [version depending on a users vote: CREEPY, NOT CREEPY, NOT REALLY ALL THAT CREEPY, KINDA CREEPY]
• OG description appears automatically

cc @gvn

[kristinashu]

@alanmoo @mmmavis just to make sure we're on the same page from our meeting...

• P1: Nav share as recommended above
• P1: for now, Product creep-o-meter shares will just do the same as Nav share
• P2: later, make it so Product creep-o-meter share product url and custom message as recommended above
  • we won't use Share Progress
  • will use FB API

[kristinashu]

Update:

Yay @mmmavis is done with the shares in the nav #1926

Now that Alan has finished with creep-o-meter, Mavis can set those up too.

Product page shares should:

• FB, Twitter, Email will link to product page
• Tweet + Email will give pre-populated text (editable by user): "I think this product is CREEPY. What do you think? Check out the Creep-O-Meter over on @mozilla’s PrivacyNotINcluded.org holiday buyer’s guide."
  [version depending on a users vote: "CREEPY" (first two bars), "NOT REALLY CREEPY" (middle), "NOT CREEPY" (last two bars)]
• FB won't have any pre-populated text