Foros del Web » Creando para Internet » Diseño web »

Cargar url externa en un div :(

Estas en el tema de Cargar url externa en un div :( en el foro de Diseño web en Foros del Web. Mi duda es la siguiente: Tengo una pagina con noticias. me gustaria saber si hay un codigo que yo pueda darle a mis aliados para ...
  #1 (permalink)  
Antiguo 06/04/2010, 09:58
Avatar de spacecowboy  
Fecha de Ingreso: agosto-2009
Mensajes: 110
Antigüedad: 14 años, 7 meses
Puntos: 0
Cargar url externa en un div :(

Mi duda es la siguiente: Tengo una pagina con noticias. me gustaria saber si hay un codigo que yo pueda darle a mis aliados para que copien y peguen en sus paginas y asi mostrar mis noticias en sus paginas web.

Lo que se me ocurre hacerlo en un div en vez de iframe. ya que los div son mas flexibles a la hora de adaptarse a un diseño.

se que con un iframe seria algo asi <iframe src="url-de-la-pagina"></iframe> pero no se como hacer eso con un div.
  #2 (permalink)  
Antiguo 06/04/2010, 22:17
Avatar de kyedesigns  
Fecha de Ingreso: abril-2010
Ubicación: Continuamente en movimiento...
Mensajes: 99
Antigüedad: 13 años, 11 meses
Puntos: 4
Respuesta: Cargar url externa en un div :(

Con iFrame es posible,pero don divs creo que es imposible ya que no tienen el mismo trabajo de un iframe a pesar de su flexibilidad.

Una idea que se me ocurre es la siguiente:

Si tu web utilizar RSS para sindicar las noticias, puedes crear un widget o algo por el estilo haciendo un call al RSS y que muestre las noticias de tu web en donde quiera que se pinga el codigo. Uno de los servicios que provee algo parecido a lo que te menciono es Feedburner.


Otro ejemplo lo provee "http://kentbrewster.com/" el cual es un badge.

Aquí un ejemplo del código que he creado para mi website a modo de ejemplo:

Código HTML:
<style>#KENTBREW_509b{width:250px;border:2px solid #000;overflow:hidden;}#KENTBREW_509b a{text-decoration:none;}#KENTBREW_509b a:hover{text-decoration:underline;}#KENTBREW_509b .hd{background-color:#268;border-bottom:1px solid #000;padding:3px;}#KENTBREW_509b .hd a{color:#fff;font-weight:bold;text-indent:20px;}#KENTBREW_509b .bd{background-color:#fff;margin:0;padding:0;font-size:92%;}#KENTBREW_509b .bd.hidden{display:none;}#KENTBREW_509b .bd ul{margin:0;padding:5px;list-style:none;}#KENTBREW_509b .bd ul li{white-space:nowrap;margin:0;padding:0;}#KENTBREW_509b .bd ul li a{color:#000;}#KENTBREW_509b .ft{text-align:right;background-color:#268;border-top:1px solid #000;padding:0 5px;}#KENTBREW_509b .ft a{font-size:77%;color:#fff;}#KENTBREW_509b .hd a.progress{display:block;height:16px;width:16px;line-height:0;font-size:0;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/my/mw/anim_loading_sm.gif') 0 50% no-repeat;}#KENTBREW_509b .hd a.open{ display:block;height:15px;width:15px;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/plus/csp/cn/norgie_open_dna.gif') 0 50% no-repeat;}#KENTBREW_509b .hd a.closed{display:block;height:15px;width:15px;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/plus/csp/cn/norgie_closed_dna.gif') 0 50% no-repeat;}</style>
<dl id="KENTBREW_509b"><dt class="hd"><a class="norgie progress"></a><a href="http://www.kyedesigns.com/">kYe Designs</a></dt><dd class="bd"><ul></ul></dd><dt class="ft"><a href="http://kentbrewster.com/badger?cb=000&ch=fff&cf=000&bh=268&bf=fff&fh=kYe%20Designs&fp=http%3A%2F%2Fwww.kyedesigns.com%2F&fu=http%3A%2F%2Fwww.kyedesigns.com%2Ffeed&bw=250">get this for your page</a></dt></dl>
<script>var KENTBREW_509b=window.KENTBREW_509b||{};KENTBREW_509b.badger=function(){var $={};return {init:function(theBadge){$.theBody = document.getElementById(theBadge).getElementsByTagName("DD")[0];$.theNorgie = document.getElementById(theBadge).getElementsByTagName("A")[0];$.theNorgie.onclick=function(){if($.theNorgie.className=="open"){$.theNorgie.className="closed";$.theBody.className="bd hidden";}else{if($.theNorgie.className=="closed"){$.theNorgie.className = "open";$.theBody.className = "bd";}}};$.theFeed=document.getElementById(theBadge).getElementsByTagName("UL")[0];},pingFeed:function(feed){$.theNorgie.className="open";$.theFeed.innerHTML="";if(feed.value.items.length){for(var i=0;i<feed.value.items.length;i++){var li=document.createElement("li");var a=document.createElement("a");a.innerHTML=feed.value.items[i].title;a.href=feed.value.items[i].link;a.target="_blank";li.appendChild(a);$.theFeed.appendChild(li);}}}};}();KENTBREW_509b.badger.init("KENTBREW_509b");</script>
<script src="http://pipes.yahoo.com/pipes/Bu8sIkUH3BGA6wD_CB2yXQ/run?_render=json&_callback=KENTBREW_509b.badger.pingFeed&s=http://www.kyedesigns.com/feed"></script> 
Si pegas el código en alguna web veras que contiene los últimos artículos que he escrito o se han escrito en mi web. Mi idea o sugerencia seria esa.

Si te interesa crear uno de estos para ti puedes crear uno en la siguiente dirección:

Cita:
http://kentbrewster.com/badger/
Solo necesitas El titulo de web, la url de tu web, la url del RSS Feed de tu web y el tamaño que quieres el componente.

Espero haber sido de ayuda,
Saludos!
  #3 (permalink)  
Antiguo 07/04/2010, 11:28
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 17 años
Puntos: 67
Respuesta: Cargar url externa en un div :(

Claro que es posible cargarlo en un DIV, sin embargo no es tan simple como asignarle una propiedad, requiere Ajax, no obstante es aún más difícil de aplicarlo mediante un código que se pueda pegar en cualquier parte. La sugerencia de kyedesigns es muy buena.
  #4 (permalink)  
Antiguo 09/04/2010, 10:40
Avatar de spacecowboy  
Fecha de Ingreso: agosto-2009
Mensajes: 110
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: Cargar url externa en un div :(

Cita:
Iniciado por kyedesigns Ver Mensaje
Con iFrame es posible,pero don divs creo que es imposible ya que no tienen el mismo trabajo de un iframe a pesar de su flexibilidad.

Una idea que se me ocurre es la siguiente:

Si tu web utilizar RSS para sindicar las noticias, puedes crear un widget o algo por el estilo haciendo un call al RSS y que muestre las noticias de tu web en donde quiera que se pinga el codigo. Uno de los servicios que provee algo parecido a lo que te menciono es Feedburner.


Otro ejemplo lo provee "http://kentbrewster.com/" el cual es un badge.

Aquí un ejemplo del código que he creado para mi website a modo de ejemplo:

Código HTML:
<style>#KENTBREW_509b{width:250px;border:2px solid #000;overflow:hidden;}#KENTBREW_509b a{text-decoration:none;}#KENTBREW_509b a:hover{text-decoration:underline;}#KENTBREW_509b .hd{background-color:#268;border-bottom:1px solid #000;padding:3px;}#KENTBREW_509b .hd a{color:#fff;font-weight:bold;text-indent:20px;}#KENTBREW_509b .bd{background-color:#fff;margin:0;padding:0;font-size:92%;}#KENTBREW_509b .bd.hidden{display:none;}#KENTBREW_509b .bd ul{margin:0;padding:5px;list-style:none;}#KENTBREW_509b .bd ul li{white-space:nowrap;margin:0;padding:0;}#KENTBREW_509b .bd ul li a{color:#000;}#KENTBREW_509b .ft{text-align:right;background-color:#268;border-top:1px solid #000;padding:0 5px;}#KENTBREW_509b .ft a{font-size:77%;color:#fff;}#KENTBREW_509b .hd a.progress{display:block;height:16px;width:16px;line-height:0;font-size:0;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/my/mw/anim_loading_sm.gif') 0 50% no-repeat;}#KENTBREW_509b .hd a.open{ display:block;height:15px;width:15px;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/plus/csp/cn/norgie_open_dna.gif') 0 50% no-repeat;}#KENTBREW_509b .hd a.closed{display:block;height:15px;width:15px;float:left;background:transparent url('http://l.yimg.com/us.yimg.com/i/us/plus/csp/cn/norgie_closed_dna.gif') 0 50% no-repeat;}</style>
<dl id="KENTBREW_509b"><dt class="hd"><a class="norgie progress"></a><a href="http://www.kyedesigns.com/">kYe Designs</a></dt><dd class="bd"><ul></ul></dd><dt class="ft"><a href="http://kentbrewster.com/badger?cb=000&ch=fff&cf=000&bh=268&bf=fff&fh=kYe%20Designs&fp=http%3A%2F%2Fwww.kyedesigns.com%2F&fu=http%3A%2F%2Fwww.kyedesigns.com%2Ffeed&bw=250">get this for your page</a></dt></dl>
<script>var KENTBREW_509b=window.KENTBREW_509b||{};KENTBREW_509b.badger=function(){var $={};return {init:function(theBadge){$.theBody = document.getElementById(theBadge).getElementsByTagName("DD")[0];$.theNorgie = document.getElementById(theBadge).getElementsByTagName("A")[0];$.theNorgie.onclick=function(){if($.theNorgie.className=="open"){$.theNorgie.className="closed";$.theBody.className="bd hidden";}else{if($.theNorgie.className=="closed"){$.theNorgie.className = "open";$.theBody.className = "bd";}}};$.theFeed=document.getElementById(theBadge).getElementsByTagName("UL")[0];},pingFeed:function(feed){$.theNorgie.className="open";$.theFeed.innerHTML="";if(feed.value.items.length){for(var i=0;i<feed.value.items.length;i++){var li=document.createElement("li");var a=document.createElement("a");a.innerHTML=feed.value.items[i].title;a.href=feed.value.items[i].link;a.target="_blank";li.appendChild(a);$.theFeed.appendChild(li);}}}};}();KENTBREW_509b.badger.init("KENTBREW_509b");</script>
<script src="http://pipes.yahoo.com/pipes/Bu8sIkUH3BGA6wD_CB2yXQ/run?_render=json&_callback=KENTBREW_509b.badger.pingFeed&s=http://www.kyedesigns.com/feed"></script> 
Si pegas el código en alguna web veras que contiene los últimos artículos que he escrito o se han escrito en mi web. Mi idea o sugerencia seria esa.

Si te interesa crear uno de estos para ti puedes crear uno en la siguiente dirección:



Solo necesitas El titulo de web, la url de tu web, la url del RSS Feed de tu web y el tamaño que quieres el componente.

Espero haber sido de ayuda,
Saludos!


Vale muchas gracias mi sitio si usa feed, y efectivamente pude crearle ese tipo de widget... aunke me hubiese gustado programar algo para que mis aliados eligieran ellos mismos los colores y eso.

Etiquetas: externa, url
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:03.