Cómo poner enlaces externos con un safelink
Aprende cómo utilizar enlaces externos con safelink para mejorar la seguridad y experiencia del usuario.
Palabras clave: Enlaces externos, Safelink, Redirección segura.
En este artículo vamos a explorar el mundo de Enlaces externos, entender su importancia y cómo puede ayudarte a mejorar la seguridad de los usuarios. Si eres nuevo en este tema, no te preocupes; vamos a desglosarlo todo de manera sencilla y accesible.
¿Qué son los Enlaces externos?
Los Enlaces externos son aquellos que dirigen a los usuarios fuera de tu página web. Estos enlaces pueden ser muy útiles para proporcionar contenido adicional o referencias externas. Sin embargo, pueden tener ciertos riesgos en términos de seguridad y experiencia de usuario. En este artículo, te enseñaremos cómo proteger esos enlaces usando Safelink.
¿Cómo funciona Safelink con los Enlaces externos?
Uno de los aspectos más importantes es cómo Safelink interactúa con los Enlaces externos. Safelink actúa como un puente seguro que protege a los usuarios de posibles riesgos al hacer clic en enlaces de sitios desconocidos o inseguros. Estos dos elementos pueden trabajar juntos para ofrecerte una experiencia más fluida y segura. A continuación, te explicamos cómo integrarlos correctamente.
Además, si buscas opciones para mejorar tus resultados, te sugerimos que eches un vistazo a estos artículos relacionados: AntiAdBlock para Blogger y Etiqueta DataBlogAdsenseClientID en Blogger.
Beneficios de utilizar Safelink para Enlaces externos
Existen múltiples ventajas al incorporar Safelink en tus Enlaces externos. Algunos de los principales beneficios incluyen:
- Mayor seguridad para los usuarios al evitar redirecciones peligrosas.
- Mejor control sobre el tráfico de tu página y redirecciones externas.
- Optimización de la experiencia de usuario en tu sitio web.
En resumen, al utilizar Safelink, puedes proteger tanto a tus usuarios como a tu sitio web, asegurando que las Redirecciones seguras sean una parte integral de tu estrategia de enlaces externos.
Script para Enlaces Externos (Safelink)
Agrega el siguiente código antes de la etiqueta de cierre </body> en tu HTML para activar la redirección Safelink:
//<![CDATA[
// Función para verificar si el enlace es externo y si está en la lista de redes sociales a excluir
function isExternal(url) {
const link = document.createElement("a");
link.href = url;
const hostname = link.hostname;
// Lista de dominios a excluir del safelink (redes sociales, etc.)
const protectedLinks = [
'facebook.com',
'instagram.com',
'twitter.com',
'blogger.googleusercontent.com',
'kolectiva.imgix.net',
'draft.blogger.com',
'blogger.com',
'kolectiva.co',
'checkout.wompi.co',
'fasecolombia.com',
'wa.me',
// Puedes agregar más redes sociales si lo deseas
];
// Verifica si el enlace es de una red social
for (let i = 0; i < protectedLinks.length; i++) {
if (hostname.includes(protectedLinks[i])) {
return false; // No redirigir a safelink si es una red social
}
}
// Verifica si el enlace es externo
return hostname !== window.location.hostname;
}
// Evento para detectar clic en los enlaces
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(event) {
// Verifica si el enlace tiene la clase "popWin"
if (link.classList.contains('popWin')) {
return; // Si tiene la clase "popWin", no hacer nada
}
// Verificar si el enlace es un enlace de imagen
if (link.querySelector('img')) {
return; // Si es un enlace de imagen, no hacer nada (deja que se abra en el lightbox)
}
// Verifica si el enlace tiene href="javascript:;"
if (link.getAttribute('href') === 'javascript:;') {
return; // No hacer nada si es un enlace con javascript:;
}
// Verifica si el enlace contiene "/p/checkout.html"
if (link.href.includes('/p/checkout.html') || link.getAttribute('href') === '/p/checkout.html') {
return; // No hacer nada si el enlace tiene /p/checkout.html
}
event.preventDefault(); // Evita que el enlace se abra inmediatamente
const url = link.href;
// Verifica si el enlace es externo y no está en la lista de redes sociales
if (isExternal(url)) {
// Redirige a la página safelink.html con la URL externa como parámetro
const safelinkUrl = `https://www.kolectiva.co/p/safelink.html?url=${encodeURIComponent(url)}`;
window.location.href = safelinkUrl;
} else {
// Si no es externo o es una red social, sigue el enlace normal
window.location.href = url;
}
});
});
//]]>
Estilos y Scripts para la página Safelink en Blogger
Agrega el siguiente código para la página Safelink en Blogger:
<style>
.hidden {
display: none;
}
#counter {
font-size: 30px;
font-weight: bold;
}
#verLinkButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#verLinkButton:hover {
background-color: #45a049;
}
</style>
<div class="adB">
aquí el script de adsesnse</div>
<div class="centrar">
El enlace se mostrará en <span id="counter">6</span> segundos.</p>
</div>
<div class="centrar">
<button id="verLinkButton" class="hidden" onclick="redirect()">Ir al Enlace</button>
</div>
<div class="adB">
aquí el script de adsesnse</div>
<script>
// Obtén la URL externa desde los parámetros de la query string
const params = new URLSearchParams(window.location.search);
const externalUrl = params.get('url');
if (!externalUrl) {
alert('No se encontró el enlace externo.');
window.location.href = '/'; // Redirige a la página principal si no hay URL
}
let counter = 6;
const counterElement = document.getElementById('counter');
const verLinkButton = document.getElementById('verLinkButton');
// Función que actualiza el contador
function updateCounter() {
if (counter > 0) {
counter--;
counterElement.textContent = counter;
} else {
verLinkButton.classList.remove('hidden'); // Muestra el botón
}
}
// Redirigir al enlace real cuando el botón es presionado
function redirect() {
window.location.href = externalUrl;
}
// Actualiza el contador cada segundo
setInterval(updateCounter, 1000);
</script>
