Facebook comparte enlace sin JavaScript

137

El siguiente enlace es para compartir una página en Twitter:

¿Existe una opción similar para Facebook que no requiera JavaScript?

Sé acerca de http://facebook.com/sharer.php , pero eso requiere que se inserte un parámetro get manualmente (que no voy a hacer), o con JavaScript (que no se ajusta a mi situación).

facebook facebook-like facebook-sharer

— Diseñador web
fuente

190

Podrías usar

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

Actualmente no hay una opción para compartir sin pasar la URL actual como parámetro. Puede usar una forma indirecta para lograr esto.

Cree una página del lado del servidor, por ejemplo: "/sharer.aspx"
Enlace esta página cuando desee la funcionalidad de compartir.
En el "sharer.aspx" obtenga la URL de referencia y redirija al usuario a " https://www.facebook.com/sharer/sharer.php?u= {referer}"

Ejemplo 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
fuente

Sí, esta es una buena opción. Pero si quiero que esto se abra en una ventana emergente como la versión js, ¿qué debo hacer? ¡En este momento se está abriendo en una nueva pestaña! Gracias !

— Sagiruddin Mondal

Esto no es lo que estaba pidiendo. Esto requiere que conozca la URL de la página que se comparte, por lo que puede reemplazar "#url" en su hrefcon la URL de la página. Sin embargo, el uso del enlace twitter.com/share no requiere que inserte la URL de la página que comparte.

— Web_Designer

1

¿Sabes cómo enviar una imagen?

— miguelmpn

@miguelmpn (y el lector más nuevo), vea esta respuesta . En resumen: og:imageetiqueta.

— Mosh Feu

¿Existe documentación para este método en particular?

— Naved Khan

129

Ps 2: como señaló Justin , echa un vistazo al nuevo cuadro de diálogo Compartir de Facebook . Dejaré la respuesta como está para la posteridad. Esta respuesta es obsoleta.

Respuesta corta, sí, hay una opción similar para Facebook, que no requiere JavaScript (bueno, hay algunos JS en línea mínimos que no son obligatorios, ver nota).

Ps: La onclickparte solo te ayuda a personalizar un poco la ventana emergente, pero no es necesario para que el código funcione ... funcionará bien sin ella.

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>

Gorjeo

<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
fuente

@superluminary ... tiene pero no lo requiere. Mencioné que puedes eliminarlo (la parte onclick) ... y seguirá funcionando. Pero puedo ver cómo no todo está 100% claro ... Lo editaré.

— King'ori Maina

2

¡Buen ejemplo de degradación elegante!

— Arnold Daniels

66

+1. Debería cambiar http://www.facebook.com/sharer.phpahttp://www.facebook.com/sharer/sharer.php

— Nir Levy

1

Actualizaría esta respuesta para señalar a las personas que usen el cuadro de diálogo Compartir como lo indica Facebook.

— Justin Skiles

¿Qué es el TWITTER_HANDLEparámetro?

— hamidfzm

38

Es posible incluir JavaScript en su código y aún admitir usuarios que no sean JavaScript.

Si un usuario hace clic en cualquiera de los siguientes enlaces sin JavaScript habilitado, simplemente abrirá una nueva pestaña:

<!-- 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>

Debido a que contienen la share-popupclase, podemos hacer referencia a ellos fácilmente en jQuery y cambiar el tamaño de la ventana para adaptarlo al dominio desde el que estamos compartiendo:

$ (". share-popup"). click (function () {
    var window_size = "ancho = 585, altura = 511";
    var url = this.href;
    dominio var = url.split ("/") [2];
    conmutador (dominio) {
        caso "www.facebook.com":
            window_size = "ancho = 585, alto = 368";
            descanso;
        caso "www.twitter.com":
            window_size = "ancho = 585, altura = 261";
            descanso;
        caso "plus.google.com":
            window_size = "ancho = 517, alto = 511";
            descanso;
    }
    window.open (url, '', 'barra de menú = no, barra de herramientas = no, redimensionable = sí, barras de desplazamiento = sí,' + tamaño_ventana);
    falso retorno;
});

No más JavaScript en línea feo o innumerables alteraciones en el tamaño de las ventanas. Y todavía es compatible con usuarios que no sean JavaScript.

— rybo111
fuente

Buena solución! Además, estoy usando algunos JavaScript para completar la URL de la página actual:

$(".share-popup").each(function(){ 		var href = $( this ).attr( "href" ); 		href = href.replace( "URL_HERE", document.URL ); 		$( this ).attr( "href", href ); 	});

— GavinoGrifoni

@GavinoGrifoni es mejor incluir el URL actual del lado del servidor para admitir usuarios que no sean JavaScript

— rybo111

12

Pruebe estos tipos de enlaces realmente funciona para mí.

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
fuente

7

Puede usar la opción "URL directa" de la URL del feed, como se describe en la página del cuadro de diálogo Feed :

También puede abrir un cuadro de diálogo de feed dirigiendo explícitamente al usuario al punto final / 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 ya no mencionan "compartir" en ninguna parte de sus documentos; Esto ha sido reemplazado por el concepto de agregar a su feed.

— Jordan Reiter
fuente

2

¿Pero no es posible acceder a ese diálogo sin registrar una ID de aplicación?

— Eli

7

Sé que es un hilo viejo, pero tuve que hacer algo así para un proyecto y quería compartir la solución de 2019.

La nueva dialogAPI puede obtener parámetros y usarse sin javascript.

Los params son:

app_id (Necesario)
href La URL de la página que desea compartir, en caso de que no haya pasado ninguna, utilizará la URL actual.
hashtagtiene que tener el #símbolo por ejemplo #amsterdam
quote texto para ser compartido con el enlace

Puede crear un href sin javascript, lo que sea.

<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 fragmento

Una cosa a tener en cuenta es que Facebook está utilizando Open Graph, por lo que en caso de que sus etiquetas OG no estén configuradas correctamente, es posible que no obtenga los resultados que desea.

— Shahar
fuente

Gracias por publicar esta respuesta. Sin embargo, me sale el error

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 estoy en localhost. ¿Algunas ideas? He tratado de incluir varios dominios en la configuración Basicy Advanceden FB, pero no tuve suerte.

— padawanTony

No parece que display=popupesté funcionando en el escritorio.

— Nicke Manarin

6

Muchas de estas respuestas ya no se aplican, así que aquí está la mía:

Utilice el cuadro de diálogo Compartir descrito en la página de desarrollo de Facebook .

Ejemplo:

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

Pero debe poner su app_id registrado, el href y una uri de redireccionamiento.

— Justin Skiles
fuente

redirect_uriYa no es necesario.

— Mori

4

Visite el sitio web y obtendrá enlaces para compartir en Facebook, Google + y Twitter http://www.sharelinkgenerator.com/

— Mazhar Iqbal
fuente

3

http://facebook.com/sharer.php está en desuso

Tiene algunas opciones (use la versión de 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
fuente

1

(use la versión de iframe)

— DMCS

Esto no es realmente lo que estoy buscando. Solo quiero usar un elemento de anclaje.

— Web_Designer

Lo siento, entonces no tienes suerte. Es Javascript o iFramed.

— DMCS

3

Estoy diciendo que si el usuario tiene JavaScript deshabilitado, no podrá compartir la página en Facebook. Me preguntaba si había un enlace similar como twitter.com/share pero para facebook.

— Web_Designer

1

@Flimm Consulte developers.facebook.com/bugs/252983554810810 y lea el comentario de Noorin. {quote} Noorin Ladhani · · Equipo de Facebook Hola Ronald: el botón Compartir ha quedado en desuso a favor del botón Me gusta. {quote}

— DMCS

3

En caso de que quiera compartir en más foros, aquí está la solución. Https://github.com/bradvin/social-share-urls

— Ahmad Hassan
fuente

¡Ese es un gran proyecto! Puede obtener las URL de su esencia: gist.github.com/HoldOffHunger/1998b92acb80bc83547baeaff68aaaf4

— Fabian von Ellerts el

2

Para aquellos que desean usar javascript pero no quieren usar la biblioteca javascript de 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 incluso si JavaScript está deshabilitado, pero le ofrece una ventana emergente con vista previa compartida si JavaScript está habilitado.

Ahorra un clic de agujas sin utilizar ningún spyware de Facebook js :)

— Marek Andreansky
fuente

¿Hay alguna manera de abrirlo en una nueva pestaña? En este momento está escribiendo una ventana emergente

— Alauddin Ahmed

2

Agregando a la solución de @ rybo111, esto es lo que sería un recurso compartido de 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>

y agregue esto a su Javascript:

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

Según la documentación de LinkedIn: https://developer.linkedin.com/docs/share-on-linkedin (consulte la sección "URL personalizada")

Para cualquiera que esté interesado, usé esto en una aplicación Rails con un logotipo de LinkedIn, así que aquí está mi código si podría ayudar:

<%= 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
fuente

1

Cómo compartir contenido: https://developers.facebook.com/docs/share/

Debe elegir usar la función en desuso sin JS, y verificar todos los días, o seguir la forma de usar JS y divertirse.

— Sándor Tóth
fuente