Bouton de partage Facebook et texte personnalisé [fermé]

93

Existe-t-il un moyen de créer un bouton de partage Facebook qui affiche un texte personnalisé sur le mur ou le fil d'actualité?

Neir0
la source
duplication possible du champ de message Personnaliser sur Facebook Partager
Mike Lyons

Réponses:

94

Nous utilisons quelque chose comme ceci [utiliser dans une ligne]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>
AllisonC
la source
4
Savez-vous comment ouvrir ce lien dans une fenêtre contextuelle ou modale? Impossible de trouver une méthode qui fonctionne, ce n'est pas aussi simple que d'utiliser un code de fenêtre contextuelle générique ...
tvgemert
1
Plus efficace que la réponse en haut.
Mateng
29
@tvgemert: Essayez <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>etc.
Mateng
Parfait, cela fonctionne également pour les URL de hashbang!
dvtoever
73
Cela ne fonctionne plus.
Chuck Le Butt
30

Pour donner des paramètres personnalisés au partage Facebook, il est préférable de ne donner que le lien et Facebook obtient son titre + description + image automatiquement à partir de la page que vous partagez. Pour "aider" l'API Facebook à trouver ces éléments, vous pouvez mettre les éléments suivants dans l'en-tête de la page que vous partagez:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Vérifiez ici

Si la page n'est pas sous votre contrôle, utilisez ce qu'AllisonC a partagé ci-dessus.

Pour le comportement de type popup modalview:

Utilisez votre propre bouton / lien / texte et vous pouvez ensuite utiliser un type de vue modale de popup de cette façon:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

où twitterbtn-link et facebookbtn-link sont tous les deux des identifiants d'ancres.

ShayanK
la source
Si les URL sont identiques, les données des méta-propriétés sont-elles mises en cache par Facebook? Ou puis-je insérer, par exemple, des données POST individuelles avec chaque page vue?
Mateng
Je n'ai pas compris ce que vous entendez par là.
ShayanK
Je viens de rencontrer ça. J'ai un code J'aime / Partage sur ma page d'accueil qui est configuré pour aimer / partager la page Facebook associée à mon entreprise. Il semble ignorer les balises meta facebook que j'ai sur la page. Quelqu'un a rencontré ce problème?
Chris Hawkins
1
Cette méthode ne semble plus fonctionner. Je pense que la seule façon d'obtenir un bouton de partage Facebook personnalisé (avec votre propre texte, titre et image) est d'utiliser le SDK Facebook.
Ryan Coolwebs
Excellente solution, pour le rendre aussi moderne if( window.open(.....) ) event.preventDefault();au lieu de simplement `retourner faux; ˙! - de cette façon, il empêche uniquement le comportement par défaut (lien ouvert) lorsque la fenêtre a été ouverte - fournit une solution de secours quand ce n'était pas le cas ...
jave.web
12

utiliser cette fonction dérivée du lien fourni par IJas

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Ou vous pouvez également utiliser la dernière fonction FB.ui si vous utilisez le SDK JavaScript FB pour une fonction de rappel plus contrôlée.

se référer: FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }
Bhavesh B
la source
ce FB.ui est peut-être l'approche la plus fiable, de plus vous pouvez charger ce script au bas de votre page avec le reste de votre javascript, et charger des variables / sélecteurs jquery comme valeurs. Merci d'avoir publié ceci.
klewis
@blackhawk ... mais FB.ui nécessite également app_id - ce n'est pas toujours une option ... :)
jave.web
@Bravesh B En cherchant dans la documentation relative à FB.ui que vous avez liée, je n'ai pas trouvé les paramètres que vous passez à FB.ui comme image, légende, description. Pouvez-vous me dire où les avez-vous trouvés?
Ferex
@Ferex vous pouvez trouver les paramètres ici developer.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B
1
Depuis le 18 avril 2017, les paramètres suivants ne sont plus pris en charge par les versions 2.9 et supérieures de l'API Graph. Pour les versions 2.8 et inférieures, les paramètres continueront de fonctionner jusqu'au 17 juillet 2017.
Goran Jakovljevic
9

Vous avez plusieurs options:

  1. Utilisez le bouton de partage FB standard et définissez le texte via l' API Open Graph et les balises méta sur votre page.
  2. Au lieu de partager, utiliser FB.ui méthode stream.publish de qui nous allons vous contrôlez l'URL, le titre, la légende, la description et la vignette à l' exécution.
  3. Ou utilisez http://www.facebook.com/sharer.php avec les paramètres appropriés.
Kon
la source
2
Pouvez-vous élaborer sur ce dernier? Quels sont ces paramètres?
Jeroen Vannevel
6

Vous pouvez personnaliser la boîte de dialogue de partage Facebook en utilisant le SDK JavaScript asynchrone fourni par Facebook et en définissant ses valeurs de paramètres

Jetez un œil au code suivant:

<script type="text/javascript">
  $(document).ready(function(){
    $('#share_button').click(function(e){
      e.preventDefault();
      FB.ui(
        {
          method: 'feed',
          name: 'This is the content of the "name" field.',
          link: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Avant de copier et coller le code ci-dessous, vous devez d'abord initialiser le SDK et configurer la bibliothèque jQuery. Veuillez cliquer ici pour savoir une étape par étape comment définir des informations sur le même.

Virat Gaywala - CSM
la source
3

C'est la solution actuelle (décembre 2014) et fonctionne assez bien. Il comporte

  • ouvrir une fenêtre contextuelle
  • extrait autonome, ne nécessite rien d'autre
  • fonctionne avec ou sans JS. Si JS est désactivé, la fenêtre de partage s'ouvre toujours, mais pas comme une petite fenêtre contextuelle.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var doit être défini comme l'URL à partager.

Aleemb
la source
cela ne fonctionne pas dans mon cas où ma page commence par https ...?
d4v1dv00
1
Cette réponse n'est plus valide maintenant, car Facebook a cessé de prendre en charge d'autres paramètres dans le partage
Vikrant
0

Il s'agit d'un simple flux de dialogue proposé par Facebook. Lire ici pour plus de détails lien

Joueur du monde
la source
-2

vous pouvez combiner l'idée d'AllisonC avec la window.openfonction: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

Et puis sur chaque lien, vous appelez la fonction openWin avec la bonne URL de réseau social.

Txugo
la source
-3

Essayez ce site http://www.sharelinkgenerator.com/ . J'espère que cela t'aides.

Ijas Ameenudeen
la source
3
Cela ne résout pas le problème où les gens recherchent des titres / descriptions personnalisés
Eddie
avec votre solution, il n'est pas possible de mettre du texte personnalisé avec facebook veuillez donner une autre solution
RaviPatidar