Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Creating Reusable Social Share Buttons" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  <script type="text/x-handlebars">
    {{share-twitter data-url=url 
                    data-text=text 
                    data-size="large" 
                    data-hashtags="emberjs"}}
  </script>
  
  <!-- Necessary for components -->
  <script type="text/x-handlebars" 
          id="components/share-twitter"></script>
</body>
</html>
 
​
 
App = Ember.Application.create();
​
App.ApplicationController = Ember.Controller.extend({
  url: 'http://emberjs.com/guides/cookbook',
  text: 'The EmberJS Cookbook is amazing!'
});
​
App.ShareTwitterComponent = Ember.Component.extend({
  tagName: 'a',
  classNames: 'twitter-share-button',
  attributeBindings: [
    'data-size', 'data-url', 
    'data-text', 'data-hashtags'
  ],
  
  displayButton: function() {
    // Extracted from twitter share js
    !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');
  }.on('didInsertElement')
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cavnebpro
0viewers