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.
- 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".
- 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.
- Setting "$og_image_width" and "$og_image_height" in the link parameters appear to do nothing at all to the gif preview appearance.
- 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/
- 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.
- 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.
- Sending one of the deep links through iMessage or other channels for a GIF works fine with minimal parameters.9.
- 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).
- I've tried adding OG parameters in both "buo.contentMetadata.customMetadata" and "lp.addControlParam", but both ended in the same result.
- 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:
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.