Facebook - application Facebook Connect pour augmenter les visites de son blog
Ajoutée dans Blog, Webmaster, le 12/03/09,
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
Vous avez aimé ce tutoriel ?
» Facebook - application Facebook Connect pour augmenter les visites de son blogPartagez-le sur :
Vous aimerez aussi ces autres tutos :
- Ajouter un moteur dans la barre de recherche de son navigateur
- Mettre video sur blog ou site web avec générateur html pour wmv, flv, divx
- Album photo en ligne : créer une galerie photos gratuite sur internet
- Personnaliser vos thèmes firefox à vos couleurs avec Personas
- Wikipedia Offline - Installer Wikipedia.fr sur iPhone ou iPod touch
A propos de l'auteur : jeanviet
Salut à tous, je m'appelle Jean-Baptiste, j'ai 30 ans et je suis le Webmaster de Jeanviet.info / votre guide web et multimédia gratuit et accessible à toute la famille ! Sur ce blog, je partage avec vous tous les sites web, logiciels, techniques qui permettent de personnaliser vos interfaces et supports multimédia : blog, photos, bureau, site, mobile,…
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.
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.
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,
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
Here is the FBML:
‘
label=’Check out this network!’ />
“>
”
max=”20″ />
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
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.
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
детали по
mail : ale61059832 @yandex.ru (адрес необходимо указать без пробелов).
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.
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
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
avez vous trouvez une solution ???
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.
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.
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
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+
de l’aide ???
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’,
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