Facebook – application Facebook Connect pour augmenter les visites de son blog

application facebook
Facebook est devenu en l’espace de quelques mois en France le plus gros réseau social en ligne : 7,8 millions de membres (soit près d’un internaute français sur 4). Aujourd’hui je vais vous dévoiler une astuce qui va vous permettre d‘inviter les amis facebook de vos visiteurs à se rendre sur votre blog !
Facebook Connect
Pour cela, vous devrez créer une application Facebook que vous mettrez sur votre site web et qui communiquera avec l’ensemble du réseau Facebook grâce au système Facebook Connect (en place depuis fin 2008), ça promet !

Au sommaire de ce tuto:

  1. Fonctionnement de l’application Facebook Connect
  2. Créer une application Facebook
  3. Personnaliser l’application pour votre site
  4. 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.

application facebook

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

créer une application facebook

Donnez un nom à votre application -> J’accepte -> Enregistrer les modifications

Nom application

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

URL de rappel

Copiez-collez votre clé api, on va bientôt la réutiliser.

Clé api facebook

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

facebook.zip

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:

renseignez votre api

Après:

api renseigné

Puis les paramètres de votre site

texte facebook connect

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

 


advertising


29 commentaires à propos de “Facebook – application Facebook Connect pour augmenter les visites de son blog

  1. 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.

  2. 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.

  3. 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,

  4. 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

  5. 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″ />

  6. 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

  7. 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.

  8. 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

  9. 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

  10. Вашему сайту нужна раскрутка? Готов стать SEO оптимизатором
    детали по
    mail : ale61059832 @yandex.ru (адрес необходимо указать без пробелов).

  11. 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.

  12. 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

  13. 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

  14. 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 ???

  15. 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.

  16. 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.

  17. 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.

  18. 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

  19. 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+

  20. 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 ???

  21. 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’,

  22. 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>