JavaScript twitter button

Question

I am having trouble trying to create a dynamic twitter button with JavaScript. I am trying to get the twitter button to tweet the output of a calculator I am programming. The problem is that the button won't show up. What am I doing wrong? Please help.

var twit_link = document.createElement('a');
  twit_link.setAttribute('href', 'https://www.twitter.com/share');
  twit_link.setAttribute('class', 'twitter-share-button');
  twit_link.setAttribute('url', 'http://www.twitter.com/obamamakes';
  twit_link.setAttribute('data-count', 'none');
  twit_link.setAttribute('data-via', 'ObamaMakes');
  twit_link.setAttribute('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1);
  twit_link.innerHTML = "Tweet";

  $("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>");

  $("#CalcOutput").append(twit_link);

I made the changes that everyone suggested, but the entire output that the calculator is supposed to produce still doesn't show up along with the twitter button. Should I provide the calculator code as well?

I think you don't have to 'create' element. Just append the html in append. http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent — TJ-, Oct 16 '12 at 18:02

Abdullah Jibaly · Answer 1 · 2012-10-16T18:17:29.953

You've got several syntax errors. If you're using jQuery anyways you can clean this up:

var twit_link = $('<a>Tweet</a>');
twit_link.attr('href', 'https://www.twitter.com/share');
twit_link.attr('class', 'twitter-share-button');
twit_link.attr('url', 'http://www.twitter.com/obamamakes');
twit_link.data('count', 'none');
twit_link.data('via', 'ObamaMakes');
twit_link.data('text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1));

$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>");
$("#CalcOutput").append(twit_link);

score 0 · Answer 2 · answered Oct 16 '12 at 18:14

Your syntax is incorrect. You are missing some ending brackets:

var twit_link = document.createElement('a');
  twit_link.setAttribute('href', 'https://www.twitter.com/share');
  twit_link.setAttribute('class', 'twitter-share-button');
  twit_link.setAttribute('url', 'http://www.twitter.com/obamamakes'); // missing ) here
  twit_link.setAttribute('data-count', 'none');
  twit_link.setAttribute('data-via', 'ObamaMakes');
  twit_link.setAttribute('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1)); // missing ) here
  twit_link.innerHTML = "Tweet";

  $("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>");

  $("#CalcOutput").append(twit_link);

You can check this through your browser's developer tools. It will show an error in the console.

As Abdullah mentioned, you can use jQuery to do all of this anyway:

var twit_link = $('<a/>', {
    href: 'https://www.twitter.com/share',
    'class': 'twitter-share-button',
    url: 'http://www.twitter.com/obamamakes',
    'data-count': 'none',
    'data-via': 'ObamaMakes',
    'data-text': ... // whatever you want here
    }).text('Tweet');
$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>");
$("#CalcOutput").append(twit_link);

jsFiddle Example

score 0 · Answer 3 · edited Mar 11 '14 at 13:51

A jsFiddle using jQuery (only) :

$(document).ready(function(){
//TEst Data - Starts
    var activity = 'Test';
    var i = 12;
//Test Data Ends
var twit_link = $('<a />');
twit_link.attr('href', 'https://www.twitter.com/share');
twit_link.addClass('twitter-share-button');
twit_link.attr('url', 'http://www.twitter.com/obamamakes');
twit_link.attr('data-count', 'none');
twit_link.attr('data-via', 'ObamaMakes');
twit_link.attr('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1));
    twit_link.html('Tweet');

$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>");
$("#CalcOutput").append(twit_link);

});

JavaScript twitter button

3 Answers3