Skip to content

Instantly share code, notes, and snippets.

@mattwelch

mattwelch/ContactRdio.page

Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattwelch/11239782 to your computer and use it in GitHub Desktop.
Save mattwelch/11239782 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ContactRdio.page
<apex:page showHeader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false" standardController="Contact">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'icons.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'styles.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'OneStarter.css')}"/>
<!-- We need these so we can create our auth hash for the OAuth1.0a for the Rdio API -->
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha1.js"></script>
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
<!-- Grab this one from https://github.com/ddo/oauth-1.0a -->
<apex:includeScript value="{!URLFOR($Resource.OneStarter,'oauth-1.0a.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
<apex:includeScript value="{!URLFOR($Resource.TouchSwipe,'jquery.touchSwipe.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.OneStarter,'jquery.onestarter.js')}"/>
<apex:includeScript value="/canvas/sdk/js/publisher.js"/>
<script>
//this is implementation code
$(document).ready(function() {
// Get all the variables set up for our OAuth
var oauth = new OAuth({
consumer: {
public: 'rdioCustomerId',
secret: 'rdioCustomerSecret'
},
signature_method: 'HMAC-SHA1'
});
var request_data = {
url: 'http://api.rdio.com/1/',
method: 'POST',
data: {
method: 'findUser',
email: '{!Contact.Email}'
}
};
$.ajax({
url: request_data.url,
type: request_data.method,
// Send along our hashed data
data: oauth.authorize(request_data)
}).done(function(data) {
// If we got a result, this person loves music....
if (data.result != null) {
// Grab the user image url and populate our poor-man's template with it
$("#userIcon").html($("#userIcon").html().replace("{{USERICON}}",data.result.icon));
// And set up our next request, this time for this user's heavy rotation albums
request_data = {
url: 'http://api.rdio.com/1/',
method: 'POST',
data: {
method: 'getHeavyRotation',
user: data.result.key
}
};
$.ajax({
url: request_data.url,
type: request_data.method,
data: oauth.authorize(request_data)
}).done(function(albums) {
// Loop through and grab the album cover and artist name for each result, again populating our poor-man's template
for (i=0; i < albums.result.length; i++) {
console.log(albums.result[i]);
$("#one-carousel").html($("#one-carousel").html()+$("#albumTemplate").html().replace("{{ARTISTNAME}}",albums.result[i].artist).replace("{{RDIOURL}}",albums.result[i].shortUrl.replace("http","rdio")).replace("{{IMGURL}}",albums.result[i].icon.replace("200.jpg","400.jpg")));
if (i==4) break;
}
// Fire up the carousel
s1 = $('div#one-app').oneStarter('app');
s1.carousel($('div#one-carousel'));
$("#musicLover").show();
});
}
// Otherwise, this person hates music
else {
$("#musicHater").show();
}
});
});
</script>
</head>
<body>
<div id="musicLover" style="display:none;">
<header class="tc ptm" title="{!Contact.Name}" icon="contact" style="padding-bottom:5px;">
<div class="icon icon--d sq-60 " id="userIcon"><img src="{{USERICON}}" style="width:60px; height: auto;"/></div><br/>
<h1 class="f1 text-shadow man">
{!Contact.Name}
</h1><br/>
<h2 class="f3 text-color-2 text-shadow man pbm">
Recent Music
</h2>
</header>
<div id="one-carousel" style="text-align:center;">
</div>
<div style="display:none;" id="albumTemplate">
<div id="record-list">
<a href="{{RDIOURL}}"><img src="{{IMGURL}}" style="max-width:100%; height: auto;"/></a><br/>
<h2>{{ARTISTNAME}}</h2>
</div>
</div>
</div>
<div id="musicHater" style="display:none;">
<header class="tc ptm" title="{!Contact.Name}" icon="contact" style="padding-bottom:5px;">
<h1 class="f1 text-shadow man">
{!Contact.Name}
</h1><br/>
<h2 class="f3 text-color-2 text-shadow man pbm">
hates music
</h2>
</header>
</div>
</body>
</html>
</apex:page>
Raw
Instructions
Go to the OneStarter repo (https://github.com/joshbirk/onestarter) and get everything setup as described there.
We'll use that infrastructure in our Publisher Action.
Create a new account and app at the Rdio site (http://www.rdio.com/developers/), and note the customer id and secret.
Create a new VF page called ContactRdio.page, and copy the contents of the above file, substituting your Rdio client id
and secret where noted. After saving, mark it as available for mobile in the GUI.
Download the oauth-1.0a.js file from https://github.com/ddo/oauth-1.0a and save it as a static resource. (I just included
it in the OneStarter static resource. If you put it somewhere else, change the location in the file, above.)
Now go to Setup->Customize->Contacts->Buttons, Links, and Actions. Create a new Action of type "Custom VisualForce" and
select our new ContactRdio page. Make it 700px tall (this is for the Desktop/web publisher action). If you want a nice,
shiny icon, you can get the one I'm using from http://mattwel.ch/wp-content/uploads/2014/04/rdio-icon.jpg .
You should be all set now. Fire up Salesforce1, and navigate to a contact. If that contact has an email address registered
with Rdio, you'll see his or her 5 most heavily-listened to recent albums when you bring up the publisher action.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment