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?

AWolf · Accepted Answer · 2015-02-12 14:28:20Z

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. 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');
};

answered Feb 12, 2015 at 14:28

AWolf

9,0105 gold badges38 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Luca La Rocca Over a year ago

thx u,i see its working on jsfiddle, but when i try it on my blog i get this error cannot read property setapykey on this line gapi.client.setApiKey(apiKey); i think there is an error on <script src="apis.google.com/js/client.js"></script>. Am I missing Something?

AWolf Over a year ago

I think it should work without API key. Just comment the line. I'm not sure why you're getting the error. But in the fiddle it is without that line.

Luca La Rocca Over a year ago

now the same problem is on gapi.client.load('urlshortener', 'v1', function () { cannot read property load, so now im sure that the problem is with client.js

AWolf Over a year ago

I think I had a similar problem. That's why I haven't added the demo here at SO. Yes, it seems like it is an loading issue with the client.js. You could try to change the load order. First place your gapi code with onload in the header and then load the client.js script afterwards.

Luca La Rocca Over a year ago

almost done ,, Failed to load resource: the server responded with a status of 400 (OK) content.googleapis.com/urlshortener/v1/url?alt=json ...and instead of 'twitt' button i get this written "Error. Invalid Value"

|

Collectives™ on Stack Overflow

Html tag attribute value from javascript value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related