mapseed/platform

Buggy social media thumbnail previews (!)

Closed this issue · 6 comments

futuresoup commented

HeyDuwamish.org on Twitter currently has no thumbnail display

HeyDuwamish.org on Facebook doesn't always have thumbnail preview working

report URL's don't always work from direct URL posting to a Facebook status update, or from using the share button.

tlake commented

I've been doing a bit of investigation, and here's some information I've collected:

Within a flavor's index.html file, we have an {% if place %} block that ought to create Facebook meta tags based off of the current shared place. There is then a bit of in-template logic that should fetch the first image from place.properties.attachments and then build the URL to that image and place it in the og:image tag. If place has not been passed through to the template as context by Django, we skip down to the {% else %} block and we point the preview image at a static image file.

I've found that we seem to intend people to share report/ URLs (like http://heyduwamish.org/report/130), but that doesn't trigger Django to pass place context into the template, and so every report/ URL has the default set of meta tags, where the preview image is that static one.

However, if we replace report/ in the URL with place/, we get closer; that actually does validate the {% if place %} block, and the template builds a dynamic og:image URL. The issue then becomes that Facebook does not pick up the preview image on its first attempt. A refresh or two seems to do the trick, though, but that's less than ideal.

I'm not sure just yet what might be causing this behavior. Could it be a timing issue because we're doing some logistical work inside the template? In other words, might the template be generating the image path a split second after Facebook scrapes/analyzes the page? If so, is the 'it works on refresh' behavior explained by the browser having the image cached after the first load? Do we need Django to do the work of finding the first image before we start stitching together the template, and pass that image through as context so the template has it readily available?

tlake commented

Progress has been made! But there are new roadblocks.

I can't proceed any further until we sort out the URLs. After updating to the latest changes on the develop branch, using /place/ instead of /report/ in the URL is now completely broken, which means there is currently no way on develop to trigger the {% if place %} block within a flavor's index.html.

However, once we get around that:

  • The Facebook cards can work. Before I updated the develop branch, I discovered two changes that needed to be made:
    • We were using an incorrect <meta> tag format:
      <meta name="og:image" content="whatever" />
      needs to be
      <meta property="og:image" content="whatever" />
    • We need to add two more <meta> tags to pre-configure the width and height of our images; otherwise, Facebook has to devote time to analyze and process the image we're presenting, which causes the image to not be displayed on the first attempt. It will work on a refresh, though, after Facebook's had time to analyze.
      • <meta property="og:image:width" content="1200" />
      • <meta property="og:image:height" content="630" />
        These values should probably be tweaked to something we like.
  • I haven't been able to test much of anything for the Twitter stuff, because I updated develop right beforehand. I did discover a bug in one of the comments, though, that was causing most of the twitter tags in the Duwamish flavors index.html to be commented out -- an issue where somebody used three dashes to close a comment instead of the appropriate two.

Once we figure out how to properly enter that `{% if place %} block, I can resume work on this bug.

modulitos commented

Off the cuff, it looks like this is caused by not passing our multi-dataset form info into our view.index method. We should implement this with our multi-dataset feature, similar to the way view.api is implemented here: https://github.com/smartercleanup/platform/blob/develop/src/sa_web/views.py#L359 Note that we have hardcoded place as the dataset slug in the url here: https://github.com/smartercleanup/platform/blob/develop/src/sa_web/urls.py#L23 So instead, we'll need to capture our dataset slug (and probably replace url(r'^place/(?P<place_id>[^/]+)$', views.index, name='place'), with url(r'^(?P<dataset_slug>)/(?P<place_id>[^/]+)$', views.index, name='place'),). Then we'll re-implement view.index to take dataset_id as a kwarg. After that, we should look up the dataset_root and create the ShareaboutsApi object using the dataset_slug. We can probably do this by using the config to map our slugs to a dataset-id.

justBanks commented

I think we should try the most simple approach first. Uncomment the twitter code as Tanner suggests and see if those thumbnails show up.

Based on facebook's documentation, I believe we still have a missing url meta tag:
https://developers.facebook.com/docs/sharing/webmasters#markup

meta property="og:url" content="http://heyduwamish.org/place/365"

Maybe providing the url explicitly will remedy this issue by eliminating some of the processing the bot has to do. Also, isn't it true that our facebook shares are currently not clickable? This url tag would probably address that as well.

modulitos commented

Layla and I were working on this issue, and I have a branch up here: social-media-previews-292

It's definitely a work in progress, but we can continue work on there as needed.