web-dev-qa-db-fra.com

Bouton de partage Facebook et texte personnalisé

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

facebook
91
Neir0

Nous utilisons quelque chose comme ceci [utiliser sur 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>
91
AllisonC

Pour donner des paramètres personnalisés au partage facebook, il est préférable de ne donner que le lien et facebook obtient automatiquement son titre + description + image à partir de la page que vous partagez. Pour "aider" l'API facebook à trouver ces éléments, vous pouvez insérer 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" />

Cochez ici

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

Pour le comportement de type popup modalview:

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

<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 les identifiants des ancres.

30
ShayanK

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;
}

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.');
            }
          }
        );
    }
12
Bhavesh B

Vous avez plusieurs options:

  1. Utilisez le bouton FB Share standard et définissez le texte via Open Graph API et les balises META de votre page.
  2. Au lieu de Partager, utilisez la méthode stream.publish de FB.ui , qui vous permet de contrôler l'URL, le titre, la légende, la description et la vignette au moment de l'exécution.
  3. Ou utilisez http://www.facebook.com/sharer.php avec les paramètres appropriés.
8
Kon

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ètre.

Regardez le 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. S'il vous plaît cliquez ici pour savoir étape par étape comment définir les informations sur le même.

6
Virat Gaywala

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

  • ouvrir une fenêtre popup
  • 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 devrait être défini comme l'URL à partager.

4
aleemb

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

0
World Gamer