Branch.io inetegration with cordova / ionic 1 app. Shared link generated by branch for snapchat does not show image preview and the link not clickable

Question

We have used Branch.io for implementing deep links in our mobile hybrid app which is developed using ionic 1 framework. We have used branch-cordova-sdk plugin and configured the deep links for sharing with social media apps. We are passing title, description and contentImageUrl for branch.io to create the link. It works great on almost all SM platforms except Snapchat.

When the content is shared on snapchat, the link is showing up along with content but it is not clickable from snapchat. There is no preview of the image is shown. I could not find any solution for this yet. Also please see the code down below in reply. thanks.

Here is the code i'm using:

 var branchUniversalObj = null;
         var props = {};
             props.canonicalIdentifier = 100;
             props.title = "my title";
             props.contentDescription = "my description";
             props.contentImageUrl = "http://lorempixel.com/400/400/";

            //create branch object
            Branch.createBranchUniversalObject(props).then(function (res) {
              branchUniversalObj = res
              console.log('Response: ' + JSON.stringify(res))
            }).catch(function (err) {
               console.log('Error: ' + JSON.stringify(err))
            });

Somewhere in the code:

        var analytics = {
              campaign: "sharing cards"
             }
          var properties = {
              cardId : 100,
              cardType: "promo",
              refUser: "John"    

             }

            // share sheet
            branchUniversalObj.showShareSheet(analytics, properties, "Hello awesome stuff");

Answer 1

When you share a Branch link on various Social Media platforms, it is scraped to display the OG related information (i.e. OG Title, OG Image and OG Description).

When scraped, Branch will return: 1st: any OG parameters that have been defined for the link; 2nd: any OG parameters that have not been defined for the link but that have been defined at the app level (in Social Media Display Customization on the Link Settings page); and finally: any meta tags present on the web site specified in the Default URL ($fallback_url) page.

In order, to ensure that the OG image is displayed correctly, you need to ensure that you have the OG parameters defined at atleast one of the three levels mentioned above.

Here are the various ways to set OG tags

1. To add the og_image for a particular Quick link on the dashboard:

   • Visit the Quick links page on your dashboard.
   • Click on 'Create new Link'
   • On the 'Configure Options' tab and 'Social Media' section either add the og_image or the og_image_url.

2. While creating links from the iconic SDK add image URL to the Branch Universal Object using contentImageURL tag as shown below:

Code snippet

var properties = {
    canonicalIdentifier: 'content/123',
    canonicalUrl: 'https://example.com/content/123',
    title: 'Content 123 Title',
    contentDescription: 'Content 123 Description ' + Date.now(),
    contentImageUrl: 'http://lorempixel.com/400/400/',
    price: 12.12,
    currency: 'GBD',
    contentIndexingMode: 'private',
    contentMetadata: {
        custom: 'data',
        testing: 123,
        this_is: true
    }
}

// create a branchUniversalObj variable to reference with other Branch methods
  var branchUniversalObj = null
  Branch.createBranchUniversalObject(properties).then(function (res) {
        branchUniversalObj = res
        alert('Response: ' + JSON.stringify(res))
    }).catch(function (err) {
            alert('Error: ' + JSON.stringify(err))
 })

3. To set these OG tags by default for your branch links:
   • Go to the Link Settings Page on your dashboard:
   • Scroll down to the "Social Media Display Customization" section
   • Set the Link Title, Description and an image. Here is a screen shot for your reference.

PS: As a final caution, make sure the image you specify as the OG Image adheres to the Snapchat accepted image dimesions, which I belive is 1080 x 1920 pixels.