Social Media buttons inside hidden Div

问题

Has anybody been able to get the Facebook Like, Twitter Follow, and Google +1 buttons to work inside a chrome extension.

I can get the buttons to show up, and some functionality, but seem to be missing parts. For instance the Like button doesn't remember if you liked it, it shows the count of 1 every time. Twitter doesn't show the correct number of followers, and is missing the @username after the "Follow" text.

I know the extensions are sandboxed. Has anybody found a way around this? Example? Code?

UPDATE

The problem is that the social media buttons are inside a div that is hidden (display: none). The div uses jQuery's slideToggle to show and hide. By default the div is not showing and the social media buttons are on it. When I put the social media buttons in a div that is not hidden they work fine. Any solutions?

The problem was that the social media buttons are inside a hidden div (a different display that can be accessed through a tab). Is there any way to make them work without update the z-index on triggered events?

回答1:

They do work in an extension page. You have to explicitly specify a public URL and facebook/twitter have to be modified to explicitly include the protocol. //platform.twitter.com to https://platform.twitter.com

popup.html

<html>
<body>
  <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow @twitter</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=113869198637480";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <div class="fb-like" data-href="http://example.com" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  <g:plusone href='http://example.com'></g:plusone>
</body>
</html>

manifest.json

{
  "name": "test",
  "version": "1",
  "browser_action": {
    "default_popup": "popup.html"
  }
}

回答2:

Problem solved. I added the markup to the markup page and made an anonymous function call to the API script immediately after the slideToggle began. Works perfect.

来源：https://stackoverflow.com/questions/9662576/social-media-buttons-inside-hidden-div

标签

javascript

jquery

facebook

twitter

social-networking