Link de compartilhamento do Facebook sem JavaScript

Respostas:

190

Você poderia usar

<a href="https://www.facebook.com/sharer/sharer.php?u=#url" target="_blank">Share</a>

Atualmente, não há opção de compartilhamento sem passar o URL atual como parâmetro. Você pode usar uma maneira indireta para conseguir isso.

  1. Crie uma página do lado do servidor, por exemplo: "/sharer.aspx"
  2. Vincule esta página sempre que desejar a funcionalidade de compartilhamento.
  3. No "sharer.aspx", obtenha o URL de referência e redirecione o usuário para " https://www.facebook.com/sharer/sharer.php?u= {referer}"

Exemplo de código ASP .Net:

public partial class Sharer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var referer = Request.UrlReferrer.ToString();

        if(string.IsNullOrEmpty(referer))
        {
            // some error logic
            return;
        }

        Response.Clear();
        Response.Redirect("https://www.facebook.com/sharer/sharer.php?u=" + HttpUtility.UrlEncode(referer));
        Response.End();
    }
}
— Medeni Baykal
fonte
Sim, esta é uma boa opção. Mas se eu quiser que isso seja aberto em um pop-up como a versão js, ​​o que devo fazer? Neste momento, ele está abrindo em uma nova guia! Obrigado !
— Sagiruddin Mondal
Não era isso que eu estava pedindo. Isso exige que você saiba o URL da página que está sendo compartilhada, para que você possa substituir "#url" no seu hrefpelo URL da página. Usar o link twitter.com/share , no entanto, não exige que você insira o URL da página que está compartilhando.
— Web_Designer 28/11
1
Você sabe como enviar uma imagem?
— miguelmpn
@ miguelmpn (e o leitor mais recente), veja esta resposta . Em resumo: og:imagetag.
— Mosh Feu
Existe documentação para esse método específico?
— precisa saber é o seguinte
129

Ps 2: Como apontado por Justin , confira o novo diálogo de compartilhamento do Facebook . Deixará a resposta como está para a posteridade. Esta resposta é obsoleta

Resposta curta, sim, existe uma opção semelhante para o Facebook, que não requer javascript (bem, há um JS embutido mínimo que não é obrigatório, veja a nota).

Ps: A onclickparte ajuda a personalizar um pouco o pop-up, mas não é necessário para o código funcionar ... ele funcionará bem sem ele.

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Facebook">
</a>

Twitter

<a href="https://twitter.com/share?url=URLENCODED_URL&via=TWITTER_HANDLE&text=TEXT"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" title="Share on Twitter">
</a>
— King'ori Maina
fonte
@ superluminary ... tem, mas não exige. Eu mencionei que você pode removê-lo (a parte do onclick) ... e ainda funcionará. Mas posso ver como tudo não está 100% claro ... vou editá-lo.
— King'ori Maina
2
Belo exemplo de degradação graciosa!
— Arnold Daniels
6
+1. Deve mudar http://www.facebook.com/sharer.phpparahttp://www.facebook.com/sharer/sharer.php
— Nir Levy
1
Eu atualizaria esta resposta para indicar às pessoas que usem o Diálogo Compartilhar, conforme indicado pelo Facebook.
— Justin Skiles
O que é TWITTER_HANDLEparâmetro?
— hamidfzm
38

É possível incluir JavaScript no seu código e ainda oferecer suporte a usuários não JavaScript.

Se um usuário clicar em qualquer um dos seguintes links sem o JavaScript ativado, ele simplesmente abrirá uma nova guia:

<!-- Remember to change URL_HERE, TITLE_HERE and TWITTER_HANDLE_HERE -->
<a href="http://www.facebook.com/sharer/sharer.php?u=URL_HERE&t=TITLE_HERE" target="_blank" class="share-popup">Share on Facebook</a>
<a href="http://www.twitter.com/intent/tweet?url=URL_HERE&via=TWITTER_HANDLE_HERE&text=TITLE_HERE" target="_blank" class="share-popup">Share on Twitter</a>
<a href="http://plus.google.com/share?url=URL_HERE" target="_blank" class="share-popup">Share on Googleplus</a>

Como eles contêm a share-popupclasse, podemos facilmente referenciá-los no jQuery e alterar o tamanho da janela para se adequar ao domínio do qual estamos compartilhando:

$ (". share-popup"). click (function () {
    var window_size = "largura = 585, altura = 511";
    var url = this.href;
    var domain = url.split ("/") [2];
    switch (domínio) {
        caso "www.facebook.com":
            window_size = "width = 585, altura = 368";
            pausa;
        caso "www.twitter.com":
            window_size = "width = 585, altura = 261";
            pausa;
        caso "plus.google.com":
            window_size = "width = 517, height = 511";
            pausa;
    }
    window.open (url, '', 'barra de ferramentas = não, barra de ferramentas = não, redimensionável = sim, barras de rolagem = sim,' + tamanho da janela);
    retorna falso;
});

Não há mais JavaScript embutido feio ou inúmeras alterações no tamanho da janela. E ainda suporta usuários não JavaScript.

— rybo111
fonte
Ótima solução! Além disso, estou usando algum javascript para preencher o URL da página atual:$(".share-popup").each(function(){ var href = $( this ).attr( "href" ); href = href.replace( "URL_HERE", document.URL ); $( this ).attr( "href", href ); });
— GavinoGrifoni 02/02
@GavinoGrifoni é melhor para incluir o server-side URL atual para dar suporte a usuários não-JavaScript
— rybo111
12

Experimente esses tipos de links realmente funciona para mim.

https://www.facebook.com/sharer.php?u=YOUR_URL_HERE
https://twitter.com/intent/tweet?url=YOUR_URL_HERE
https://plus.google.com/share?url=YOUR_URL_HERE
https://www.linkedin.com/shareArticle?mini=true&url=YOUR_URL_HERE
— Asitha Yomal
fonte
7

Você pode usar a opção "URL direto" do URL do feed, conforme descrito na página da caixa de diálogo Feed :

Você também pode abrir um Diálogo de Feed direcionando explicitamente o usuário para o terminal / dialog / feed:

  https://www.facebook.com/dialog/feed?  
  app_id=123050457758183&
  link=https://developers.facebook.com/docs/reference/dialogs/&
  picture=http://fbrell.com/f8.jpg&
  name=Facebook%20Dialogs&
  caption=Reference%20Documentation&
  description=Using%20Dialogs%20to%20interact%20with%20users.&
  redirect_uri=http://www.example.com/response`

Parece que eles não mencionam mais "compartilhamento" em nenhum lugar nos documentos; isso foi substituído pelo conceito de adição ao seu feed.

— Jordan Reiter
fonte
2
Mas não é possível acessar esse diálogo sem registrar um ID do aplicativo?
— Eli
7

Eu sei que é um tópico antigo, mas eu tinha que fazer algo assim para um projeto e queria compartilhar a solução de 2019.

A nova dialogAPI pode obter parâmetros e ser usada sem javascript.

Os parâmetros são:

  • app_id (Requeridos)
  • href O URL da página que você deseja compartilhar, caso nenhum tenha passado, usará o URL atual.
  • hashtagtem que ter o #símbolo, por exemplo, #amsterdam
  • quote texto a ser compartilhado com o link

Você pode criar um href sem qualquer javascript.

<a href="https://www.facebook.com/dialog/feed?&app_id=APP_ID&link=URI&display=popup&quote=TEXT&hashtag=#HASHTAG" target="_blank">Share</a>
Expandir snippet

Uma coisa a considerar é que o Facebook está usando o Open Graph; portanto, se suas tags OG não estiverem definidas corretamente, você poderá não obter os resultados desejados.

— Shahar
fonte
Obrigado por postar esta resposta. No entanto, recebo o erro Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.que estou no host local. Alguma ideia? Tentei incluir vários domínios nas configurações Basice Advancedno FB, mas sem sorte.
— padawanTony 17/03
Parece que não display=popupestá funcionando na área de trabalho.
— Nicke Manarin
6

Muitas dessas respostas não se aplicam mais, então aqui está a minha:

Use o diálogo de compartilhamento descrito na página de desenvolvimento do Facebook .

Exemplo:

https://www.facebook.com/dialog/share?
  app_id=<your_app_id>
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

Mas você precisa colocar seu app_id registrado, o href e um uri de redirecionamento.

— Justin Skiles
fonte
redirect_urinão é mais necessário.
— Mori
3

http://facebook.com/sharer.php está obsoleto

Você tem algumas opções (use a versão iframe):

http://developers.facebook.com/docs/reference/plugins/like/

http://developers.facebook.com/docs/reference/plugins/send/

https://developers.facebook.com/docs/reference/plugins/like-box/

— DMCS
fonte
1
(use a versão iframe)
— DMCS 2/12/12
Não é exatamente isso que estou procurando. Eu só quero usar um elemento de âncora.
— Web_Designer 03/02/12
Desculpe, então você está sem sorte. É Javascript ou iFramed.
— DMCS 03/02/12
3
Estou dizendo que, se o usuário tiver o JavaScript desativado, ele não poderá compartilhar a página no Facebook. Eu só estava me perguntando se havia um link semelhante como twitter.com/share, mas para o facebook.
— Web_Designer 19/04/12
1
@Flimm Por favor, consulte developers.facebook.com/bugs/252983554810810 e leia o comentário de Noorin. {quote} Noorin Ladhani · · Equipe do Facebook Hi Ronald - O botão Compartilhar foi reprovado em favor do botão Curtir. {quote}
— DMCS
2

Para aqueles que desejam usar javascript, mas não desejam usar a biblioteca javascript do Facebook:

<a id="shareFB" href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED_URL&t=TITLE"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"   target="_blank" title="Share on Facebook">Share on Facebook</a>
<script type="text/javascript">document.getElementById("shareFB").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=" + document.URL);</script>

Funciona mesmo se o javascript estiver desativado, mas fornece uma janela pop-up com visualização de compartilhamento se o javascript estiver ativado.

Salva um clique de agulhas sem usar nenhum spyware do Facebook js :)

— Marek Andreansky
fonte
Existe alguma maneira de abri-lo em uma nova guia. Agora sua Pening um pop-up
— Alauddin Ahmed
2

Adicionando à solução de @ rybo111, eis o que seria um compartilhamento do LinkedIn:

<a href="http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}" target="_blank" class="share-popup">Share on LinkedIn</a>

e adicione isso ao seu Javascript:

case "www.linkedin.com":
    window_size = "width=570,height=494";
    break;

De acordo com a documentação do LinkedIn: https://developer.linkedin.com/docs/share-on-linkedin (consulte a seção "URL personalizado")

Para quem estiver interessado, usei isso em um aplicativo Rails com um logotipo do LinkedIn, então aqui está meu código, se ele puder ajudar:

<%= link_to image_tag('linkedin.png', size: "50x50"), "http://www.linkedin.com/shareArticle?mini=true&url=#{job_url(@job)}&title=#{full_title(@job.title).html_safe}&summary=#{strip_tags(@job.description)}&source=SOURCE_URL", class: "share-popup" %>
— Kyle Carlson
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.