El Open Graph protocol permite a cualquier página web para convertirse en un objeto rico en un gráfico social. Por ejemplo, esto se utiliza en Facebook para permitir a cualquier página web para tener la misma funcionalidad que una página de Facebook. Aunque muchas tecnologías diferentes y esquemas existen y pueden ser combinados juntos, no hay una única tecnología que proporciona información suficiente para representar ricamente cualquier página web en el gráfico social. El Open Graph protocol se basa en las tecnologías existentes y ofrece a los desarrolladores una cosa para poner en práctica.simplicidad Developer es un objetivo clave de la gráfica de protocolo abierto que haya informado a muchas de las decisiones técnicas de diseño. Metadatos básicos Para activar sus páginas web en objetos gráficos, es necesario agregar metadatos de base a la página. Nos hemos basado en la versión inicial del protocolo sobre RDFa(RDFa es un conjunto de extensiones de XHTML propuestas por W3C para introducir semántica en los documentos.RDFa aprovecha atributos de los elementos meta y link de XHTML y los generaliza de forma que puedan ser utilizados en otros elementos. Además se ha definido una correspondencia simple que permite extraer tripletes RDF.) lo que significa que puedes encontrar el lugar adicional etiquetas en la de su página web. Las cuatro propiedades requeridas para cada página son: og:title - El título de su objeto, ya que debería aparecer en el gráfico, por ejemplo, "La Roca". og:type - El tipo de objeto, por ejemplo, "película". Dependiendo del tipo que especifique, otras propiedades también puede ser necesaria. og:image - Un URL de la imagen que debe representar a su objeto dentro del gráfico. og:url - La URL canónica de su objeto que se utilizará como identificación permanente en el gráfico, por ejemplo, "http://www.imdb.com/title/tt0117500/". A modo de ejemplo, el siguiente es el gráfico de protocolo marcado Abierto para el Rock en IMDB : The Rock (1996) </ title> Construcción <meta = "og:title de" content = "La Roca" / <meta> property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta propiedad = "og:image" content = "http://ia.media-imdb.com/images/rock.jpg" /> ... </ Head> ... </ HTML> Las propiedades siguientes son opcionales para cualquier objeto y se recomiendan en general: og: descripción - de dos a una pena de descripción de su objeto. og: nombre_del_sitio - Si el objeto es parte de un sitio web más grande, el nombre que se debe mostrar para el sitio en general. por ejemplo, "Comentarios". Por ejemplo (salto de línea exclusivamente para fines de presentación): <meta property="og:type" content="actor" /> propiedad <meta = "og: description" content = "que se encuentran Sean Connery fama y fortuna como el agente suave, sofisticado británico, James Bond". /> <meta Property="og:site_name" content="IMDb" /> El esquema RDF (que se refiere el Abierto Gráfico Protocolo a otros esquemas) se puede encontrar en http://ogp.me/schema . Especificar ubicación El gráfico de protocolo abierto compatible con la capacidad para que usted pueda especificar la información de ubicación para el objeto. Esto es útil si su objetivo es que una empresa o cualquier otra cosa con un lugar en el mundo real. Usted puede especificar la ubicación a través de la latitud y la longitud, la dirección completa, o ambos. Los nombres de las propiedades utilizados se definen en el hCard microformatos . Con el fin de especificar la latitud y longitud, se incluyen las siguientes dos propiedades: og: latitud - por ejemplo, "37.416343". og: longitud - por ejemplo, "-122.153013". Si desea especificar una dirección legible por humanos, incluyen los siguientes cinco propiedades: og: calle-dirección - por ejemplo, "1601 S California Ave" og: localidad - por ejemplo, "Palo Alto" og: región - por ejemplo, "CA" OG:-código postal , por ejemplo, "94304" og: nombre del país - por ejemplo, "EE.UU." Por ejemplo: <html <head> xmlns:og="http://ogp.me/ns#"> ... [SE REQUIERE DESCARGAR] <meta property="og:latitude" content="37.416343" /> <meta property="og:longitude" content="-122.153013" /> <meta propiedad = "og: calle dirección" content = "1601 S California Ave" /> <meta property="og:locality" content="Palo Alto" /> <meta property="og:region" content="CA" /> propiedad <meta = "og: postales- código "content =" 94304 "/> <meta property="og:country-name" content="USA" /> ... </ Head> Especificación de la información de contacto El protocolo abierto gráfico compatible con la capacidad para que usted pueda especificar la información de contacto de su objeto. Es probable que las futuras versiones del protocolo se admite la extracción de esta información desde el cuerpo de su página. Con el fin de especificar la información de contacto, como mínimo, una de las siguientes tres propiedades: og: correo electrónico - por ejemplo, "me@example.com". og: phone_number - por ejemplo, "+1-650-123-4567". og: fax_number - por ejemplo, "+1-415-123-4567". Por ejemplo: <html <head> xmlns:og="http://ogp.me/ns#"> ... [SE REQUIERE DESCARGAR] <meta property="og:email" content="me@example.com" /> <meta property="og:phone_number" content="650-123-4567" /> <propiedad meta = "og : fax_number "content =" +1-415-123-4567 "/> ... </ Head> Colocación de los datos de video Si desea adjuntar un vídeo a su página Abrir Gráfico sólo tiene que especificar una URL de vídeo: og: vídeo - por ejemplo, "http://example.com/awesome.flv" y, opcionalmente, puede añadir metadatos adicionales og: Vídeo: La altura - por ejemplo, "640" og: Vídeo: ancho - por ejemplo, "385" og: Vídeo: tipo - por ejemplo, "application / x-shockwave-flash" Si no se especifica un og: Vídeo: tipo , analizadores tratará de inferir el tipo. Un defecto razonable sería suponer "application / x-shockwave-flash" hasta video de HTML5 se vuelve más frecuente. Por ejemplo: <html <head> xmlns:og="http://ogp.me/ns#"> ... [SE REQUIERE DESCARGAR] <meta property="og:video" content="http://example.com/awesome.flv" /> <meta property="og:video:height" content="640" /> <meta propiedad = "og: vídeo: ancho" content = "385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> ... </ Head> Colocación de los datos de audio En una manera similar a og: video puede agregar un archivo de audio a su marca: og: Audio - por ejemplo, "http://example.com/amazing.mp3" y, opcionalmente, og: Audio: título - por ejemplo, "Amazing suave balada rock" og: Audio: artista - por ejemplo, "Amazing Band" og: Audio: disco - por ejemplo, "Amazing Album" og: Audio: tipo - por ejemplo, "application/mp3" Por ejemplo: <html <head> xmlns:og="http://ogp.me/ns#"> ... [SE REQUIERE DESCARGAR] <meta property="og:audio" content="http://example.com/amazing.mp3" /> property="og:audio:title" <meta content="Amazing Song" /> < propiedad meta = "og: Audio: artista" content = "Amazing Band" / property="og:audio:album"> <meta content="Amazing Album" /> <propiedad meta = "og: Audio: Tipo" content = "application/mp3" /> ... </ Head> Los tipos de objetos Para que el objeto de estar representados en el gráfico, es necesario especificar su tipo. Esto se hace utilizando el og: Tipo de propiedad: <meta property="og:type" content="product" /> El esquema de base incluye los siguientes tipos. Es posible que las redes sociales se elija para admitir sólo un subconjunto de estos tipos o crear nuevos tipos en función de su nicho. perdon por los errores de ortografia es que estaba en ingles y lo tenia que traducir en distintos traductores para que quede lo mas prolijo si lo quieren traducir ustedes mismos entren a http://ogp.me/ que es de donde saque la info.</div></article><div class="flex flex-col gap-3 my-10"><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#fff9eb] border border-[#f5e6c4] px-4 py-3 rounded text-[11px] font-medium text-[#856404]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-3.5 h-3.5" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg><span>Datos archivados del Taringa! original</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#856404] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">1</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">1,241</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#f0fff4] border border-[#c6f6d5] px-4 py-3 rounded text-[11px] font-medium text-[#2f855a]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span>Actividad nueva en Posteamelo</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#2f855a] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">1</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div><div class="flex flex-wrap items-center gap-3"><span class="text-[10px] text-[#2f855a] font-bold uppercase tracking-tight mr-1">Dar puntos:</span><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->1</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->2</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->3</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->5</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+<!-- -->10</button></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6"><div class="h-4 w-36 bg-gray-100 rounded mb-6 animate-pulse"></div><div class="flex flex-col gap-4"><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mt-10"><h3 class="text-sm font-bold text-gray-800 uppercase tracking-tight mb-6">Dejá tu comentario</h3><form><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="name">Nombre</label><input data-slot="input" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 bg-gray-50/50 border-gray-100 focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40" id="name" placeholder="Tu nombre" value=""/></div><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="country">País</label><select id="country" class="flex h-10 w-full items-center justify-between rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"><option value="1">Otro</option><option value="2">Argentina</option><option value="3">México</option><option value="4" selected="">Chile</option><option value="5">Colombia</option><option value="6">España</option><option value="7">Venezuela</option><option value="8">Uruguay</option><option value="9">Perú</option><option value="10">Ecuador</option></select></div></div><div class="flex flex-col gap-2 mb-6"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="comment">Comentario<!-- --> <span class="normal-case font-normal text-gray-400 lowercase ml-1">(usa **negrita** y *cursiva*)</span></label><textarea id="comment" rows="5" placeholder="Escribí tu comentario..." maxLength="2000" class="flex min-h-[120px] w-full rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50"></textarea><div class="flex justify-between"><span class="text-[11px] text-gray-300 font-medium tabular-nums">0<!-- -->/2000</span></div></div><div class="flex justify-end"><button data-slot="button" data-variant="default" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive py-2 has-[>svg]:px-3 bg-[#4b2c3d] hover:bg-[#6b4255] text-white px-8 h-10 text-xs font-bold uppercase tracking-tight disabled:opacity-50" type="submit">Publicar comentario</button></div></form></div><div class="mt-8"><div class="border-b border-gray-200 mb-6"><div class="flex gap-6"><button class="pb-3 text-sm font-bold uppercase tracking-wide transition-colors relative text-[#4a3048] border-b-2 border-[#4a3048]">Comentarios Archivados (<!-- -->0<!-- -->)</button><button class="pb-3 text-sm font-bold uppercase tracking-wide transition-colors relative text-gray-400 hover:text-gray-600">Comentarios Nuevos (<!-- -->0<!-- -->)</button></div></div><div class="space-y-4"><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div><div class="bg-white border border-gray-100 p-4 rounded-lg shadow-sm"><div class="flex items-center gap-2 mb-3"><div class="w-5 h-5 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div></div><div class="space-y-2"><div class="h-3 w-full bg-gray-100 rounded animate-pulse"></div><div class="h-3 w-5/6 bg-gray-100 rounded animate-pulse"></div></div></div></div></div></div><div class="w-full lg:w-80 shrink-0 flex flex-col gap-8"><div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"><div class="bg-[#4b2c3d] px-4 py-2 text-white flex items-center justify-between"><h3 class="text-xs font-bold uppercase tracking-tight">Autor del Post</h3></div><div class="p-4 flex flex-col gap-4"><div class="flex items-center gap-4"><span data-slot="avatar" class="relative flex size-8 overflow-hidden w-14 h-14 rounded-lg border border-gray-100 shrink-0"><span data-slot="avatar-fallback" class="flex size-full items-center justify-center rounded-full bg-gray-200 text-gray-500 font-bold uppercase">e</span></span><div class="flex flex-col min-w-0"><div class="flex items-center gap-1.5 min-w-0"><a class="text-sm font-bold text-gray-700 hover:text-[#336699] truncate" href="/autor/ensaladin">ensaladin</a><span class="text-base shrink-0">🇦🇷</span></div><span class="text-[10px] text-gray-400 font-medium uppercase tracking-wide">Usuario</span></div></div><div class="flex flex-col gap-2 pt-2"><div class="flex items-center justify-between text-xs"><span class="text-gray-400 font-medium uppercase">Puntos</span><span class="text-gray-700 font-bold tabular-nums">0</span></div><div class="flex items-center justify-between text-xs"><span class="text-gray-400 font-medium uppercase">Posts</span><span class="text-gray-700 font-bold tabular-nums">3</span></div></div><a class="text-[11px] font-bold text-[#b53a3a] hover:underline flex items-center justify-center pt-2 mt-2 border-t border-gray-50" href="/autor/ensaladin">Ver perfil →</a></div></div></div></div></main><footer class="w-full bg-[#291823] text-white/50 py-12 px-4 sm:px-6 lg:px-8 border-t border-white/5"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12"><div class="flex flex-col gap-4"><div class="flex flex-col"><span class="text-white text-xl font-bold tracking-tight">Posteamelo</span><span class="text-xs text-white/40 mt-1 max-w-xs leading-relaxed">Archivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.</span></div></div><div class="flex flex-col gap-4"><h4 class="text-white/80 text-sm font-bold uppercase tracking-wider">LEGAL</h4><nav class="flex flex-col gap-2"><a class="text-xs hover:text-white transition-colors" href="/terminos">Términos y Condiciones</a><a class="text-xs hover:text-white transition-colors" href="/privacidad">Política de Privacidad</a><a class="text-xs hover:text-white transition-colors" href="/sobre-nosotros">Sobre Nosotros</a></nav></div><div class="flex flex-col gap-4"><h4 class="text-white/80 text-sm font-bold uppercase tracking-wider">CONTACTO</h4><div class="text-xs leading-relaxed flex flex-col gap-1"><p>18 de Septiembre 455, Casilla 52</p><p>Chillán, Región de Ñuble, Chile</p><p class="mt-2 text-white/30 italic">Solo correo postal</p></div></div></div><div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4 text-[10px] text-white/30 uppercase tracking-widest font-medium"><p>© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.</p><p>Contenido preservado con fines históricos y culturales.</p></div></footer><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section></div></div>
<script>
// Mark body as ready once styles are loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('ready');
});
} else {
document.body.classList.add('ready');
}
</script>
</body>
</html>