Vous souhaitez déverrouiller comment construire un Fan Gate de base pour Facebook sans payer pour l'hébergement

Aimez-le ou détestez-le, tout le monde et leur chien sont sur Facebook de nos jours; donc, comme tout ce qui est populaire dans la vie, il a été complètement renversé par les types de marketing. Une utilisation incroyablement efficace d'une page de marque hébergée sur Facebook consiste à inciter les gens à aimer la page en créant du contenu secret réservé aux membres; communément appelé un “accès pour les fans”. Ceci est rempli de vidéos exclusives, de téléchargements ou peut-être d'un bon d'achat - nous en utilisons un ici à MakeUseOf pour donner à nos fans un accès facile à toutes les compétitions en cours.

Ce type d'application de base sur Facebook était relativement simple à créer par le passé, mais Facebook exige désormais que toutes les applications à onglet de page possèdent une version sécurisée - une HTTPS accès à l'URL - mais cela représente 100 $ de plus par an en plus des coûts d'hébergement existants pour votre site. Même si vous exploitez un petit magasin d’e-commerce, vous pouvez utiliser PayPal comme fournisseur de paiement et ne pas avoir besoin de certificats SSL. Ne vous inquiétez pas, Facebook étant également partenaire de Heroku, une société d'hébergement cloud, ce qui signifie que vous pouvez créer votre propre application Facebook de base et l'héberger gratuitement sur un serveur sécurisé. Veut en savoir plus? Continuez à lire pendant que je crée une application de base pour onglet de fan-gate sur Facebook, hébergée gratuitement, sur Heroku.

Inscrivez-vous en tant que développeur

Avant de créer des applications, vous devez être un développeur inscrit. Allez à developers.facebook.com pour commencer, puis cliquez sur le green registre bouton en haut à droite si pas déjà. Vous avez besoin d'un numéro de téléphone pour vous inscrire, mais sinon c'est gratuit.

Si vous êtes déjà inscrit, très bien - cliquez sur Applications dans la barre d'outils supérieure pour obtenir un aperçu de vos applications actuelles..

Créer une nouvelle application

Voici où commence le plaisir. Cliquer sur Créer une nouvelle application. La dénomination importe peu, mais choisissez évidemment quelque chose de pertinent. Le champ d'espace de nom sera ajouté à l'URL de votre page de fans lorsque l'utilisateur clique sur cet onglet; vous pouvez laisser le champ vide, mais ils verront alors l'identifiant de l'application dans l'URL, ce qui est un peu plus laid. L'espace de nom doit également être unique, alors ne vous inquiétez même pas avec quelque chose comme “testapp” ou vous aurez une erreur. Enfin, cochez la case indiquant que vous souhaitez un hébergement gratuit à partir de Heroku..

Après avoir rempli le captcha, vous serez invité à choisir le type d'hébergement que vous souhaitez chez Heroku - sélectionnez PHP et acceptez. Facebook créera automatiquement un nouveau compte pour vous chez Heroku si vous n'en avez pas déjà et pré-remplira les paramètres d'URL dans vos bases, ce qui est très agréable. En fait, il est très difficile de gâcher cette avancée.

À partir de la page de détails de l’application, vous souhaitez également définir le type d’application comme étant une application. “Onglet de page”, et assurez-vous que les URL pertinentes y sont entrées - là encore, cela devrait être automatique. Puis enregistrez.

Heroku Premiers Pas

Une fois terminé, vous recevrez un e-mail de Heroku indiquant comment changer votre mot de passe et vous pourrez télécharger le logiciel Heroku. “ceinture à outils” pour votre système. Pour ceux d'entre vous qui ne connaissent pas Heroku, ce n'est pas un hôte traditionnel dans le sens où vous pouvez vous connecter à une adresse FTP et télécharger des fichiers; Au lieu de cela, Heroku fonctionne avec Git, un système de contrôle de version. Une fois que vous avez installé la toolbelt, vous devez d'abord cloner le site sur votre disque local. Cela vous donne un répertoire qui est un miroir de ce qui est hébergé sur Heroku. Chaque fois que vous modifiez ces fichiers, vous les synchronisez tous pour mettre à jour Heroku..

Les instructions pour effectuer cette première synchronisation sont contenues dans votre courrier électronique de bienvenue. Il s’agit d’une simple commande d’une ligne unique à votre adresse d’hébergement - il suffit de copier-coller depuis le courrier électronique. Votre URL d'hébergement est complètement arbitraire - dans mon cas c'était bois sec-7743 - il est généré aléatoirement et n'a pas d'importance du tout car les utilisateurs ne le verront pas. Ouvrez le répertoire que vous venez de créer et regardez autour de vous..

Heroku a mis en place beaucoup de fonctionnalités, mais nous n’en avons pas besoin en grande partie. S'ouvrir index.php et regardez autour de vous. Recherchez les lignes suivantes près du début du fichier:

$ facebook = new Facebook (array ('appId' => AppInfo :: appID (), 'secret' => AppInfo :: appSecret (), 'sharedSession' => true, 'trustForwarded' => true,));

et immédiatement après, copiez-les:

$ signed_request = $ facebook-> getSignedRequest (); $ likes = $ signed_request ["page"] ["aimés"];

Ne vous inquiétez pas si ceci est trop compliqué pour vous - je vous donnerai un modèle fini bientôt. Une requête signée est envoyée à votre application à partir de Facebook. Elle contient des informations sur l'utilisateur, qu'il ait ou non un accès administrateur, qu'il ait aimé la page ou non. Si vous voulez savoir précisément ce qui est envoyé, ajoutez ce qui suit:

print_r ($ signed_request);

et vous obtiendrez une impression complète de l'objet de demande signé.

À ce stade, je dois admettre que j’ai vraiment du mal à faire fonctionner la demande signée - il est apparu que Heroku effaçait les données au chargement de la page, et ce n’est qu’après le chargement de l’API JS (10 bonnes secondes après le chargement initial de la page). ) que la page s'actualiserait et indiquerait le bon “aimé” statut. Grâce à cette question Stack Overflow, la solution semblait supprimer le code qui applique HTTPS aux utilisateurs non sécurisés. Supprimez le bloc de code suivant au début du modèle:

// Appliquer https sur la production if (substr (AppInfo :: getUrl (), 0, 8)! = 'Https: //' && $ _SERVER ['REMOTE_ADDR']! = '127.0.0.1') header ('Location : https: // '. $ _SERVER [' HTTP_HOST ']. $ _SERVER [' REQUEST_URI ']); sortie(); 

Maintenant, lorsque la page est chargée, vous avez une variable booléenne - c'est un vrai ou un faux - qui vous indique si l'utilisateur a aimé la page ou non. Vous pouvez utiliser cela avec un simple si déclaration pour montrer soit le contenu une ou b:

Placez que juste après l'ouverture faire index.php. Maintenant, si vous avez prévisualisé votre page sur Heroku, vous remarquerez que celle-ci comporte de nombreuses fonctionnalités supplémentaires: afficher les pages que vous avez aimées, des boutons pour publier des mises à jour, etc. - nous n'avons pas vraiment besoin de cela. Nous avons tout effacé, y compris le SDK JavaScript pour Facebook, ne laissant que le CSS et notre portail. Voici le code épuré que j'ai fini par utiliser (ceci est une image - copier coller de PasteBin si vous le souhaitez):

Vous devriez éditer les sections qui disent “pas un fan” et “ventilateur” pour contenir votre contenu par défaut et secret. Si vous préférez conserver votre contenu dans un fichier séparé, utilisez:

include ("secret.html");

importer des fichiers externes.

Sync avec Heroku

Une fois que vous avez apporté toutes les modifications nécessaires à votre fichier, vous devez synchroniser la sauvegarde avec Heroku - nous le faisons par “poussant” notre copie locale au “branche maîtresse” à Heroku. En vous assurant que vous êtes dans le bon répertoire depuis la ligne de commande, tapez:

git commit -am "change les messages"

(vous pouvez remplacer le message de modifications par une note personnelle des modifications que vous avez réellement apportées cette fois-ci - il est recommandé de conserver ces enregistrements)

et alors

git push maître heroku

Attendez que la commande se termine, car cela peut prendre un certain temps.

Dernière étape: ajouter l'application à votre page

Maintenant que l'application est construite, nous devons l'ajouter en tant qu'onglet sur la page de votre marque. Curieusement, cela se fait en utilisant une URL spécialement conçue:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_APP_URL_ON_HEROKU

Remplacer VOTRE_APP_ID avec l'ID indiqué sur les détails de votre application, et YOUR_APP_URL_ON_HEROKU avec l'URL de votre hébergement Heroku. Le chargement de cette URL spéciale lancera alors le “ajouter à votre page” dialogue, à partir duquel vous pouvez sélectionner la bonne page de marque pour ajouter votre onglet de page à.

Alors hop, ça va être un nouveau bouton sur votre page, comme ceci:

Comme vous pouvez le constater, nous n’avons pas encore spécifié d’image pour l’onglet, elle est donc laissée par défaut. Vous pouvez le faire à partir de la page de détails de votre application. C'est fondamentalement cela cependant; si vous chargez cet onglet, mon remplaçant index.php soit vous montrer comme ventilateur ou un pas fan. Ou ce que vous avez personnalisé pour le montrer:

J'admets que ce processus a été plus difficile que prévu, mais il évite complètement de devoir héberger quoi que ce soit sur votre propre serveur ou d'obtenir la certification SSL. Si vous avez des questions ou des problèmes, posez-les dans les commentaires et j'essaierai de vous aider. Si les commentaires sont fermés, rendez-vous sur notre site Réponses; et s'il vous plaît, si vous avez trouvé ce tutoriel utile, partagez-le sur votre réseau social préféré. En outre, vous voudrez probablement consulter notre guide complet et gratuit sur le marketing des médias sociaux, et envisager d'ajouter également Pinterest à votre stratégie..

En savoir plus sur: Développement d'applications, Facebook.