2012-02-15 6 views
9

J'essaye juste de charger la page de partageur de facebook dans un iframe qui est dans un div positionné sans succès.Charger Facebook Sharer dans iFrame

Voici le code que je utilise pour le iframe,

<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"></iframe> 

Quand je regarde la page de son vide et la source iFrame est

<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"> 
<html> 
<body></body> 
</html> 
</iframe> 

Si je considère l'URL directement, tout apparaît correctement.

Est-ce que le bloc facebook charge le partageur dans un iFrame? et quelles sont mes alternatives pour que le partageur facebook apparaisse dans une fenêtre modale?

Merci

+0

Vous ne devriez pas utiliser une fonction obsolète dans un nouveau développement. Ce n'est pas pris en charge et sera retiré de nous à tout moment. S'il vous plaît voir: https://developers.facebook.com/docs/share/ pour plus d'informations sur ce que vous devriez faire. – DMCS

Répondre

7

Oui, Facebook bloque à peu près tous les écrans de chargement de l'intérieur de iFrames. Si vous utilisez Facebook Connect, il existe quelques méthodes javascript simples que vous pouvez exécuter pour obtenir une boîte de dialogue sur votre page, et pour démarrer Facebook prendra soin de beaucoup du travail qu'il faut pour rendre l'écran agréable.

Voir ce lien (http://developers.facebook.com/docs/reference/javascript/FB.ui/) ou utiliser le code ci-dessous:

FB.ui(
    { 
    method: 'feed', 
    name: 'Facebook Dialogs', 
    link: 'http://developers.facebook.com/docs/reference/dialogs/', 
    picture: 'http://fbrell.com/f8.jpg', 
    caption: 'Reference Documentation', 
    description: 'Dialogs provide a simple, consistent interface for applications to interface with users.' 
    }, 
    function(response) { 
    if (response && response.post_id) { 
     alert('Post was published.'); 
    } else { 
     alert('Post was not published.'); 
    } 
    } 
); 

Si vous ne l'utilisez Facebook alors vraiment votre seule option pour obtenir cet écran exact est de jeter un pop-up.

Une autre option serait d'utiliser le plugin like/send button, ce n'est pas tout à fait la même fonctionnalité mais plus facile à intégrer. http://developers.facebook.com/docs/plugins/

À la votre!

+3

F @ # $ facebook, twitter, liens, pinterest et tout le reste qui veulent espionner vos utilisateurs et faire ralentir vos pages. Aucun d'entre eux ne permet de charger son contenu seulement si l'utilisateur veut utiliser le service. Je voulais que ça soit joli dans un iFrame mais ils ne le permettent pas. Google Plus est le seul qui autorise un iframe. – pathfinder

+0

@pathfinder: Oui, fait des recherches aussi et charge la corbeille des médias sociaux seulement lorsque l'utilisateur clique dessus. Sur ce site http://meezingeninrotterdam.nl (dont l'événement est fermé maintenant) vous pouvez voir comment je l'ai fait. Cliquez sur l'icône facebook par exemple, il vous sera demandé de confirmer les cookies tiers. Après cela, le plugin addthis sera chargé si vous décidez de continuer. Cette méthode permet à l'utilisateur d'économiser beaucoup de trafic et les utilisateurs ne peuvent être suivis que lorsque vous avez accepté la boîte de dialogue des cookies tiers. Cette méthode vous évite également d'ajouter une bannière de politique de cookie POUR TOUS les utilisateurs sur la page. – Codebeat

0
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 

La ligne ci-dessus dans la tête.

<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function() { 
FB.init({ 
appId : '', 
status : true, // check login status 
cookie : true, // enable cookies to allow the server to access the session 
xfbml : true // parse XFBML 
}); 
}; 

(function() { 
var e = document.createElement('script'); 
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
e.async = true; 
document.getElementById('fb-root').appendChild(e); 
}()); 

</script> 

<script> 
$(document).ready(function(){ 
$('#share_button').live('click', function(e){ 
e.preventDefault(); 
FB.ui(
{ 

method: 'feed', 
name: '', 
link: '', 
picture: '', 
caption: '', 
description: '', 
message: '' 
}); 
}); 
}); 
</script>