BranchMetrics/ios-branch-deep-linking-attribution

GIFs not rendering properly when DeepLink is used on Facebook

Closed this issue · 1 comments

Preface: Branch SDK integration appears to be working fine. Deep links open the app and open content as expected yay

Issue summary: Getting a GIF to render properly in a Facebook post with a Branch DeepLink seems to be an impossible task. No matter what OG tags are set, the GIF appears as a static image and proportions are incorrect.

  1. By default, The og:url parameter shows as 'missing' in the Facebook OG URL debugger, even though it shows "og:url" in the section: "Based on the raw tags, we constructed the following Open Graph properties".
  2. If setting the "og_url" parameter in the code: lp.addControlParam("$og_url", withValue: gifURL), then the Facebook debugger warning goes away, however the value in the facebook link debugger for "og:url" is always the short link even if specified otherwise.
  3. Setting "$og_image_width" and "$og_image_height" in the link parameters appear to do nothing at all to the gif preview appearance.
  4. Stackoverflow search results suggest that setting $og_url and $og_image to the same link (to the gif) is what's required to resolve typical gif rendering issues, but regardless of what the $og_url is set to in the parameters, the value is always shown as the branch short link url in the facebook OG URL debugger: https://developers.facebook.com/tools/debug/
  5. Not setting "$og_type" in the parameters results in the facebook debugger showing a warning that it's missing, however the Branch documentation specifically says to NOT use it when posting to facebook - but unfortunately the documentation doesn't give any explanation why.
  6. Ignoring point 5 and testing values for "$og_type" in an attempt to get the GIF to render / play in the preview, gets the facebook warning to go away, but doesn't change anything. GIF still doesn't play and proportions are off.
  7. Sending one of the deep links through iMessage or other channels for a GIF works fine with minimal parameters.9.
  8. When creating a link manually through the Branch dashboard, providing the same source GIF link, and manually setting the parameters, and also configuring the 'social media tags', the GIF renders properly (looks great) in the provided Branch "Facebook Preview", but then that link doesn't work when posted on Facebook (GIF is a static image and proportions are wrong).
  9. I've tried adding OG parameters in both "buo.contentMetadata.customMetadata" and "lp.addControlParam", but both ended in the same result.
  10. To rub salt in the wound: Posting GIF share links from Giphy.com on facebook appear to work just fine.

I can't help but feel this isn't working as well as it should, but I'm also generally willing to accept the response "Facebook sucks".

Here are some links generated from the following code:

let buo = BranchUniversalObject.init(canonicalIdentifier: cIdentifier)
        buo.title = gifTitle
        buo.contentDescription = gifDescription
        buo.imageUrl = gifURL
        buo.publiclyIndex = true
        buo.locallyIndex = true
        let lp: BranchLinkProperties = BranchLinkProperties()
        lp.channel = channel
        lp.feature = feature
        lp.campaign = campaign
        lp.tags = tags
        
        lp.addControlParam("gid", withValue: sourceId)
        lp.addControlParam("$og_url", withValue: gifURL)
        lp.addControlParam("$og_image", withValue: gifURL)
        lp.addControlParam("$og_image_width", withValue: gifWidth) //doesn't do anything
        lp.addControlParam("$og_image_height", withValue: gifHeight) //doesn't do anything
        
        buo.getShortUrl(with: lp) { url, error in
            print(url ?? "")
        }

Note: I've tried with and without the controlParam's above and also using the above OG params with buo.contentMetadata.customMetadata .... to no avail.

Here are a couple links (works fine in iMessage, but not Facebook).

https://get.animateme.app/uTD6G0KU8ob

https://get.animateme.app/x3WK47Mo6ob

https://get.animateme.app/edmBojgY8ob

A glorious screenshot of how Facebook displays the gif and data:

screenshot1

Cheers,

Chris

For integration with 3rd parties, the support team may have some insight.
https://help.branch.io/using-branch/page/submit-a-ticket

The Github reported issues are generally only checked by the dev team for bugs.