28172 sujets

CSS et mise en forme, CSS3

Modifier le placement d'une bulle de commentaire (FaceBook)

Bonjour à toutes et tous Smiley smile

Je mets en place le bouton j'aime de facebook sur mon site.
Ce bouton est situé dans mon footer qui lui même est en position:fixed;
Lorsque l'on clique sur le bouton j'aime, une bulle apparaît nous permettant de commenter notre "j'aime" avant la publication sur le profil FB. Le souci c'est que cette bulle de commentaire apparaît en bas du bouton et donc inaccessible.
Y a-t-il un moyen de faire en sorte que cette bulle apparaisse en haut du bouton ?

Merci beaucoup pour votre aide.
Ce n'est malheureusement pas possible.

Voici ce que Facebook propose de faire pour contrer ce problème:

a écrit :

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.


Ce qu'ils disent en résumé: si ça ne fonctionne pas, modifie ta page pour que la bulle apparaisse.

ref: https://developers.facebook.com/docs/reference/plugins/like/
Je viens de trouver un truc assez intéressant et qui marche Smiley smile 

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
    top: -150px !important;
}


du coup j'ai bien mon popup (flyout) qui vient se placer en haut ! (après à vous de jouer avec le top, left, reight, bottom pour placer le popup où il vous plait)...
Reste plus qu'à trouver un moyen de replacer le petit "/\" qui est situé en haut de la bulle. il faudrait que je le place en bas pour être plus logique... mais bon "that does the trick !" Smiley smile
Modifié par Pooley (22 Feb 2012 - 13:20)
Tu intègre ton bouton like en xfbml ?

Sinon, pour la méthode d'intégration utilisant html5, j'ai remarqué aujourd'hui que désormais la boite semblait se placer à droite ou à gauche selon l'espace disponible entre le bouton et la fenêtre du navigateur (ou iframe). Ce doit être une nouvelle mise à jour.
Salut Simon !

Je l'ai intégré en HTML5, le souci n'est pas gauche ou droite mais plutôt haut ou bas. J'ai tenté un truc mais qui ne semble pas marcher, est-ce que tu saurais me dire pourquoi.

Dans l'idée je souhaite agir sur le flyout qui apparaît une fois que tu cliques sur "j'aime".

Dans le Javascript SDK que tu colles juste après ton <body>

<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/fr_FR/all.js#xfbml=1";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>


Il y a bien le js.src="", du coup :
- je me suis rendu à cette adresse,
- j'ai copié le js pour le mettre en interne (dans un fichier face_de_book.js par exemple) que j'appellerai à la place de ce "//connect.facebook.net...."

Mais ça ne semble pas fonctionner. Le bouton ne s'affiche pas.
Est-ce que cette méthode (de gérer le js en interne) peut fonctionner pour agir plus facilement sur le css ?
(Ce qui résoudrait mon histoire de "/\" sur le haut de la bulle car je pourrai spécifier un autre background:url et un top:xxpx différent)...
Modifié par Pooley (22 Feb 2012 - 13:24)
Sujet clos
Aller à