Social Sharing with Backbone, Facebook, Twitter

Supporting code demo to my technical article reviewing social sharing in a Backbone webapp through Facebook, Twitter, Email, and URL.

by Shobhit Sharma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<h1>Social Sharing/Sending Example</h1>
<div id="share-item"></div>

JavaScript

// SEE: http://cdnjs.com/ for ultimate online JS resources
SocialSharing = {};

SocialSharing.Model = Backbone.Model.extend({
    defaults: {
        author: 'Ken Tabor',
        name: 'Cappuccino',
        message: 'Enjoy this virtual coffee until we can get together again for a real cup. See you soon!',
        readUrl: 'http://www.madefreshcoffee.com/read.php?sku=bd86292a-241a-11e2-b97c-12313d04a24a'
    }
});

SocialSharing.View = Backbone.View.extend({
    el: "#share-item",

    events: {
        'click #FacebookButton': 'onFacebook',
        'click #TwitterButton': 'onTwitter',
        'click #EmailButton': 'onEmail',
        'click #GoogleButton': 'onGoogle',
        'click #URLButton': 'onURL'
    },
   
    template:
'<div>'+
'<div>' +
'<h3>Time to Deliver</h3>' +
'<p>You\'ve mixed a special coffee brew, named it, authored a message, and now it\'s time to send.</p>' +
'</div>' +
'<div>' +
'<ul>' +
'<li><a href="https://twitter.com/share?url=<%= encodeURIComponent(readUrl) %>&text=<%= encodeURIComponent(name) %> - <%= encodeURIComponent(message) %>" target="_blank"><button id="TwitterButton">Twitter</button></a></li>'+
    '<li><a href="mailto:[email protected]?subject=Made Fresh Coffee - <%= name %>&body=by <%= author %>, <%= message %> <%= readUrl %>" target="_blank"><button id="EmailButton">Email</button></a></li>' +
    '<li><a href="https://plus.google.com/share?url=<%= encodeURIComponent(readUrl) %>" target="_blank"><button id="GoogleButton">Google+</button></a></li>'+    
'<li><button id="URLButton">URL</button></li>' +
'<li><a href="https://www.facebook.com/dialog/send?app_id=1234567890&name=Made Fresh Coffee - <%= encodeURIComponent(name) %>&description=<%= encodeURIComponent(message) %>&link=<%= encodeURIComponent(readUrl) %>&redirect_uri=http://www.yourapp.com/fbresp.php" target="_blank"><button id="FacebookButton">Facebook</button></a></li>' +
'</ul>' +
'</div>' +
'</div>',
    
    render: function () {
        var dataContext =...