Affichage popup dans le nouveau Facebook JavaScript SDK

Question

J'avais l'habitude d'avoir un href dans mon site Web. Lorsque les utilisateurs cliquaient dessus, un sélecteur multi-amis s'affichait pour inviter leurs amis sur mon site Web. Cela a été fait en utilisant le code suivant:

FB.ensureInit(function() { 
     var dialog = new FB.UI.FBMLPopupDialog('XXXXXXX', ''); 
     var fbml = 'Multi-Friend-Selector FBML' 
     dialog.setFBMLContent(fbml); 
     dialog.setContentWidth(620); 
     dialog.setContentHeight(570); 
     dialog.show(); 
    }); 

Maintenant, j'utilise le nouveau SDK JavaScript (http://connect.facebook.net/en_US/all.js), mais les anciennes méthodes ne sont pas présents ...
Comment puis-je faire avec la nouvelle SDK?

Answer 1

Oui, a finalement obtenu la boîte irritant pour redimensionner des 964 d'origine pixels:

Pour la compatibilité (nous espérons qu'elle se fixe à l'avenir, ou documenté mieux) Je dis encore

size:(width:600,height:500), 

mais je romps comme propriétés de l'objet parent largeur et la hauteur, donc dans l'utilisation finale:

size:(width:600,height:500),width:600,height:500, ... 

et maintenant, il est aussi redimensionnable avec e e La bibliothèque JavaScript de votre choix, c'est-à-dire, voici un exemple avec le redimensionnement jQuery:

FB.ui({ 
    method: 'fbml.dialog', 
    fbml: (
     '<div style="width:480px;border:1px black solid;">A small JavaScript library that allows you to harness ' + 
     'the power of Facebook, bringing the user\'s identity, ' + 
     'social graph and distribution power to your site.</div>' 
     ), 
    size: {width:640,height:480}, width:640, height:480 
}); 
$(".FB_UI_Dialog").css('width', $(window).width()*0.8); // 80% of window width 
// I'm also sure you could stack this call if you wanted to 

Answer 2

Eh bien, au bout de 2 jours (parce que je ne suis pas un expert JavaScript: P) de la lecture de l'open source JavaScript SDK Facebook, j'ai trouvé une méthode:

FB.ui({ 
      method : 'fbml.dialog', 
      fbml: '<fb:fbml>' + 
        '<fb:request-form action=......', 
     }); 

Il semble simple, oui je sais, mais maintenant le problème est quand j'envoie l'invitation, je reçois un nouvel onglet ouvert laissant le "dialogue" (en termes de Facebook, parce que popup signifie autre chose pour eux !!) ouvert!

Donc, je suis toujours en difficulté, mais je vais trouver la réponse!

Answer 3

Cela fonctionne pour moi ..

FB.ui({method:'fbml.dialog', fbml:'<fb:request-form action="URL" method="post" invite="true" type="TYPE" content="THIS IS THE MESSAGE <fb:req-choice url=\'URL\'label=\'Accept\' />" <fb:multi-friend-selector showborder="false" actiontext="REQUEST FORM TITLE" /> </fb:request-form>'})}); 

Remplacer les CAPS avec votre contenu.

Le seul problème que j'ai est que je n'arrive pas à comprendre comment redimensionner la boîte de dialogue pour s'adapter au contenu. Il reste à 964px. J'ai essayé plusieurs versions de

size:(width:600,height:500), 

Toutes les idées?

Answer 4

Je viens de le faire. FB.ui ({méthode: 'fbml.dialog', largeur: 500, hauteur: 300, FBML: ......

Answer 5

vous pouvez également ajouter l'affichage: 'dialogue' et il redimensionner correctement

Answer 6

Aucune des réponses précédentes ne fonctionnait pour moi. La solution que j'ai trouvé à faire ce qui suit:

var uiSize = FB.UIServer.Methods["fbml.dialog"].size; 
FB.UIServer.Methods["fbml.dialog"].size = {width:760, height:450}; 

FB.ui({ 
    method:'fbml.dialog', 
    display: 'popup',     
    fbml: message 
}, 
    function(response){ 
     FB.UIServer.Methods["fbml.dialog"].size = uiSize; 
    } 
); 

Answer 7

essayez ceci:

<script> 
    var uiSize = FB.UIServer.Methods["fbml.dialog"].size; 
FB.UIServer.Methods["fbml.dialog"].size = {width:999}; 

    var dialog = { 
    method: 'fbml.dialog', 
    display: 'dialog', 
    fbml: '<fb:request-form action="http://apps.facebook.com/xxxxx" method="post" target="_top" invite="true" type="Contest" content="Come and Join this contest!"> <fb:multi-friend-selector showborder="false" max="30" import_external_friends="false" email_invite="false" cols="5" actiontext="Invite your friends!" /></fb:request-form>', 
    }; 
    FB.ui(dialog,function(response) { 
     alert("fbDialogDismiss();"); 
    }); 
</script> 

Answer 8

Le code suivant fonctionne pour moi, mais s'il vous plaît noter les points suivants:

• La largeur et la height se réfère à la boîte de dialogue elle-même, SANS la bordure bleue épaisse "fanée".
• La largeur + hauteur apparaît dans le code suivant à 3 endroits.
• L'attribut COLS et ROWS correspond à la taille de l'exemple suivant - 625 x 515 pixels.
• Comme IE est nul, j'ai dû utiliser jQuery avec $ .browser pour forcer un POP-UP dans IE.

Hope this helps :)

function fb_invite_friends() { 
    FB.ui({method:'fbml.dialog', display:($.browser.msie ? 'popup' : 'dialog'), size:{width:625,height:515}, width:625, height:515, fbml:'<fb:request-form action="http://yoursite.com/" method="POST" invite="true" type="DayBox" content="Would you like to check out YOUR-SITE App too? <fb:req-choice url=\'http://apps.facebook.com/your-site/\' label=\'Yes\' />" <fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use DayBox" cols=5 rows=3 bypass="cancel" email_invite="true" import_external_friends="false" /> </fb:request-form>'}); 
} 

$(document).ready(function() { 

    /* Facebook */ 
    window.fbAsyncInit = function() { 
     FB.init({appId: fb_app_id, status: true, cookie: true, xfbml: true}); 
     if (facebook_canvas) { 
      FB.Canvas.setAutoResize(4000); // Will resize the iFrame every 4000ms 
     } 
     FB.Event.subscribe('edge.create', function(response) { 
      // The user clicked "LIKE", so we give him more coins! 
      $.get(href_url, {action:'log_likes'}); 
     }); 
     // FBML Dialog size fix 
     FB.UIServer.Methods["fbml.dialog"].size = {width:625, height:515}; 
    }; 
    (function() { 
     var e = document.createElement('script'); e.async = true; 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 

} 

Answer 9

Juste au cas où quelqu'un a besoin d'aide à la demande de candidature et invitation d'un ami Voici facebook documentation à ce sujet: http://developers.facebook.com/docs/reference/dialogs/requests/ et morceau de code que vous avez besoin est:

FB.ui({method: 'apprequests', message: 'A request especially for one person.', data: 'tracking information for the user'});