Cargar url externa en un div :(

spacecowboy · #1 (**permalink**) 06/04/2010, 09:58

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.

kyedesigns · #2 (**permalink**) 06/04/2010, 22:17

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!

ElJavista · #3 (**permalink**) 07/04/2010, 11:28

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.

spacecowboy · #4 (**permalink**) 09/04/2010, 10:40

Cita:

Iniciado por kyedesigns

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.