Faites votre propre Tweet / J'aime / + 1 pour déverrouiller le système avec jQuery

Devenir viral signifiait autrefois une épidémie, mais c'est maintenant quelque chose que tous les créateurs de contenu recherchent. Vous pourrait comptez uniquement sur la qualité de votre contenu - s'il est assez bon, les gens le partageront, non?? Peut être. Mais vous pouvez aussi améliorer un peu les choses en offrant quelque chose d’extraordinaire à ceux qui partagent - un coupon, un téléchargement, un autocollant de visage souriant par la poste ou une image de stock d’un chaton mignon. Aujourd'hui, je vais vous montrer comment créer votre propre comme / tweet / + 1 pour déverrouiller le système avec un peu de jQuery et les API natives.

Cette méthode s’adresse aux personnes disposant de leur propre site Web et qui souhaitent utiliser le mécanisme de déverrouillage. Si vous souhaitez le faire sur votre page Facebook, consultez le didacticiel de base de la fan gate de Facebook: «Comment débloquer: comment construire une fan gate de base pour Facebook sans payer pour l'hébergement? Comme pour déverrouiller: comment créer une fan gate de base pour Facebook sans payer Hébergement 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é "porte de ventilateur". Facebook s'est également associé… Lire la suite peut être plus utile.

Comment ça marche

Nous allons charger un ensemble de boutons des différents réseaux et les associer à leurs événements ou rappels respectifs pour indiquer que quelque chose a été partagé. UNE rappeler est une fonction qui s'exécute quand quelque chose d'autre est fini, généralement passée en paramètre à une autre fonction. Lors de l'utilisation de jQuery AJAX, par exemple, un rappel de réussite est exécuté lorsque la requête AJAX a abouti. Il effectue une opération avec les données renvoyées, telle que l'accusé de réception des données de formulaire. Nous allons également utiliser événements - qui sont un peu plus complexes, mais sortent du cadre de ce tutoriel. Nous déclencherons ensuite notre propre événement, qui contient le code permettant de révéler une ou plusieurs parties secrètes de la page. Pour notre propos, masquer un peu de contenu et le révéler devrait suffire, mais vous pouvez le régler pour qu'il soit un peu plus sécurisé que les chargements via AJAX ou similaire..

Exigences:

• jQuery devrait déjà être inclus et chargé dans l'en-tête de votre page. Je ne vais pas couvrir cela aujourd'hui.
• Vous devez savoir comment inclure du Javascript sur la page, que ce soit par le biais de balises de script intégrées ou dans un fichier .JS séparé lié à l'en-tête..

Boutons de partage de base

Commençons par charger un ensemble de base de boutons de partage sur la page. Cela comporte deux parties: premièrement, charger le JS pour les boutons (nous utilisons une version asynchrone de ceux-ci pour éviter de bloquer le chargement de la page). Voici les codes des trois réseaux - vous n'avez pas besoin de les séparer en petits extraits, ils peuvent tous être regroupés dans un seul fichier JS..

 / * Facebook * / (fonction (d, s, id) var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) return; js = d.createElement (s ); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore (js, fjs); (document, "script", "facebook- jssdk ')); window.fbAsyncInit = function () // initialiser le FB JB SDK FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (fonction (d, s, id) var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) return; js = d .createElement (s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); retourner la fenêtre.twttr || t = _e: [], prêt: fonction (f) t._e.push (f)); (document, "script", "twitter-wjs")); / * Google Plus * / / (fonction () var po = document.createElement ('script'); po.type = 'text / javascript'; po.async = true; po.src = 'https: //apis. google.com/js/plusone.js '; var s = document.getElementsByTagName (' script ') [0]; s.parentNode.insertBefore (po, s);) ();

Ensuite, placez-les où vous souhaitez que les boutons apparaissent:

N'oubliez pas de modifier l'attribut data-via en votre propre utilisateur Twitter. Notez également la présence d’un paramètre de rappel sur le bouton plusOne - il n’y a pas d’événement auquel s’attacher ici, mais seulement un rappel lorsque vous cliquez sur le bouton..

Enfin, créez une nouvelle définition de classe CSS pour “.caché“, et mettre le affichage: aucun propriété pour cela. Tout ce que vous voulez cacher jusqu'à ce que vous le partagiez devrait aller ici.

Assurez-vous que vos boutons se chargent à ce stade.

Attacher pour partager des événements

Voici la vraie magie. Commençons par Facebook. Après le FB.init fonction, utilisation FB.Event.subscribe comme suit:

 FB.Event.subscribe ('edge.create', fonction (href, widget) $ .event.trigger (type: "pageShared", url: href););

Ici, nous demandons d'écouter le edge.create événement (déclenché lorsqu'un utilisateur aime la page). Nous déclenchons ensuite notre propre événement jQuery que j'ai appelé pageShared, et en passant la valeur href en tant qu'URL partagée. Nous vérifierons cela plus tard. Votre code de bouton Facebook complet devrait maintenant ressembler à:

 window.fbAsyncInit = function () // initialiser le FB JB SDK FB.init (status: true, xfbml: true); FB.Event.subscribe ('edge.create', fonction (href, widget) $ .event.trigger (type: "pageShared", url: href);); ;

Ensuite, Twitter. twttr.events.bind est utilisé ici (vous pouvez également joindre à un événement suiveur si vous le souhaitez), mais il est important de vous rappeler que tous ces éléments doivent être placés dans le twttr.ready rappeler. De nouveau, nous déclenchons le même événement pageShared jQuery, en transmettant la bonne variable pour représenter l’URL partagée..

 twttr.ready (fonction (twttr) twttr.events.bind ('tweet', fonction (événement) $ .event.trigger (type: "pageShared", url: événement.target.baseURI);); );

Enfin, Google Plus. Rappelez-vous plus tôt que j'ai expliqué qu'il n'y a pas d'événements pour plusOne, nous avons donc spécifié une fonction de rappel. Créons maintenant cette fonction et déclenchons l'événement pageShared à partir de là..

 fonction plusOned (obj) $ .event.trigger (type: "pageShared", url: obj.href); 

Montre moi l'argent

Enfin, nous devons attacher à notre événement pageShared personnalisé comme suit:

 / * Écoutez l'événement pageShared * / $ (document) .on ('pageShared', fonction (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Très simplement, si l'URL transmise est identique à la page actuelle, nous montrons le contenu secret à l'utilisateur. Dans l'exemple que j'ai fait, un chaton. Vous les chanceux!

Je suis fainéant. Puis-je télécharger votre démo complète?

Pour télécharger le fichier de démonstration complet de ce tutoriel - oui, vous l'avez deviné - partagez simplement la page en utilisant les boutons sur le côté et le lien de téléchargement vous sera révélé comme par magie.

Des problèmes avec le code? Faites-moi savoir dans les commentaires, mais une poupée libérale de console.log vous aidera à comprendre quels objets vous sont transmis et les secrets qu’ils contiennent; et veillez à utiliser les codes de bouton exacts fournis ici, car certains formats (comme iFrame) ne fonctionnent pas avec ces événements..

Téléchargez test.html et essayez sur votre propre serveur

En savoir plus sur: jQuery, Programmation, Développement Web.