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

Publicité

Devenir viral signifiait autrefois une épidémie de maladie, mais maintenant c'est quelque chose que tous les créateurs de contenu recherchent. Tu pourrait compter uniquement sur la qualité de votre contenu - s'il est assez bon, les gens le partageront, non? Peut être. Mais vous pouvez également aider les choses un peu en offrant quelque chose de plus de valeur à ceux qui partagent - un coupon, un téléchargement, un autocollant smiley dans l'e-mail ou une image de stock d'un chaton mignon. Aujourd'hui, je vais vous montrer comment créer le vôtre comme / tweet / + 1 pour déverrouiller le système avec un peu jQuery et les API natives.

Cette méthode est destinée aux personnes qui ont leur propre site Web et qui souhaitent y accéder. Si vous cherchez à le faire sur votre page Facebook, la base Tutoriel Facebook Fan Gate Comme pour déverrouiller: comment construire une porte de fan Facebook de base sans payer pour l'hébergementUne utilisation incroyablement efficace d'une page de marque hébergée sur Facebook est d'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 fonctionne

Nous allons charger un ensemble de boutons à partir des différents réseaux et les attacher à leurs événements ou rappels respectifs pour indiquer quand quelque chose a été partagé. UNE rappeler est une fonction qui s'exécute lorsque quelque chose d'autre est terminé, généralement passée en paramètre à une autre fonction. Lorsque vous utilisez jQuery AJAX par exemple, un rappel réussi est exécuté lorsque la requête AJAX a réussi - il fait quelque chose avec les données renvoyées, comme accuser réception des données du formulaire. Nous utiliserons également événements - qui sont un peu plus complexes, mais hors du cadre de ce tutoriel. Nous déclencherons ensuite notre propre événement, qui contient le code pour révéler une ou plusieurs parties secrètes de la page. Pour notre objectif, il suffit de cacher un peu de contenu et de le révéler, mais vous pouvez l'ajuster pour qu'il soit un peu plus sécurisé que le chargement 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 Javascript sur la page, que ce soit par le biais de balises de script en ligne ou dans un fichier .JS distinct lié dans l'en-tête.

Boutons de partage de base

Commençons par charger un ensemble de base de boutons de partage sur la page. Il y a deux parties à cela, tout d'abord pour 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 aller ensemble dans un 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 () {// init le FB JS 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); return window.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 voulez que les boutons apparaissent:

N'oubliez pas de changer 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 aucun événement auquel s'attacher ici, juste un rappel lorsque vous cliquez sur le bouton.

Enfin, créez une nouvelle définition de classe CSS pour ".caché", Et définissez affichage: aucun propriété pour elle. Tout ce que vous voulez cacher jusqu'à ce qu'il soit partagé doit y entrer.

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

Attachement 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é pageSharedet en transmettant la valeur href comme URL partagée. Nous vérifierons cela plus tard. Le code complet de votre bouton Facebook devrait maintenant ressembler à:

 window.fbAsyncInit = function () {// init le FB JS 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 attacher à un événement de suivi si vous le souhaitez), mais la chose importante à retenir est que tous doivent être enveloppés dans le twttr.ready rappeler. Encore une fois, nous déclenchons le même événement jQuery pageShared, en transmettant la bonne variable pour représenter l'URL qui a été partagée.

 twttr.ready (function (twttr) {twttr.events.bind ('tweet', function (event) {$ .event.trigger ({type: "pageShared", url: event.target.baseURI})); }); });

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

 function 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 la même que la page actuelle, nous montrons le contenu secret à l'utilisateur. Dans l'exemple que j'ai fait, un chaton. Vous les gens 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é - il suffit de partager la page en utilisant les boutons sur le côté et le lien de téléchargement vous sera magiquement révélé.

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

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