vADC Docs

Embedded Twitter Timeline - Augmenting Web Applications with Traffic Manager

by dnahas on ‎09-18-2014 10:44 AM - edited on ‎06-01-2015 05:33 PM by PaulWallace (4,266 Views)

With the evolution of social media as a tool for marketing and current events, we commonly see the Twitter feed updated long before the website. It’s not surprising for people to rely on these outlets for information. Fortunately Twitter provides a suite of widgets and scripting tools to integrate Twitter information for your application. Twiter and SteelApp.pngThe tools available can be implemented with little code changes and support many applications. Unfortunately the same reason a website is not as fresh as social media is because of the code changes required. The code could be owned by different people in the organization or you may have limited access to the code due to security or CMS environment. Traffic Manager provides the ability to insert the required code into your site with no changes to the application.

 

Twitter Overview "Embeddable timelines make it easy to syndicate any public Twitter timeline to your website with one line of code. Create an embedded timeline from your widgets settings page on twitter.com, or choose “Embed this…” from the options menu on profile, search and collection pages.

 

Just like timelines on twitter.com, embeddable timelines are interactive and enable your visitors to reply, Retweet, and favorite Tweets directly from your pages. Users can expand Tweets to see Cards inline, as well as Retweet and favorite counts. An integrated Tweet box encourages users to respond or start new conversations, and the option to auto-expand media brings photos front and center.

 

These new timeline tools are built specifically for the web, mobile web, and touch devices. They load fast, scale with your traffic, and update in real-time." -twitter.com

 

Thank you Faisal Memon for the original article Using TrafficScript to add a Twitter feed to your web site

 

As happens more often than than not, platform access changes. This time twitter is our prime example. When loading Twiter js, http://widgets.twimg.com/j/2/widget.js you can see the following notice:

 

The Twitter API v1.0 is deprecated, and this widget has ceased functioning.","You can replace it with a new, upgraded widget from <https://twitter.com/settings/widgets/new/"+H+">","For more information on alternative Twitter tools, see <https://dev.twitter.com/docs/twitter-for-websites>

 

To save you some time, Twitter really means deprecated and the information link is broken. For more information on alternative Twitter tools the Twitter for Websites | Home. For information related to the information in this article, please see Embedded Timelines | Home

 

One of the biggest changes in the current twitter platform is the requirement for a "data-widget-id". The data-widget-id is unique, and is used by the twitter platform to provide information to generate the data. Before getting started with the Traffic Manager and Web application you will have to create a new widget using your twitter account https://twitter.com/settings/widgets/new/. Once you create your widget, will see the "Copy and paste the code into the HTML of your site." section on the twitter website. Along with other information, this code contains your "data-widget-id". See Create widget image.

 

Create widget (click to zoom)Create Widget riverbed.JPG.jpg

 

This example uses a Traffic Script response rule to rewrite the HTTP body from the application. Specifically I know the body for my application includes a html comment <!--SIDEBAR-->. This rule will insert the required client side code into the HTTP body and send the updated body in to complete the request.  The $inserttag variable can be just about anything in the body itself  i.e. the "MORE LIKE THIS" text on the side of this page. Simply change the code below to 

 

 

$inserttag = "MORE LIKE THIS";

 

Some of the values used in the example (i.e. width, data-theme, data-link-color, data-tweet-limit) are not required. They have been included to demonstrate customization. When you create/save the widget on the twitter website, the configuration options (See the Create widget image above) are associated with the "data-widget-id". For example "data-theme", if you saved the widget with light and you want the light theme, it can be excluded. Alternatively if you saved the widget with light, you can use "data-theme=dark" and over ride the value saved with the widget.  In the example time line picture the data-link-color value is used to over ride the value provided with the saved "data-widget-id".

 

Example Response Rule, *line spaced for splash readability and use of variables for easy customization.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Only modify text/html pages   
if( !string.startsWith( http.getResponseHeader( "Content-Type" ), "text/html" )) break;   
   
$inserttag = "<!--SIDEBAR-->"
   
#This is the id used by riverbed.com  
$ttimelinedataid = "261517019072040960"
$ttimelinewidth = "520"; # max could be limited by ID config. 
$ttimelineheight = "420"
$ttimelinelinkcolor = "#0080ff"; #0 for default or ID config, #0080ff & #0099cc are nice 
$ttimelinetheme = "dark"; #"light" or "dark" 
$ttimelinelimit = "0"; #0 = unlimited with scroll. >=1 will ignore height. 
#See https://dev.twitter.com/web/embedded-timelines#customization for other options. 
   
$ttimelinehtml= "<a class=\"twitter-timeline\" "
                "width=\"".$ttimelinewidth."".   
                "\" height=\"".$ttimelineheight."".   
                "\" data-theme=\"".$ttimelinetheme.""
                "\" data-link-color=\"".$ttimelinelinkcolor.""
                "\" data-tweet-limit=\"".$ttimelinelimit.""
                "\" data-widget-id=\"".$ttimelinedataid."".  
                "\"></a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)".   
                "[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))".   
                "{js=d.createElement(s);js.id=id;js.src=p+"
                "\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,"
                "fjs);}}(document,\"script\",\"twitter-wjs\");".   
                "</script><br>".$inserttag."" ;   
   
$body = http.getResponseBody();   
$body = string.replace( $body, $inserttag, $ttimelinehtml); 
http.setResponseBody( $body ); 

 

A short version of the rule above, still with line breaks for readability.

 

1
2
3
4
5
6
7
8
9
if( !string.startsWith( http.getResponseHeader( "Content-Type" ), "text/html" )) break;   
   
http.setResponseBody(string.replace( http.getResponseBody(), "<!--SIDEBAR-->",  
"<a class=\"twitter-timeline\" width=\"520\" height=\"420\" data-theme=\"dark\" "
"data-link-color=\"#0080ff\" data-tweet-limit=\"0\" data-widget-id=\"261517019072040960\">"
"</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test"
"(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;"
"js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}"
"(document,\"script\",\"twitter-wjs\");</script><br><!--SIDEBAR-->")); 

 

Result from either rule:

 

Tweets.JPG.jpg

Contributors