freedomofpress / securethenews

An automated scanner and web dashboard for tracking TLS deployment across news organizations
https://securethe.news
GNU Affero General Public License v3.0
100 stars 25 forks source link

Social media sharing #61

Closed garrettr closed 7 years ago

garrettr commented 7 years ago

Basic support for Twitter Cards and Open Graph tags.

msheiny commented 7 years ago

LGTM for da marge

conorsch commented 7 years ago

@msheiny confirmed working Twitter cards. @garrettr can you test with Facebook and confirm that works? (Neither @msheiny nor I have accounts.)

garrettr commented 7 years ago

From the Facebook Card Validator, there are 2 issues that should be fixed:

  1. Provided og:image URL, https://securethe.news/static/images/logo.png was not valid because it did not meet the minimum size constraint of 200px by 200px.
  2. The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
garrettr commented 7 years ago

I think we don't have to fix the "Facebook App ID" before launch. I'm not really sure what it's for and we don't have one for our main site.

Working on fixing the image size issue now.

garrettr commented 7 years ago

Exporting SVG to PNG turned out to be surprisingly difficult! I tried a bunch of the techniques recommended in this superuser thread, with limited success.

Conversion via ImageMagick was always unsatisfactory: the results would be missing color, or other essential components of the design. This persisted even after I reinstalled ImageMagick with rsvg support. rsvg-export did not work either.

I finally had success with https://github.com/shakiba/svgexport (which uses Chrome, via PhantomJS, to render the SVG under the hood).

garrettr commented 7 years ago

@msheiny Deploy this ish so we can do a final check of the social sharing for Twitter and Facebook? I merged master into this branch so you shouldn't regress anything by deploying this.

garrettr commented 7 years ago

Ok, I still think the logo looks a little less than 100% in the Twitter and Facebook share previews: it's still a little fuzzy/low-rez for my tastes (try comparing it to the Twitter card for https://freedom.press, which is a super high-rez photo). However, I think this is good enough for now. This is ready to merge!