InicioHazlo Tu MismoComo agregar cosas de Facebook a tu web

Como agregar cosas de Facebook a tu web

Hazlo Tu Mismo8/28/2011
Hola Gente De TARINGA ! ya avía creado un post muy parecido a este , pero en este post les mostrare muchas mas cosas espero que les guste y pasense por mis otros post !!!Primero : Agregar el Plugins "Me Gusta" a cualquier parte de tu web. Amo Taringa </ title> </ Head> <body> <Iframe src = "http://www.facebook.com/plugins/like.php?href=YOUR_URL" scrolling = "no" frameborder = "0" style = "border: none; ancho: 450px; height: 80px"> </ iframe> </ Body> </ Html>Agregar "AUTENTICACION"<html> <head> <title> Mi página de inicio de Facebook </ title> </ Head> <body> <div id="fb-root"> </ div> <script src="http://connect.facebook.net/en_US/all.js"> </ script> <script> FB.init ({ Id de aplicación: "YOUR_APP_ID, galletas: true, estado: true, xfbml: true }); </ Script> </ Body> </ Html>DESPUES<html> <head> <title> Mi página de inicio de Facebook </ title> </ Head> <body> <div id="fb-root"> </ div> <script src="http://connect.facebook.net/en_US/all.js"> </ script> <script> FB.init ({ Id de aplicación: "YOUR_APP_ID, galletas: true, estado: true, xfbml: true }); </ Script> <fb:login-button> Ingresar con Facebook </ fb: login-> botón </ Body> </ Html>LUEGO<html> <head> <title> Mi página de inicio de Facebook </ title> </ Head> <body> <div id="fb-root"> </ div> <script src="http://connect.facebook.net/en_US/all.js"> </ Script> <script> FB.init ({ Id de aplicación: "YOUR_APP_ID, galletas: true, estado: true, xfbml: true }); </ Script> <fb:login-button perms="email,user_checkins"> Ingresar con Facebook </ Fb: login-> botón </ Body> </ Html>html> <head> <title> Mi página de registro de Facebook </ title> </ Head> <body> <div id="fb-root"> </ div> <script src="http://connect.facebook.net/en_US/all.js"> </ Script> <script> FB.init ({ Id de aplicación: "YOUR_APP_ID, galletas: true, estado: true, xfbml: true }); </ Script> <Fb: registro nombre de los campos ="[{' ':' nombre '}, {' nombre ':' email '}, {'Nombre': 'favorite_car', 'description': '¿Cuál es su coche favorito, 'Tipo': 'text'}] "redirect-uri =" URL_TO_LOAD_AFTER_REGISTRATION "> </ Fb: registro> </ Body> </ Html>Para Mas Informacion Mandame Un MP Gracias Por Pasar</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">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">543</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">2</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">b</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/bannerstik">bannerstik</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">1</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/bannerstik">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>