🔗 Badges · Botones · Enlázanos

Botones y badges de Mastodon para enlazar a TuiterRocks

Aquí puedes copiar y pegar badges, botones y banners HTML de Mastodon y del Fediverso para enlazar a tuiter.rocks (la instancia) o a las guías del Fediverso en español desde tu web, blog o página personal.

Hay opciones pequeñas, redondas, minimalistas y banners completos. También puedes cambiar el tamaño, los colores o el texto sin complicarte demasiado la vida.

Badges para tuiter.rocks (la instancia)

Para enlazar directamente a la comunidad Mastodon.

Botón clásico con texto

Sígueme en Tuiter.Rocks

<a href="https://tuiter.rocks" target="_blank" rel="noopener" style="display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#2a2a2a;">
  <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
       alt="Tuiter.Rocks" style="height:34px; border-radius:6px; vertical-align:middle;">
  <strong style="font-family:Inter,sans-serif;">Sígueme en Tuiter.Rocks</strong>
</a>

Badge redondo (etiqueta)

tuiter.rocks

<a href="https://tuiter.rocks" target="_blank" rel="noopener"
   style="display:inline-flex; align-items:center; gap:10px; background:#aa5c28; padding:8px 16px; border-radius:999px; text-decoration:none;">
  <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
       alt="Tuiter.Rocks" style="height:26px; width:26px; border-radius:50%;">
  <span style="color:#fff; font-weight:700; font-family:Inter,sans-serif;">tuiter.rocks</span>
</a>

Solo logo (minimalista)

<a href="https://tuiter.rocks" target="_blank" rel="noopener">
  <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
       alt="Tuiter.Rocks" style="height:50px; border-radius:50%;">
</a>

Badges para tuiter.ovh (las guías)

Para enlazar a la guía principal de Mastodon y el Fediverso en español.

Botón con texto

Guías del Fediverso en español

<a href="https://tuiter.ovh/guia-mastodon-fediverso/" target="_blank" rel="noopener"
   style="display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#2a2a2a;">
  <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
       alt="Guías del Fediverso en español" style="height:34px; border-radius:6px;">
  <span style="font-family:Inter,sans-serif; font-weight:700;">Guías del Fediverso en español</span>
</a>

Badge redondo

tuiter.ovh

<a href="https://tuiter.ovh/guia-mastodon-fediverso/" target="_blank" rel="noopener"
   style="display:inline-flex; align-items:center; gap:10px; background:#4a4a4a; padding:8px 16px; border-radius:999px; text-decoration:none;">
  <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
       alt="Guías del Fediverso en español" style="height:26px; width:26px; border-radius:50%;">
  <span style="color:#fff; font-weight:700; font-family:Inter,sans-serif;">tuiter.ovh</span>
</a>

Enlace a una guía concreta (editable)

📖 Guía completa de Mastodon y el Fediverso

<a href="https://tuiter.ovh/guia-mastodon-fediverso/" target="_blank" rel="noopener"
   style="display:inline-flex; align-items:center; gap:10px; background:#f7f3ef; border:1px solid #e7e0d9; padding:10px 16px; border-radius:10px; text-decoration:none; color:#2a2a2a;">
  <span style="font-size:1.1rem; color:#aa5c28;">📖</span>
  <span style="font-family:Inter,sans-serif; font-size:.95rem; font-weight:600;">Guía completa de Mastodon y el Fediverso</span>
</a>

Banners completos

Banner tuiter.rocks (instancia)

Únete a Tuiter.Rocks Fediverso en español, ves lo que quieres cuando se publica.

<a href="https://tuiter.rocks" target="_blank" rel="noopener"
   style="display:block; background:linear-gradient(135deg,#6a0dad,#aa5c28); padding:16px 18px; border-radius:12px; color:#fff; text-decoration:none; font-family:Inter,sans-serif; box-shadow:0 4px 15px rgba(0,0,0,.2); max-width:420px;">
  <div style="display:flex; align-items:center; gap:14px;">
    <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
         alt="Tuiter.Rocks" style="height:56px; width:56px; border-radius:10px;">
    <div>
      <strong style="font-size:18px; display:block; margin-bottom:3px;">Únete a Tuiter.Rocks</strong>
      <span style="font-size:13px; opacity:0.9;">Fediverso en español, ves lo que quieres cuando se publica.</span>
    </div>
  </div>
</a>

Banner tuiter.ovh (guías)

Guías del Fediverso Mastodon, instancias, privacidad y más. Para entenderlo de verdad.

<a href="https://tuiter.ovh/guia-mastodon-fediverso/" target="_blank" rel="noopener"
   style="display:block; background:linear-gradient(135deg,#3a332e,#aa5c28); padding:16px 18px; border-radius:12px; color:#fff; text-decoration:none; font-family:Inter,sans-serif; box-shadow:0 4px 15px rgba(0,0,0,.2); max-width:420px;">
  <div style="display:flex; align-items:center; gap:14px;">
    <img decoding="async" src="https://tuiter.ovh/wp-content/uploads/2025/02/cropped-file-8u8kpRDvdx56VWadmNdaXr.webp"
         alt="Guías del Fediverso en español" style="height:56px; width:56px; border-radius:10px;">
    <div>
      <strong style="font-size:18px; display:block; margin-bottom:3px;">Guías del Fediverso</strong>
      <span style="font-size:13px; opacity:0.9;">Mastodon, instancias, privacidad y más. En español.</span>
    </div>
  </div>
</a>

Banners Retro

Si te gusta más el rollo web vieja, aquí tienes dos banners en SVG: uno ancho y responsive, y otro pequeñito estilo botón retro. Ambos enlazan a Tuiter.Rocks.

Banner SVG ancho (responsive)

<a href="https://tuiter.rocks" target="_blank" rel="noopener" style="display:block;max-width:520px;width:100%;" aria-label="Tuiter.Rocks banner SVG ancho">
  <svg xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 520 88"
       width="100%"
       role="img"
       aria-label="Tuiter.Rocks — internet de barrio, pero federado">
    <defs>
      <linearGradient id="trbg-enlaza-1" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#6a0dad"/>
        <stop offset="100%" stop-color="#aa5c28"/>
      </linearGradient>
      <filter id="trshadow-enlaza-1">
        <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.28"/>
      </filter>
    </defs>
    <rect width="520" height="88" rx="12" fill="url(#trbg-enlaza-1)"/>
    <rect x="4" y="4" width="512" height="80" rx="9" fill="none" stroke="#ffffff" stroke-width="2" stroke-dasharray="7 5" opacity="0.75"/>
    <circle cx="46" cy="44" r="25" fill="#ffffff"/>
    <text x="46" y="51" text-anchor="middle" font-size="24" font-family="Arial, Helvetica, sans-serif">🦝</text>
    <text x="84" y="36" font-family="Arial, Helvetica, sans-serif" font-size="22" font-weight="700" fill="#ffffff" filter="url(#trshadow-enlaza-1)">TUITER.ROCKS</text>
    <text x="84" y="58" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#fff7f2">internet de barrio, pero federado</text>
    <rect x="392" y="28" width="102" height="32" rx="6" fill="#ffffff"/>
    <text x="443" y="49" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#aa5c28">ENTRAR</text>
  </svg>
</a>

Botón SVG retro 88×31

<a href="https://tuiter.rocks" target="_blank" rel="noopener" aria-label="Tuiter.Rocks botón SVG retro">
  <svg xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 88 31"
       width="120"
       role="img"
       aria-label="Tuiter.Rocks botón retro">
    <rect width="88" height="31" rx="3" fill="#aa5c28"/>
    <rect x="1.5" y="1.5" width="85" height="28" rx="2" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.9"/>
    <text x="44" y="13" text-anchor="middle" font-size="7" fill="#fff7f2" font-family="Arial, Helvetica, sans-serif">🦝</text>
    <text x="44" y="22" text-anchor="middle" font-size="9" fill="#ffffff" font-family="Arial, Helvetica, sans-serif" font-weight="700">TUITER.ROCKS</text>
  </svg>
</a>

Cómo cambiar el tamaño de los badges

Sí, puedes hacerlos más pequeños, más grandes o más exagerados que una bio de instancia. No hace falta rehacer nada: normalmente basta con tocar el tamaño de la imagen, el padding o la fuente.

Regla rápida: si ves algo como height:34px, padding:8px 16px o font-size:18px, eso es exactamente lo que cambia el tamaño visual del badge.

Ejemplo 1 · Cambiar el tamaño del logo

style=»height:34px»

Puedes sustituirlo por:

28px si lo quieres más discreto
40px si lo quieres más visible
56px si quieres que entre con energía de cartel

Ejemplo 2 · Cambiar el espacio interior del badge

style=»padding:8px 16px»

Si aumentas esos números, el botón respira más. Si los bajas, queda más compacto.

6px 12px = pequeño
8px 16px = normal
12px 22px = grande

Ejemplo 3 · Cambiar el tamaño del texto

style=»font-size:13px»

Muy útil en los banners, donde el texto secundario puede quedarse pequeño o demasiado tímido.

Consejo práctico: si vas a poner un badge en una sidebar o en el pie de página, mejor pequeño. Si lo vas a poner dentro de un artículo o en una página de recursos, puedes usar el tamaño mediano o banner completo.

Y sí: también puedes cambiar colores, bordes y textos. Si mantienes el enlace a tuiter.rocks o a la guía del Fediverso, no nos vamos a enfadar por tunearlo un poco.

Preguntas frecuentes

¿Puedo cambiar el tamaño del badge?
Sí. Basta con modificar valores como height, padding o font-size dentro del código.

¿Puedo cambiar los colores?
Sí. Puedes adaptar colores, bordes y texto a tu web mientras mantengas el enlace correcto.

¿Sirven estos badges para cualquier web?
Sí. Están pensados para copiar y pegar en HTML y funcionan en blogs, webs personales y sitios estáticos.

¿Puedo enlazar una guía concreta en vez de la portada?
Sí. Ya tienes un badge específico para enlazar directamente a la guía principal de Mastodon y el Fediverso.

¿Y los banners SVG?
También. Son ligeros, escalables y se ven mucho mejor en pantallas retina y móviles que una imagen rasterizada cutre.

¿Prefieres imprimir carteles o pegatinas? En la página de difusión tienes materiales listos para imprimir.

¿Usas alguno de estos badges en tu web? Escríbenos en @TuiterRocks y lo compartimos.

Si valoras espacios pequeños y cuidados

Apoyo económico

Para mantener los servidores funcionando y seguir creando contenido libre y sin anuncios.

Hacer una donación

Difundir

Compartir estas guías y estos badges ya es apoyar el proyecto. Gracias en serio.

Entrar en TuiterRocks

Una instancia en español, pequeña a propósito, con registro abierto.

Crear cuenta

¡Código copiado al portapapeles!