CODEWITHSUNDEEP
ajaxjquery-mobiletwitterfacebook-likegoogle-plus-one
Michal Skop
Michal Skop

Reputation: 1399

JQuery Mobile using AJAX and Facebook Like, Twitter Tweet, G+

I want to have fb like button, twitter's tweet button and G+ equivalent on every page of a website built using JQuery Mobile and not giving up the AJAX transitions.

I can get it work for multipage (linking example0.html#1 to example0.html#2 and back)

I can get working a custom basic javascript (like alert('*');) to be run correct times (showing once at every page, example1.html <-> example2.html). Using jquery .off and .on.

I can get it done switching off the ajax. Works ok example1.html <-> example2.html

However, cannot get it well for the social buttons with ajax and more single pages. The buttons should be shown on every page, e.g. example1.html <-> example2.html

Any working example of any of the social buttons?

(Similar question, however also without working example: Integrating jQuery Mobile with Facebook Like and Twitter Tweet )

Full example, works for 1st (loaded) page, not for the other one.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>

<div data-role="page" id="page1" data-title="Page 1">
  <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=121542504547391";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
  <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>
  <a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="right">Page 2</a>
</div>

<div data-role="page" id="page2" data-title="Page 2">
  <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=121542504547391";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
  <div class="fb-like" data-href="http://localhost" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>
  <a href="#page1" data-role="button" data-icon="arrow-l">Page 1</a>
</div>

</body>
</html>

Upvotes: 2

Views: 4477

Answers (2)

Pere
Pere

Reputation: 1075

Garyv already gave you the correct answer for Facebook:

FB.XFBML.parse();

To reload the Tweet buttons dinamically, the function you are looking for is:

twttr.widgets.load();

You should apply both functions after you have loaded your content via ajax.

UPDATE:

As per the Google+ button, the answer is:

gapi.plusone.go();

(Found it here: Google plus-one button on a page that is refreshed with AJAX

Upvotes: 2

garyv
garyv

Reputation: 89

In the tweet button embed code, there is an if statement checking for an element with the id 'twitter-wjs'. Removing this element before page loads makes the tweet button work.

$(document).bind('pagebeforeload', function(){
    $('#twitter-wjs').remove();
});

Here's a fix for the Facebook like button. I won't pretend to understand it, I just found this Googling and it seems to make it work.

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});

Upvotes: 4

Related Questions