Au sommaire de ce tuto:
- Fonctionnement de l’application Facebook Connect
- Créer une application Facebook
- Personnaliser l’application pour votre site
- Ajouter l’application sur votre site
1/ Fonctionnement de l’application Facebook Connect
Facebook connect permet de connecter la communauté Facebook à votre site web… Les usages sont multiples : authentification, publication, cooptation,… Ici je vous propose de créer un bouton qui permettra à vos visiteurs d’inviter leurs amis Facebook à se rendre sur votre site.
Avant de vous lancer dans le tuto, si vous êtes membre du réseau facebook, je vous invite à tester l’application sur mon site auprès de vos amis. cliquez sur ce bouton facebook et laissez vous guider.
Pas encore sur Facebook ? Regardez cette video pour tout comprendre
Avant d’aller plus loin, je pars du principe que vous possédez un hébergement web avec un accès ftp, et que vous êtes familier avec l’envoi de fichier sur site web via ftp.
2/ Créer une application Facebook
Nous allons maintenant créer une application facebook sur les pages développeurs de facebook.
Logguez vous à votre compte facebook ici:
http://www.facebook.com/login.php
Rendez vous ensuite ici:
http://www.facebook.com/developers/
Cliquez ensuite sur Créer une application
Donnez un nom à votre application -> J’accepte -> Enregistrer les modifications
Ajouter votre url, un descriptif, une icône, un logo et enregistrer les modifications, vous pourrez ensuite récupérer votre clé api à l’écran suivant
Copiez-collez votre clé api, on va bientôt la réutiliser.
3/ Personnaliser l’application pour votre site
Téléchargez ce fichier zip, il contient tous les éléments que vous devrez ajouter à votre blog site / web après personnalisation
Décompressez le zip dans un répertoire facebook, et ouvrez avec notepad le fichier invite-tes-amis.htm
En bas de page, renseignez votre clé api dans la zone prévu à cet effet (cherchez FB.init):, avant:
Après:
Puis les paramètres de votre site
4/ Ajouter l’application sur votre site
Ajouter dans un même répertoire facebook sur votre site ces 3 fichiers issus du zip:
- invite-tes-amis.htm (modifié)
- xd_receiver.htm
- application-facebook.jpg
Ajoutez ce code dans une page de votre site (remplacez monsite.com par votre domaine.tld):
<br><br><a href="http://astuces.jeanviet.info/blog/facebook-application-facebook-connect-pour-augmenter-les-visites-de-son-blog.htm" onclick="window.open('http://monsite.com/facebook/invite-tes-amis.htm', 'invite tes amis', 'height=768, width=1024, top=0, left=5, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); return false;">
<img src="http://monsite.com/facebook/application-facebook.jpg" alt="application facebook" border="0"></a><br><br>
Envoyez la page modfiée sur votre site via ftp et chargez-la.
En cliquant sur le bouton facebook, on peut maintenant inviter ses amis !
Un exemple d’intégration ici:
http://www.sorbonne-post-scriptum.com
Pour plus d’infos sur les possibilités de Facebook Connect:
http://wiki.developers.facebook.com/index.php/Facebook_Connect
Bonjour et merci pour cette astuce.
Savez-vous comment je peux afficher la liste des derniers visiteurs sur mon site ? J’ai vu plusieurs blogs qui le permettent mais tous semblent être des blogs wordpress alors que j’aimerais le faire sur mon site Joomla! et donc avec un peu de code soit PHP soit HTML.
Merci.
Bonjour,
Tout d’abord merci toute l’explication, et deuxièmement je voulais savoir si cela était possible de débloquer la limitation d’invitation à mes amis qui est seulement de 4.
Merci d’avance.
Bonjour,
Merci beaucoup pour le tuto, cela m’a aidé à connaître facebook connect mais je souhaite une suite de votre tuto pour débrider la limitation d’invitation à 4 amis seulement.
Cordialement,
Remarque : Dans le code php et dans l’exemple, il y a une erreur de fermeture de balise.
Voir le code suivant :
content= »Jeanviet.info – Guide Web et Multimedia : Personnaliser Blog, Facebook, MSN, Tutos PC, Sites Amusants, Logiciels a Telecharger
« > (noté la fermeture)
Cela bloquer le bouton visiter ou ignorer dans le bouton l’invitation.
Pour le nombre d’invitation à 4 il faudra utiliser :
Fb:multi-friend-selector : not condensed. http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector
not condensed. permet de monter le nombre d’invitation à X
This is a new snippet on how to delimite friend invited number to 20 AMIS.
Here is the FBML:
‘
label=’Check out this network!’ />
« >
»
max= »20″ />
Bonjour et merci pour ce tuto très instructif.
Je reviens sur la question d' »ayoub » concernant la limitation d’envoi à 4. J’ai essayer de suivre les instruction du post de « VzuV » relatif au « multi-friend-selector » mais rien n’y fait, ma limitation est toujours bloquée à 4
J’ai visité le lien : http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector mais pas tout compris (j’avoue) :/
Pouvez-vous m’orienter ? merci d’avance et bonne continuation
Hello,
Il faut que je me replonge dans le code… effectivement, ils bloquent à 4 invits maintenant.
je vais tester la soluce de VzuV et reviens vers vous avec une code qui en tient compte.
Merci de cette réponse rapide. Je reste suspendu à ce post, si je puis dire ^^
cc sava? jai besoin de com merci
Bonjour,
en fait je voudrais créer une application facebook. J’ai créé une application en php5 et je voudrais l’héberger sur un hébergeur gratuit qu’il soit compatible avec facebook, svp est ce que vous pouviez me dire quelle hébergeur gratuit je peu utiliser?
merci d’avance pour votre réponse
bonjour, je voudrais savoir si c’est possible d’afficher sur mon site web des annonces de facebook càd dans un coin de mon site avoir les articles publiés sur racebook concernat un sujet que je définie comme le cas de jtwitter et merci
Вашему сайту нужна раскрутка? Готов стать SEO оптимизатором
детали по
mail : ale61059832 @yandex.ru (адрес необходимо указать без пробелов).
Bonjour,
Quelqu’un a-t-il trouvé la solution pour le nombre max d’amis à inviter ? J’ai essayé d’ajouter l’attribut max mais il ne semble pas être pris en compte.
En revanche, j’ai corrigé de mon côté la largeur de l’affichage de 700px à 800px, et cela permet d’afficher le bouton ignorer en entier.
Merci de votre aide sur ce sujet.
Cordialement
Thierry C.
Bonjour,
Le code du bouton « invite tes amis » ne marche pas sous Internet Explorer. Si quelqu’un trouve les modifications à faire pour que ça marche sous IE, faites moi signe. Sinon merci pour le tuto
Bonjour,
Voila j’ai un soucis après avoir effecuer les manipulation, j’ai bien modifier le fichier « invite-tes-amis » et j ai uplauder tout sa sur mon ftp, sur mon site le logo s’affiche mais quand je clic la fenêtre s’ouvre bien mais au moment de cliquer sur » connect » il m’ouvre une petite fenetre avec dedans :
En construction
wanted-love est en cours de construction.
Note pour les développeurs d’applications :
To fix this error, please set your Connect URL in the éditeur des paramètres d’applications. Once it has been set, users will be redirected to that URL instead of this page after logging in.
au lieu de » conection etc.. »
Quelqu’un a une idée svp ? c ‘est urgent merci
idem comme sonny
la page invite-tes-amis.htm ne fonctionne pas sous IE elle s’affiche toute blanche avez vous une explication ?? alors que sous firefox ça marche nikel en popup
De plus l’appli est bridé à 3 envoi par jours comment changer ça j’ai essayé pleins de truc … mais ça ne marche pas ?
avez vous trouvez une solution ???
Pour le max d’invitation amis, vous ne pouvez rien faire, il faut patientez que votre application soit utilisé par un certains nombre de membre de facebook pour voir la valeur augmenter.
peintures suspendues, éventail en bois de santal pyrogravé, bijoux fantaisie en jade, bijoux fantaisie en agate, bijoux fantaisie en nacre, yukata (robes de chambres) en satin et les objet frabrique en bois
AsieShop.com est un magasin en ligne vendant des produits d importation en provenance d Asie. Nous vendons de magnifiques Peinture suspendues asiatiques en bambou et Éventails en bois de santal pyrogravés à la main. Pour les peintures suspendues, la plupart de nos produits sont des modèles uniques. Certains se ressemblent mais des différences existent entre chaque modèles. Nous proposons également les produits suivants : Bijoux en jade Bijoux en agate Bijoux fantaisie. Kimonos chinois (robe de chambres) en satin. Nous acceptons les cartes bancaire et les virements PayPal. PayPal sécurise toutes les transactions financières effectués sur notre site, ce qui vous garantis la sécurité de vos données bancaires. Nous livrons sur la France Métropolitaine et en Corse grâce au service coliposte de La Poste.
http://www.asieshop.com
peintures suspendues, éventail en bois de santal pyrogravé, bijoux fantaisie en jade, bijoux fantaisie en agate, bijoux fantaisie en nacre, yukata (robes de chambres) en satin et les objet frabrique en bois
AsieShop.com est un magasin en ligne vendant des produits d importation en provenance d Asie. Nous vendons de magnifiques Peinture suspendues asiatiques en bambou et Éventails en bois de santal pyrogravés à la main. Pour les peintures suspendues, la plupart de nos produits sont des modèles uniques. Certains se ressemblent mais des différences existent entre chaque modèles. Nous proposons également les produits suivants : Bijoux en jade Bijoux en agate Bijoux fantaisie. Kimonos chinois (robe de chambres) en satin. Nous acceptons les cartes bancaire et les virements PayPal. PayPal sécurise toutes les transactions financières effectués sur notre site, ce qui vous garantis la sécurité de vos données bancaires. Nous livrons sur la France Métropolitaine et en Corse grâce au service coliposte de La Poste.
Merci pour toutes ses informations.
Bonsoir,
Le lien de téléchargement de « facebook.zip » semble être corrompu, malgré que j’ai réussis à le téléchargé, l’archive semble être elle aussi corrompue.
Quelqu’un peut-il mettre un lien valide de cette archive SVP ?
Cordialement,
GegeOff
Bonjour,
merci pour ce tutoriel, tout fonctionne bien, par contre j’ai un problème chaque fois ou je clique le bouton ‘send invitation »
voilà le message d’erreur:
Application temporarily unavailable
Runtime errors:
IntlFbtString Object
(
[func:protected] => fbt_unwrapped
[func_args:protected] => Array
(
[0] => req-choice required as part of request-form content
)
[text:protected] => req-choice required as part of request-form content
[attributes:protected] => Array
(
)
[munge:protected] => 1
[need_force_raw:protected] =>
[locale:protected] => en_GB
[ret_array:protected] =>
)
merci pour tout aides!!!!
A+
Salut j’aimerais mettre cette appli dans dialog box jquery mais ça m’affiche un carré blanc (pas d’erreur sur Firefox mais erreur js sur IE ) quelqu’un aurait-il déjà fait cela?
de l’aide ???
C’est normal que facebook me demander ma carte de crédit et mon téléphone ?
attention, bug sous IE. Pour que la popup s’ouvre sous IE, remplacer dans le fichier liste_exterieure_off.php, « invite tes amis » par « _blank »
onclick= »window.open(‘http://mondomaine/facebook/invite-tes-amis.htm’, ‘invite tes amis’,
par
onclick= »window.open(‘http://mondomaine/facebook/invite-tes-amis.htm’, ‘_blank’,
Bonjour,
J’affiche cette boite un une apps iframe limité à 520 px de largeur mais je n’arrive pas à diminuer la taille de cette fenêtre. J’ai bien modifié la ligne suivante mais rien n’y fait :
par avance merci pour votre aide