Lien de partage Facebook sans JavaScript

Réponses:

190

Vous pourriez utiliser

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

Actuellement, il n'y a pas d'option de partage sans passer l'url actuelle en tant que paramètre. Vous pouvez utiliser un moyen indirect pour y parvenir.

  1. Créez une page côté serveur par exemple: "/sharer.aspx"
  2. Liez cette page chaque fois que vous voulez la fonctionnalité de partage.
  3. Dans le "sharer.aspx", récupérez l'URL de référence et redirigez l'utilisateur vers " https://www.facebook.com/sharer/sharer.php?u= {referer}"

Exemple de code 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
la source
oui c'est une belle option. Mais si je veux que cela s'ouvre dans une fenêtre contextuelle comme la version js, que dois-je faire? En ce moment, il s'ouvre dans un nouvel onglet! Merci !
Sagiruddin Mondal
Ce n'est pas ce que je demandais. Cela nécessite que vous connaissiez l'URL de la page partagée, vous pouvez donc remplacer "#url" dans votre hrefpar l'URL de la page. Cependant, l'utilisation du lien twitter.com/share ne vous oblige pas à insérer l'URL de la page que vous partagez.
Web_Designer
1
Savez-vous comment envoyer une image?
miguelmpn
@miguelmpn (et le lecteur le plus récent), voyez cette réponse . En bref: og:imagetag.
Mosh Feu
Existe-t-il de la documentation pour cette méthode particulière?
Naved Khan le
129

Ps 2: Comme l'a souligné Justin , consultez la nouvelle boîte de dialogue Partager de Facebook . Laissera la réponse telle quelle pour la postérité. Cette réponse est obsolète

Réponse courte, oui, il existe une option similaire pour Facebook, qui ne nécessite pas de javascript (enfin, il existe un JS en ligne minimal qui n'est pas obligatoire, voir note).

Ps: La onclickpartie vous aide seulement à personnaliser un peu la popup mais n'est pas nécessaire pour que le code fonctionne ... cela fonctionnera très bien sans elle.

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
la source
@superluminary ... il l'a fait mais ne l'exige pas. J'avais mentionné que vous pouvez le supprimer (la partie onclick) ... et cela fonctionnera toujours. Mais je peux voir comment tout n'est pas clair à 100% ... Je vais le modifier.
King'ori Maina le
2
Bel exemple de dégradation gracieuse!
Arnold Daniels
6
+1. Devrait changer http://www.facebook.com/sharer.phppourhttp://www.facebook.com/sharer/sharer.php
Nir Levy
1
Je mettrais à jour cette réponse pour indiquer aux gens d'utiliser la boîte de dialogue Partager comme indiqué par Facebook.
Justin Skiles
Qu'est-ce que le TWITTER_HANDLEparamètre?
hamidfzm
38

Il est possible d'inclure JavaScript dans votre code tout en prenant en charge les utilisateurs non-JavaScript.

Si un utilisateur clique sur l'un des liens suivants sans activer JavaScript, il ouvrira simplement un nouvel onglet:

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

Comme ils contiennent la share-popupclasse, nous pouvons facilement les référencer dans jQuery et modifier la taille de la fenêtre en fonction du domaine à partir duquel nous partageons:

$ (". share-popup"). click (function () {
    var window_size = "largeur = 585, hauteur = 511";
    var url = this.href;
    domaine var = url.split ("/") [2];
    commutateur (domaine) {
        cas "www.facebook.com":
            window_size = "largeur = 585, hauteur = 368";
            Pause;
        cas "www.twitter.com":
            window_size = "largeur = 585, hauteur = 261";
            Pause;
        cas "plus.google.com":
            window_size = "largeur = 517, hauteur = 511";
            Pause;
    }
    window.open (url, '', 'menubar = no, toolbar = no, resizable = yes, scrollbars = yes,' + window_size);
    retourner faux;
});

Plus de JavaScript en ligne laid, ni d'innombrables modifications de taille de fenêtre. Et il prend toujours en charge les utilisateurs non-JavaScript.

rybo111
la source
Belle solution! De plus, j'utilise du javascript pour remplir l'URL de la page actuelle:$(".share-popup").each(function(){ var href = $( this ).attr( "href" ); href = href.replace( "URL_HERE", document.URL ); $( this ).attr( "href", href ); });
GavinoGrifoni
@GavinoGrifoni il est préférable d'inclure l'URL actuelle côté serveur pour prendre en charge les utilisateurs non-JavaScript
rybo111
12

Essayer ces types de liens fonctionne vraiment pour moi.

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
la source
7

Vous pouvez utiliser l'option "URL directe" de l'URL du flux, comme décrit sur la page Boîte de dialogue du flux :

Vous pouvez également afficher une boîte de dialogue de flux en dirigeant explicitement l'utilisateur vers le point de terminaison / 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`

On dirait qu'ils ne mentionnent plus le «partage» nulle part dans leurs documents; cela a été remplacé par le concept d'ajout à votre flux.

Jordan Reiter
la source
2
Mais il n'est pas possible d'accéder à cette boîte de dialogue sans enregistrer un identifiant d'application?
Eli
7

Je sais que c'est un vieux fil, mais je devais faire quelque chose comme ça pour un projet et je voulais partager la solution 2019.

La nouvelle dialogAPI peut obtenir des paramètres et être utilisée sans JavaScript.

Les paramètres sont:

  • app_id (Obligatoire)
  • href L'URL de la page que vous souhaitez partager, au cas où aucune ne serait passée, utilisera l'URL actuelle.
  • hashtagdoivent avoir le #symbole par exemple #amsterdam
  • quote texte à partager avec le lien

Vous pouvez créer un href sans javascript quoi que ce soit.

<a href="https://www.facebook.com/dialog/feed?&app_id=APP_ID&link=URI&display=popup&quote=TEXT&hashtag=#HASHTAG" target="_blank">Share</a>
Développer l'extrait

Une chose à considérer est que Facebook utilise Open Graph, donc si vos balises OG ne sont pas correctement définies, vous risquez de ne pas obtenir les résultats souhaités.

Shahar
la source
Merci d'avoir publié cette réponse. Cependant, j'obtiens l'erreur que 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.je suis sur localhost. Des idées? J'ai essayé d'inclure plusieurs domaines dans les paramètres Basicet Advancedsur FB mais pas de chance.
padawanTony
Ne semble pas display=popupfonctionner sur le bureau.
Nicke Manarin
6

Beaucoup de ces réponses ne s'appliquent plus, alors voici la mienne:

Utilisez la boîte de dialogue Partager décrite sur la page Facebook Dev .

Exemple:

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

Mais vous devez mettre dans votre app_id enregistré, le href et un uri de redirection.

Justin Skiles
la source
redirect_urin'est plus nécessaire.
Mori
3

http://facebook.com/sharer.php est obsolète

Vous avez quelques options (utilisez la version 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
la source
1
(utilisez la version iframe)
DMCS
Ce n'est pas vraiment ce que je recherche. Je veux juste utiliser un élément d'ancrage.
Web_Designer
Désolé, alors vous n'avez pas de chance. C'est soit Javascript ou iFramed.
DMCS
3
Je dis que si l'utilisateur a désactivé JavaScript, il ne pourra pas partager la page sur Facebook. Je me demandais juste s'il y avait un lien similaire comme twitter.com/share mais pour Facebook.
Web_Designer
1
@Flimm S'il vous plaît voir developer.facebook.com/bugs/252983554810810 et lire le commentaire de Noorin. {quote} Noorin Ladhani · · Équipe Facebook Salut Ronald - Le bouton Partager a été abandonné au profit du bouton J'aime. {quote}
DMCS
2

Pour ceux qui souhaitent utiliser javascript mais ne veulent pas utiliser la bibliothèque 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>

Fonctionne même si javascript est désactivé, mais vous donne une fenêtre contextuelle avec un aperçu du partage si javascript est activé.

Enregistre un clic d'aiguille sans utiliser de logiciel espion Facebook js :)

Marek Andreansky
la source
Y a-t-il un moyen de l'ouvrir dans un nouvel onglet. En ce moment, il ouvre une fenêtre contextuelle
Alauddin Ahmed
2

En plus de la solution de @ rybo111, voici ce que serait un partage 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>

et ajoutez ceci à votre Javascript:

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

Selon la documentation LinkedIn: https://developer.linkedin.com/docs/share-on-linkedin (voir la section «URL personnalisée»)

Pour toute personne intéressée, j'ai utilisé ceci dans une application Rails avec un logo LinkedIn, alors voici mon code si cela peut aider:

<%= 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
la source