CODEWITHSUNDEEP
phpjquerycakephpjquery-mobile
John Kim
John Kim

Reputation: 1882

Integrating jQuery Mobile with Facebook Like and Twitter Tweet

I'm trying to integrate JQM with Facebook Like and Twitter Tweet on my second page. The second page is loaded by first page using anchor tag then using AJAX request for second page.

The problem is that the Facebook and Twitter javascript scripts are not loading when loaded with second page.

I can turn off AJAX but I do not want this feature as a trade-offs.

Is there a way we can re-load the js scripts on specific page after AJAX request on JQM? (I think this should work similar to jQuery live function).

I'm using Cakephp 2.0.4

Upvotes: 2

Views: 4762

Answers (5)

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();
});

This fixes the facebook like button. I'm not entirely sure why it works, but it has something to do with Facebook's API.

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

Upvotes: 3

Jordan Silva
Jordan Silva

Reputation: 828

I had the same problem and I solved it this way:

1: in your html create a tag or id in your page div

<div data-role="page" class="page-class" id="page-id">

2: get the code provided by twitter and change it to use jquery syntax

$( '.page-class' ).live( 'pageinit',function(event){
    d =  $(document)[0];
    s = "script";
    id = "twitter-wjs";

    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);   
    }
});

I changed the code provided by twitter the minimum that I could . Probably there is a better way to do the same.

For Facebook I think the same approach can be used.

Hope it helps who is facing the same problem.

Upvotes: 2

Rob Kent
Rob Kent

Reputation: 5203

I think that there are two solutions to this. The first is to turn off Ajax page transitions for the linked pages by adding 'data-ajax="false"' to the hyperlink. This may or may not be appropriate for you depending on whether you want to keep the same context on the back button - you normally do, so you could try the second solution.

This is the one that I use when I have multiple Like buttons on a page: when your page is created (hook into the JQMobile page create event), find all your fb like buttons and trigger the processing of them. I can't give you a full example, but something like this (note that I am assuming you are using the XFBML format '<fb:like... />'):

  1. Find all your fb Like elements using a jQuery selector.

  2. Trigger them using something like: 

    $('fb\\:like').each(function() { FB.XFBML.parse(this); });

That will cause them all to be expanded to full Like buttons.

Note that I have not tested the selector part of this but the XFBML.parse bit is what I am using and it works. I have not done the same for Twitter but would be interested to see the equivalent code.

It is safe to run this code multiple times because once it has been parsed, the fb:like element will no longer be present in the HTML.

Upvotes: 1

Mehul Hingu
Mehul Hingu

Reputation: 1240

Here is the solution, in the second page div create an iframe. And src of the iframe would be the page which displays the tweets and likes.

In this way you don't have to reload the js becoz the iframe will reload the code for likes and tweets.

I hope it will solve your problem.

Upvotes: 0

JohnP
JohnP

Reputation: 50039

Are you using the proper page standards? You'll need to load the scripts inside the data-role="page" element because that's what the JQM framework extracts from the AJAX request. 

<div data-role="page"> 
    <!-- Scripts here -->
</div>

docs - http://jquerymobile.com/test/docs/pages/page-anatomy.html

Upvotes: 2

Related Questions