Decoding SDK Tweets with Formatted URLs

When using the Javascript SDK, you may find Tweets that contain encoded URLs. This encoding scheme is designed to help you conform to the Twitter Display Requirements concerning display URLs. This article describes how to decode and format these URLs.

(If you are using the default onRenderContent function, then URLs are automatically formatted in a way that confirms to the Twitter Display Requirements, and you don't need to take any special steps. However, if you've written your own onRenderContent function to format your campaign items, you'll need to follow these steps.)

Decoding Tweets with Formatted URLs

In this SDK example:

<script type="text/javascript">
    TwineJsSDK.renderContent({
      request: {
         campaign: "louboutin",
         limit: 1
      },
    options: {
        target: "tiles",
        events: {
          onRenderContent: function(item) {
              console.log (item.description);
          }
        }
         }
    });
</script>

If the description field contains a Tweet with a URL, it will be formatted with the display name immediately following the URL, wrapped in curly braces:

Your customers expect love. Don’t keep them waiting. http://t.co/abcde{cnn.com}

In order to conform to Twitter's Display Requirements, your application should display cnn.com as a link, showing the shortened link as the display name. To do this, use the TwineSDK.clickify() helper function:

<script type="text/javascript">
    TwineJsSDK.renderContent({
      request: {
         campaign: "louboutin",
         limit: 3
      },
    options: {
        target: "tiles",
        events: {
          onRenderContent: function(item) {
              console.log (TwineJsSDK.clickify(item.description));
          }
        }
         }
    });
</script>

Now, you'll see content formatted like this:

Your customers expect love. Don’t keep them waiting. <a href='http://t.co/abcde'>cnn.com</a>

Advanced Example

If you need more flexibility than the TwineJsSDK.clickify() function provides (for example, to include a CSS class on your A tag), simply write your own formatting function. For example:

<script type="text/javascript">
    TwineJsSDK.renderContent({
      request: {
         campaign: "louboutin",
         limit: 3
      },
    options: {
        target: "tiles",
        events: {
          onRenderContent: function(item) {
          
            var exp = /(\b(((https?):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%‌=~_|])\{(.*?)\}/ig;
            text = item.description.replace(exp,"<a class='link' href='$1'>$6</a>"); 
              console.log (text);
          }
        }
         }
    });
</script>

This will format your result:

Your customers expect love. Don’t keep them waiting. <a class='link' href='http://t.co/abcde'>cnn.com</a>