Botão Salvar

Com o botão Salvar, as pessoas podem salvar itens ou serviços em uma lista particular no Facebook, compartilhar com os amigos e receber notificações relevantes. Por exemplo, o usuário pode salvar o link de uma peça de roupa ou de uma viagem que está planejando e voltar a essa lista para adquirir o item futuramente ou para receber uma notificação quando esse item estiver em promoção.

Configurador do botão SalvarExemplo de códigoConfigurações

Passo a passo

1. Escolher o link para o site

Escolha o link de um site que deseja usar com o botão Salvar.

2. Configurador de código

Cole o link no Configurador de código e clique no botão “Obter código” para gerar o código do botão Salvar.

3. Copie e cole o trecho de código no HTML

Copie e cole o trecho de código no HTML do site de destino.

Configurador do botão Salvar

Link de um site ou produto a salvar
Tamanho do botão

Exemplo de código completo

Copie e cole o exemplo de código no seu site. Ajuste o valor data-uri para o link do site. Em seguida, use a tag <title> para ajustar o título salvo.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your save button code -->
  <div class="fb-save" 
    data-uri="http://www.your-domain.com/your-page.html">
  </div>

</body>
</html>
Experimente!

Configurações

Além das configurações acima, também é possível alterar o seguinte:

Configuração Atributo HTML5 Descrição Padrão

uri

data-uri

O link absoluto da Página que será salvo.

Endereço/link atual

Botão Salvar para produtos

Você pode também usar o botão Salvar para produtos:

1. Configurar o catálogo de produtos

Para usar o botão Salvar com produtos, primeiro configure um catálogo de produtos.

Um catálogo ou feed de produtos consiste em uma lista de produtos que você deseja anunciar no Facebook. Todos os produtos da lista dispõem de atributos específicos que podem ser usados para gerar um número de identificação, o nome, a descrição, a URL da página de chegada, a URL da imagem e a disponibilidade do produto no anúncio, dentre outros.

Como criar um catálogo de produtosAnúncios de produtos dinâmicos do Facebook

2. ID da API do Facebook

Vá para a guia configurações do painel do aplicativo, adicione o "Site" da plataforma e forneça o domínio do seu site.

3. Carregamento do JavaScript SDK

Carregue o JavaScript SDK usando sua ID de aplicativo como mostrado no exemplo abaixo. Substitua {your-app-id} pelo ID do aplicativo.

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId={your-app-id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Obter o URI do produto

Por meio do Gerenciador de Negócios

Há duas informações que você precisa para usar o botão Salvar para produtos, a ID do catálogo de produtos e a ID do item do seu feed de produtos:

  1. Cadastre seu negócio no Gerenciador de Negócios.
  2. Acesse "Configurações de negócios" > "Catálogo de Produtos".
  3. Clique no catálogo de produtos que você deseja usar para o plugin.
  4. Abaixo do título do nome do Catálogo de Produtos, anote a ID do Catálogo de Produtos. Em nosso exemplo, ela é 768856339915012.
  5. A outra informação necessária é a ID do item que foi carregada no feed de produtos. Para ver exemplos do feed de produtos, clique na ID do Catálogo de Produtos.
  6. Na próxima página, clique em Feeds de Produtos na parte superior.
  7. Clique no feed que contém os itens que você deseja usar.
  8. Na próxima página, você verá um exemplo de itens do seu feed. Para que o plugin identifique seu produto, precisaremos da ID do Item listada no seu feed para cada produto.
  9. O URI do plugin segue o padrão de product://<catalog_id >/{retailer_id}. Portanto, se nós quiséssemos criar um URI para o produto chamado Product #45 no exemplo acima, ele seria assim: product://768856339915012/45 (onde a ID do catálogo do produto veio na etapa 5).

Pela Graph API

Você pode obter o URI do seu produto por meio da Graph API. Ao carregar um único ou vários itens de produtos crie o seguinte formato de URL ao substituir <catalog_id> com a ID de catálogo e <retailer_id> com a ID de vendedor do produto:

product://<catalog_id>/<retailer_id>

Saiba mais nos documentos de item do produto.

5. URI do produto

No código do botão Salvar, use o URI do produto para data-uri. Por exemplo, para o URI do produto product://949817451770475/143791832 seu código seria o seguinte:

<div class="fb-save" 
  data-uri="product://949817451770475/143791832">
</div>

Visualização de itens Salvos

Todos os links salvos são adicionados à visualização de itens Salvos, que você pode encontrar em www.facebook.com/saved ou para aplicativos móveis navegando para Mais -> Salvos.

Exemplo

Links salvos

Como mudar o idioma

É possível alterar o idioma do botão Salvar carregando uma versão localizada do SDK do Facebook para JavaScript. Quando você carregar o SDK, altere o valor de js.src para usar sua localidade. Substitua en_US pela sua localidade, por exemplo, fr_FR para usar francês (França):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

As localidades compatíveis estão listadas no arquivo XML de localidades do Facebook.

Talvez você tenha que ajustar a largura do Plugin Social para acomodar idiomas diferentes. Para saber mais, consulte a página Localização e tradução.