Astuces et Tutoriaux gratuits Web, PC, Mobile

accueil astuces
 » 42 janusiens en ligne| Vous êtes ici : Les Astuces de Jeanviet - Facebook - application Facebook Connect pour augmenter les visites de son blog 

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

Ajoutée dans Blog, Webmaster, le 12/03/09 , cet article a été consulté 304937 fois.

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

 

copie-colle dans ton blog:


Partager sur Facebook

4 Votes | Average: 3.5 out of 54 Votes | Average: 3.5 out of 54 Votes | Average: 3.5 out of 54 Votes | Average: 3.5 out of 54 Votes | Average: 3.5 out of 5 (4 votes, moyenne: 3.5 sur 5)
Loading ... Loading ...


Dans le même genre

25 commentaires pour “Facebook - application Facebook Connect pour augmenter les visites de son blog”

  1. cavo789 BELGIUM a dit :
  2. 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.



  3. ayoub FRANCE a dit :
  4. 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.



  5. VzuV FRANCE a dit :
  6. 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,



  7. VzuV FRANCE a dit :
  8. 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



  9. VzuV FRANCE a dit :
  10. not condensed. permet de monter le nombre d’invitation à X



  11. VzuV FRANCE a dit :
  12. 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″ />



  13. IxeX FRANCE a dit :
  14. 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



  15. jeanviet FRANCE a dit :
  16. 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.



  17. IxeX FRANCE a dit :
  18. Merci de cette réponse rapide. Je reste suspendu à ce post, si je puis dire ^^



  19. bgs76 FRANCE a dit :
  20. cc sava? jai besoin de com merci



  21. ghanou FRANCE a dit :
  22. 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



  23. taibh71 a dit :
  24. 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



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



  27. Thierry C. FRANCE a dit :
  28. 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.



  29. Spaceshipone FRANCE a dit :
  30. 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 ;)



  31. sonny FRANCE a dit :
  32. 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



  33. kiamaru FRANCE a dit :
  34. idem comme sonny



  35. vincent27b FRANCE a dit :
  36. 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



  37. vincent27b FRANCE a dit :
  38. 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 ???



  39. Fredd FRANCE a dit :
  40. 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.



    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.



  41. GSL FRANCE a dit :
  42. Merci pour toutes ses informations.



  43. GegeOff FRANCE a dit :
  44. 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



  45. Adam FRANCE a dit :
  46. 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+



Laisser un commentaire


 
 
 

  

  







© Jean-Baptiste Viet: Chef de Projet Internet, Webmaster de Jeanviet.info, Créateur de Tuto Video, et Ancien Etudiant à Paris 1 Sorbonne | Design : Emilie Boudet