Html tag attribute value from javascript value

Question

im going crazy , im not so good on js or html so plz try to help me. on my blog on blogger i want to 1) Automatically create a short link using goo.gl service 2) share this short link on twitter by its button the js code im using to make the link short

<script type="text/javascript">
    var shorturl;
      var longUrl="http://*****" + "<data:blog.url/>";
      var request = gapi.client.urlshortener.url.insert({
      'resource': {
      'longUrl': longUrl
         }
       });
       request.execute(function(response) 
       {

        if(response.id != null)
        {
            shorturl=response.id;
        }
        else
        {
            shorturl="<data:blog.url/>";
            alert("error: creating short url n"+ response.error);
        }
        document.getElementById('shorturlid').setAttribute("data-url",shorturl);
    });
    </script>

the code for twitter button

<a href="https://twitter.com/share" class="twitter-share-button" id="shorturlid" data-via="*****" data-size="large" data-count="none" data-hashtags="*****">Tweet</a>
<script>!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');</script>

this just share the current page url so it seems that my code does nothing.

Any Solution?

Answer 1

I've created a jsfiddle and there I have noticed that you can't access the link with shorturlid once twitter script have executed.

Because it changes the DOM a lot. A better way to do what you want is to call the twitter script after you have your shortened url ready and added to the DOM.

My script seems to work but sometimes I'm getting the following error Error. User Rate Limit Exceeded. Error. User Rate Limit Exceeded. not sure what it is. Maybe if you run the script too often.

(I have used jQuery beause it's easier to create DOM elements. Of course the same should work with pure JS.)

var longurl = 'http://www.google.com/';
var $tw_link;

gapi.client.load('urlshortener', 'v1', function () {
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longurl
        }
    });
    var resp = request.execute(function (resp) {
        if (resp.error) {
            $("#show").html('Error. ' + resp.error.message);
        } else {
            $("#show").html("Short URL for " + longurl + " is: " + resp.id);
            var shorturl = resp.id; //document.getElementById('shorturlid').setAttribute("data-url", shorturl); // not working because twitter button changes DOM!!
            $tw_link = $('<a/>');
            $tw_link.attr('href', 'http://twitter.com/share');
            $tw_link.addClass('twitter-share-button');
            $tw_link.attr('data-url', shorturl);
            //var body = document.getElementsByTagName('body');
            $('#show').append($tw_link);
            console.log(shorturl, $tw_link);
            loadTwitter();
            //alert(shorturl);
        }
    });
});

function loadTwitter() {
    ! 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');
};