Share This buttons in Bootstrap Popover not clickable

Question

I have a link which opens a popover, and in the popover I load content from a div. The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.

So the set up looks like this :

Button and content :

<a href="#share" class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</a>

<div id="share_this_btns" class="hidden">
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
    <div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
    <div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
    <span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>

Popover init

$('#shareHead').popover({
    title   : "Share",
    html    : true,
    content : function(){
        return $('#share_this_btns').html();
    },
    placement : 'bottom'
});

The buttons turn up just fine and also show the count - however, they can't be clicked.

I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID).

Can you please advise?

EDIT// It seems to work every now and then without me changing anything. So the scripts seem to run, maybe it is an issue with how the elements are layered?

You should move your first ` – Blazemonger Mar 27 '14 at 18:06 — Blazemonger, Mar 27 '14 at 18:06

score 3 · Accepted Answer · edited May 23 '17 at 10:27

Ok I figured it out. I cannot just load sharethis data into the popover, so what I did is this : I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();

For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init. After that, however, the popover isn't positioned correctly because the width changes after the load. So I also wrote a function that resizes everything. It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.

The two sharethis scripts are already loaded in the header.

The final body code looks like this :

Button that opens popover

<div id="btnParent_head">
    <button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
    <a href="#pledge" class="btn btn-main scroll"><i class="fa fa-thumbs-o-up"></i> Pledge</a>
    <button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>

Javascript/JQuery

$(document).load(function(){
    $('#shareHead').popover({
            title   : "Share",
        html    : true,
        content : function(){
            var text = '';
            text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
                text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
            text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
             return text;
            },
            placement : 'bottom',
        callback : function(){
                 reloadStBtns(resizePopover,$('#btnParent_head     .popover'),$('#shareHead'));
        }
    });
});

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
      tmp.call(this);
      if (this.options.callback) {
        this.options.callback();
      }
}

function reloadStBtns(callback,popover,parent) {
    stButtons.locateElements();
    setTimeout(function(){
        callback(popover,parent);
    },500);
}
function resizePopover(popover, parent) {
    var i_width = parent.outerWidth();
    var i_swidth = popover.outerWidth();
    var i_nleft = (i_width - i_swidth)/2
    popover.css({'left':i_nleft});
}

I wish there was a better solution than doing the setTimeout, but I couldn't find anything.

I have printed the stButtons.locateElements() but it returns undefined. Why is that? below is the structure I have used — Jetson John, Feb 13 '15 at 16:30
I am not sure how locateElements() works ecactly, but maybe http://stackoverflow.com/questions/7289021/how-to-dynamically-create-share-this-buttons-with-a-custom-urls-with-a-javascr is of help for you? — Aurelin, Feb 19 '15 at 17:20

score 0 · Answer 2 · answered Mar 27 '14 at 18:15

0

It doesn't look like you have linked the share buttons up to anything. Try wrapping each span pointing to a resource in an anchor tag e.g.:

<a href="https://www.facebook.com/YourPage"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></a>

Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster.

answered Mar 27 '14 at 18:15

Tim

2,123
4
27
44

Sharethis is a service where you put the tags only and the JavaScript processes them so that they become link. You don't need to put links around the span tags... I had my JS put at the bottom of the page, but was thinking maybe bootstrap's popover requires the JS to be in the popover itself because it only loads the content when the popover is opened. But neither worked. – Aurelin Mar 27 '14 at 19:17

Share This buttons in Bootstrap Popover not clickable

2 Answers2