Getting your Twitter tweets in APEX

How to retrieve Twitter tweets from your application?

Tested on APEX 5 and Firefox - three easy steps

Recently I had a request from a client to implement a feature on APEX page that will show companies latest tweets. Fair enough it shouldn't be that hard right?

Since it took me a while to google the right solution I wanted to write a post on it. 

Before I even begin I have to thank Jason Mayer (http://www.jasonmayes.com/projects/twitterApi/) for creating super cool JavaScript function that bypasses the biggest challenge here being Tweeter API and its 1.1 version OAuth.

Since I am not Twitter nor OAuth expert to keep story short, previously to retrieve public tweets all you would do is use a simple API function that would return data for you. After some parsing you would get end results. 

Now (being since 2013) that has all changed as Twitter introduced new API with a security level where all users will need to authenticate before they can get the same results. 

This approach by authentication and using a web service calls I found challenging and closest that I got from PL/SQL side was another great post by somecodinghero. 

As this required ACL configuration and wallet set ups I was wondering if there is another way. At this point I came across Jason's website and his brilliant idea that can save you a lot of time.  He decided to bypass this by using another Twitter API that still doesn't require authentication and is easy to use.

Before you can follow these few steps please note that you need to download his TwitterFetch.js function and have an account on Twitter. Also it wouldn't hurt to have a look and understand the demo he kindly prepared for us.

Firstly log into your twitter account and select Settings ->

 

 Widgets -> create new widget.

For settings choose all default except Auto-expand photos is optional and click create Widget. Once completed Edit this widget to get the key part of this solution. 

Note "Copy and paste the code into the HTML of your site." region under right hand side. Copy it to text editor and extract the weird serial number 6633................. from it. Save this as we will use this later on.

Once you have done that upload JS file to your server or your application static files. From then onwards these are the steps to follow to get it working in APEX:

0. Reference your JS file in HTML (either Template or page header or your way)

1. Create a HTML region on your page

This is where your data will be returned.

2. Create On load Dynamic Action -> Execute JavaScript as

var tweetId =  "6366XXXXXXXXXXX"; // this is where you need to paste your widget number

var config1 = {
  "id": tweetId,
  "domId": 'myTweets', //this needs to match you step 1 ID
  "maxTweets": 2, // returns how many you want back
  "enableLinks": true, 
  "showInteraction": false
};

twitterFetcher.fetch(config1);

At this point being familiar to demo examples would help you understand what parameters go in this function and what they do for you.

3.  We are done

If you did all steps right you should get something similar:

Wasn't this easy and so cool. Of course my example does contain some CSS but you get the point.

With an ease you can get into changing the JS file and returning whatever is needed for you. I will not go into more details and leave it to you to adopt and parametrize your code. 

Probably this is an ideal candidate for my first APEX Plugin :)

Thanks all.

SLino