> ## Documentation Index
> Fetch the complete documentation index at: https://docs.x.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Botón Post

> Añade un botón Post a tu sitio web con marcado HTML y widgets.js para permitir que los visitantes compartan contenido en X con texto prerrellenado, hashtags y atribución via.

El botón Post es un pequeño botón que se muestra en tu sitio web para ayudar a los usuarios a compartir fácilmente tu contenido en X. Un botón Post consta de dos partes: un [enlace al compositor de Posts en x.com](/x-for-websites/post-button/guides/web-intent) y el JavaScript de X for Websites para enriquecer el enlace con el reconocible botón Post.

El sitio [publish.x.com](https://publish.x.com) ofrece un método sencillo basado en formularios para generar marcado HTML de un botón Post que puedes copiar y pegar en la plantilla de tu sitio.

Un [evento post](/x-for-websites/javascript-api/guides/javascript-api) se activa en tu página web cuando se toca o se hace clic en el botón Post.

## Cómo añadir un botón Post a tu sitio web

1. Crea un nuevo elemento ancla con la clase `twitter-share-button` para permitir que el JavaScript de X for Websites descubra el elemento y lo convierta en un botón Post. Establece el valor del atributo `href` en `https://x.com/intent/tweet` para crear un enlace al compositor de web intents de X.

```html theme={null}
<a class="twitter-share-button"
  href="https://x.com/intent/tweet">
Post</a>
```

2. Prerrellena el texto del Post y sugiere cuentas relacionadas personalizando los [parámetros de consulta del web intent de Post](/x-for-websites/post-button/guides/web-intent).

```html theme={null}
<a class="twitter-share-button"
  href="https://x.com/intent/tweet?text=Hello%20world">
Post</a>
```

3. Personaliza los [parámetros del botón Post](/x-for-websites/post-button/guides/parameter-reference) usando atributos `data-*`.

```html theme={null}
<a class="twitter-share-button"
  href="https://x.com/intent/tweet?text=Hello%20world"
  data-size="large">
Post</a>
```

4. Carga de forma asíncrona [el JavaScript de X for Websites usando nuestro fragmento de carga](/x-for-websites/javascript-api/guides/set-up-x-for-websites). El fragmento de JavaScript comprobará si existe una versión previa en la página, inicializará una cola de funciones que se ejecutará una vez que el JavaScript de los widgets se haya cargado, y cargará el JavaScript de los widgets de forma asíncrona desde el CDN de X.

## Componentes del texto del Post

### text

Un parámetro `text` aparece preseleccionado en el compositor del Post. El autor del Post puede eliminar fácilmente el texto con una única acción de borrado.

El parámetro `text` puede autorrellenarse desde el elemento `<title>` de la página web si no se establece explícitamente.

### url

El parámetro `url` contiene una URL absoluta HTTP o HTTPS para compartir en X. La URL compartida se [acortará automáticamente](https://support.x.com/articles/78124-how-to-post-shortened-links-urls) en un Post publicado. Puede aparecer una [Card](https://dev.x.com/cards/overview) para una URL compartida.

El parámetro `url` puede autorrellenarse desde un [elemento de enlace canónico](http://en.wikipedia.org/wiki/Canonical_link_element) (`<link rel="canonical">`) o desde el [location.href](https://html.spec.whatwg.org/multipage/browsers.html#the-location-interface) de la página cuando no se establece explícitamente.

```html theme={null}
<link rel="canonical"
  href="/web/tweet-button">
```

### hashtags

Añade una lista separada por comas de `hashtags` a un Post usando el parámetro `hashtags`. Omite el “#” inicial de cada hashtag; el compositor del Post añadirá automáticamente el hashtag correctamente separado por espacios según el idioma.

### via

Atribuye la fuente de un Post a un nombre de usuario de X usando el parámetro `via`. La atribución aparecerá en un Post como “ `via @username`”, traducido al idioma del autor del Post.

Un parámetro `via` puede autorrellenarse desde un elemento link o anchor enlazado a una página de perfil de X con un token de relación `me`.

```html theme={null}
<link rel="me"
  href="https://x.com/XDevelopers"
>
```

## Personalización del botón

### Tamaño

Añade el valor `large` al atributo `data-size` para mostrar un botón Post más grande.
