eboy
BlogCucú ...ContactoMis PluginsRegalos/Concursos
Viernes, 16/05/08. Actualizado hace 2 dias
Semper Fit, Mr. Rijkaard, Semper Fit 4 days ago
Si te gusta, suscribete al rss de Entradas o al de Comentarios.

[Tutorial]:agregar favicones a los enlaces a otras webs con javascript

Por: rogeliorabbit @ Mayo 10, 08

En askthecssguy tienen un muy buen tutorial para poner los favicones de las paginas a las cuales mencionamos en nuestros enlaces en los posts. Básicamente la idea es a todos los enlaces que apuntan a un sitio externos (otra web) agregarles sus respectivos favicones al lado. Esta tecnica presenta distintas formas de utilizarse, yo os voy a hablar de como agregar favicones en todos los enlaces de nuestra web, menos en enlaces que apunten a nuestra propia web:

Para ello lo unico que tenemos que hacer es tener una imagen, por si la pagina a la que enlacemos no tiene favicon, almacenada, por ejemplo esta:( ). Tras esto, copiamos el siguiente codigo entre las etiquetas <head> y </head>, estando esto en wordpress en el archivo header.php de nuestro theme activo:

<//script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  oldonload();
	  func();
	}
  }
}
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
	parent.appendChild(newElement);
  } else {
	parent.insertBefore(newElement,targetElement.nextSibling);
  }
}
function faviconize() {
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var links = document.getElementsByTagName("a");
	for (var j=0; j<links.length; j++) {
	  var hoststring = /^http:/;
	  var localdomain = "http://www.ejemplo.com";
	  var hrefvalue = links[j].getAttribute("href",2);
		if ((hrefvalue.search(hoststring) != -1) && (hrefvalue.indexOf(localdomain) == -1)) {
			var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
			domain = RegExp.$2;
			var cue = document.createElement("img");
			cue.className = "faviconimg";
			var cuesrc = "http://"+domain+"/favicon.ico";
			cue.setAttribute("src",cuesrc);
			cue.onerror = function () {
				this.src = "external.gif";
				}
			insertAfter(cue,links[j]);
		}
	}
}
addLoadEvent(faviconize);
</script>
<style type="text/css">
p, li {font:normal 12px/18px arial;}
h1	{font:bold 22px/28px arial;}
h2	{font:bold 16px/20px arial;}
.wrap {width:500px;}
img.faviconimg {
	border:0;
	width:11px;
	height:11px;
	padding:0 4px;
}
ul.favilist {list-style:none;}
</style>

Info: Teneis que modificar dos cosas en este codigo. Primero cambiar www.ejemplo.com (lo buscais en el codigo) por la direccion de vuestra pagina o blog. Tambien teneis que quitar los // del comienzo del javascript para que funcione.

Tags:

Esta entrada no tiene comentarios... pero tu puedes ser el primero.

Agregar comentario

¡Deje tu huella! - Ten en cuenta que el comentarío debe de estar relacionado con la entrada actual, no usar insultos ni descalificaciones hacia el autor o otros visitantes. Si quieres hacer una pregunta fuera de este tema al administrador, ve a la seccion de contacto. Recuerda que si quiere usar un avatar debe registrarse en Gravatar. Tambien lo puedes hacer marcando la casilla que esta debajo del campo del mensaje.

XHTML:Puedes usar estos tags en el comentario: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ads