J'ai visité quelques blogs récemment et ce que j'ai vu sur certains d'entre eux, c'est un verrou de contenu. Par exemple, pour déverrouiller un bouton de téléchargement, vous devez partager ou aimer l'article.
C'est en fait une bonne idée si vous voulez que votre site Web soit plus visible, car plus vos pages seront partagées et aimées, plus vous aurez de visiteurs.
J'ai fait plus de recherches sur ces verrous de contenu et il apparaît que la plupart d'entre eux sont soit des plugins payants, soit très basiques.
J'ai donc décidé d'écrire ma propre version, elle ne nécessite pas beaucoup de code et vous pouvez la personnaliser comme vous le souhaitez, bien que vous aurez besoin d'une certaine expérience avec HTML.
html:
<div id="sociallocker">
<div id="sociallocker-links">
<a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
<a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a>
</div>
<div id="sociallocker-content">
<a href="http://google.com">Download Now</a>
</div>
<div id="sociallocker-overlay"><i class="fas fa-lock"></i>Unlock content with a social share.</div>
</div>
Pour ce casier de contenu, nous utiliserons des boutons sociaux, ces boutons partageront le contenu lorsque le visiteur cliquera sur l'un d'entre eux et débloqueront ensuite le bouton Télécharger maintenant lorsque la fenêtre se fermera, n'oubliez pas de changer la valeur de l'attribut href du lien pour votre lien de partage social.
Nous utilisons Font Awesome pour les icônes sociales.
code css
@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
#sociallocker {
background-color: #EEEEEE;
text-align: center;
position: relative;
max-width: 500px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius:10px;
}
#sociallocker-overlay {
background-color: rgba(0,0,0,0.6);
font-size: 20px;
font-weight: bold;
color: #ffffff;
transition: all 0.2s ease;
}
#sociallocker-overlay i {
margin-right: 10px;
}
#sociallocker:hover #sociallocker-overlay {
top: -100%;
transition: all 0.2s linear;
}
#sociallocker:hover #sociallocker-content {
top: 100%;
transition: all 0.2s linear;
}
#sociallocker-content a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
background-color: #777777;
color: #f9f9f9;
border-radius: 4px;
font-weight: bold;
}
#sociallocker-overlay,
#sociallocker-content,
#sociallocker-links {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
#sociallocker-content {
background-color: #ccc;
transition: all 0.2s ease;
}
.social-1 {
text-decoration: none;
color: #ffffff;
display: inline-block;
width: 60px;
height: 60px;
overflow: hidden;
margin-right: 5px;
}
.social-1 i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.social-1:hover i {
background-color: rgba(0,0,0,0.1);
transform: scale(1.2);
transition: all 0.2s;
}
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }
Si vous avez déjà inclus Font Awesome dans votre site web, vous pouvez supprimer l'@import... en haut du code ci-dessus.
Nous avons 3 conteneurs dans notre élément #sociallocker, ceux-ci sont :
#sociallocker-links - ce conteneur contiendra tous nos liens de partage social, par exemple, Facebook, Twitter, et ainsi de suite, vous pouvez le personnaliser à votre goût, ajouter plus de liens sociaux ou ajouter des liens personnalisés, rappelez-vous simplement que lorsque le visiteur clique sur l'un d'eux, le contenu ne se déverrouillera que lorsque la nouvelle fenêtre se fermera.
#sociallocker-content - c'est le contenu déverrouillé, ne vous inquiétez pas si les visiteurs cliquent sur le bouton avant de partager, nous utiliserons JavaScript pour supprimer temporairement le lien du bouton de téléchargement.
#sociallocker-overlay - c'est la première chose que les visiteurs verront, lorsque le visiteur le survole, les boutons de partage apparaîtront.
(function() {
var sl = document.querySelector("#sociallocker");
var slc = document.querySelector("#sociallocker-content");
if (!sl) return;
var old_slc_html = slc.innerHTML;
slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
slc.innerHTML = old_slc_html;
document.querySelector("#sociallocker-links").style.display = "none";
document.querySelector("#sociallocker-overlay").style.display = "none";
document.querySelector("#sociallocker-content").style.top = "0";
}
}, 1000);
e.preventDefault();
};
});
})();
Le code JavaScript ci-dessus ouvrira une nouvelle fenêtre lorsque le visiteur cliquera sur l'un des boutons de partage, et à la fermeture (qui se produit normalement après le partage), le contenu verrouillé sera déverrouillé.
Conclusion
C'est probablement le moyen le plus simple de créer un casier de contenu social pour votre site Web, votre blog, vos messages, vos articles, etc.
Le seul problème avec cette méthode est que vous ne pouvez pas utiliser les likes des pages sociales (sauf si vous ouvrez dans une nouvelle fenêtre) pour déverrouiller le contenu car vous devez utiliser des outils tiers (comme le SDK de Facebook), c'est le seul moyen de déterminer si le visiteur aime la page ou non, cependant, vous pouvez toujours l'intégrer, il suffit d'inclure le code tiers et d'ajouter les événements dans le code JavaScript ci-dessus.