> ## 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.

# Post button

> Adicione um Post button ao seu site com marcação HTML e widgets.js para permitir que visitantes compartilhem conteúdo no X com texto pré-preenchido, hashtags e atribuição via.

O Post button é um pequeno botão exibido no seu site para ajudar visualizadores a compartilhar facilmente seu conteúdo no X. Um Post button consiste em duas partes: um [link para o Post composer no x.com](/x-for-websites/post-button/guides/web-intent) e o JavaScript do X for Websites para aprimorar o link com o reconhecível Post button.

O site [publish.x.com](https://publish.x.com) oferece uma abordagem simples, baseada em formulário, para gerar marcação HTML para um Post button que você pode copiar e colar no template do seu site.

Um [evento post](/x-for-websites/javascript-api/guides/javascript-api) é disparado em sua página web quando o Post button é tocado ou clicado.

## Como adicionar um Post button ao seu site

1. Crie um novo elemento âncora com uma classe `twitter-share-button` para permitir que o JavaScript do X for Websites descubra o elemento e aprimore o link em um Post button. Defina um valor de atributo `href` como `https://x.com/intent/tweet` para criar um link para o compositor de web intent do X.

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

2. Pré-preencha o texto do Post e sugira contas relacionadas personalizando os parâmetros de query do [Post web intent](/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. Personalize os [parâmetros do Post button](/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. Carregue de forma assíncrona [o JavaScript do X for Websites usando nosso snippet de carregamento](/x-for-websites/javascript-api/guides/set-up-x-for-websites). O snippet JavaScript verificará se existe uma versão existente já na página, inicializará uma fila de funções a serem executadas quando o JavaScript de widgets tiver carregado, e carregará o JavaScript de widgets de forma assíncrona do CDN do X.

## Componentes de texto do Post

### text

Um parâmetro `text` aparece pré-selecionado em um Post composer. O autor do Post pode facilmente remover o texto com uma única ação de deletar.

O parâmetro `text` pode ser preenchido automaticamente a partir do elemento `<title>` da página web, se não for definido explicitamente.

### url

O parâmetro `url` contém uma URL absoluta HTTP ou HTTPS a ser compartilhada no X. A URL compartilhada será [automaticamente encurtada](https://support.x.com/articles/78124-how-to-post-shortened-links-urls) em um Post publicado. Um [Card](https://dev.x.com/cards/overview) pode aparecer para uma URL compartilhada.

O parâmetro `url` pode ser preenchido automaticamente a partir de um [elemento canonical link](http://en.wikipedia.org/wiki/Canonical_link_element) (`<link rel="canonical">`) ou do [location.href](https://html.spec.whatwg.org/multipage/browsers.html#the-location-interface) da página quando não definido explicitamente.

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

### hashtags

Adicione uma lista separada por vírgulas de `hashtags` a um Post usando o parâmetro `hashtags`. Omita um "#" precedente de cada hashtag; o Post composer adicionará automaticamente a hashtag separada por espaço adequada por idioma.

### via

Atribua a origem de um Post a um username do X usando o parâmetro `via`. A atribuição aparecerá em um Post como "`via @username`" traduzida no idioma do autor do Post.

Um parâmetro `via` pode ser preenchido automaticamente a partir de um elemento link ou âncora vinculado a uma página de perfil do X com um token de relacionamento `me`.

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

## Personalização do botão

### Tamanho

Adicione um valor de atributo `data-size` como `large` para exibir um Post button maior.