web-dev-qa-db-fra.com

Comment personnaliser le sharer.php de Facebook

http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.google.com

Comment puis-je personnaliser le texte et l'image. On dirait que Facebook a tiré les docs.

72
Aakil Fernandes

Vous parlez de l'aperçu de l'image et du texte que Facebook extrait lorsque vous partagez un lien. Facebook utilise le Open Graph Protocol pour obtenir ces données.

En gros, tout ce que vous avez à faire est de placer ces balises og:meta sur l'URL que vous souhaitez partager -

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
      content="A group of U.S. Marines, under command of
               a renegade general, take over Alcatraz and
               threaten San Francisco Bay with biological
               weapons."/>

Comme vous pouvez le constater, il existe à la fois une propriété d’image et une description. Lorsque vous apportez des modifications aux balises de vos pages og:meta, vous pouvez tester ces modifications à l’aide de Facebook Debugger . Il vous dira si vous avez commis des erreurs (et comment les corriger!)

76
Lix

MISE À JOUR:

Cette réponse est obsolète.

Comme @ jack-marchetti a déclaré dans son commentaire, et @devantoine avec le lien: https://developers.facebook.com/x/bugs/357750474364812/

Facebook a changé le fonctionnement de sharer.php, Ibrahim Faour répondant au bogue déposé avec Facebook.

Le partageur n'acceptera plus les paramètres personnalisés et Facebook extraira les informations affichées dans l'aperçu de la même manière que celles qui apparaissent sur Facebook sous forme de publication, à partir des méta-tags url OG.


Essayez ceci (via Javascript dans cet exemple):

'http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent('this is a title') + '&p[summary]=' + encodeURIComponent('description here') + '&p[url]=' + encodeURIComponent('http://www.nufc.com') + '&p[images][0]=' + encodeURIComponent('http://www.somedomain.com/image.jpg')

J'ai essayé cela rapidement sans la partie image et la fenêtre sharer.php apparaît pré-remplie, ce qui en fait une solution.

J'ai trouvé ceci via cet article SO:

Veut un titre/image/description personnalisé dans le lien de partage facebook depuis une application flash

et ce lien contenu dans une réponse de Lelis718:

http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-votre-iframe-tab/

donc tout le mérite à Lelis718 pour cette réponse.

[EDIT 3rd May 2013] - semble que l'URL d'origine que j'avais ici ne fonctionne plus pour moi sans inclure également "s = 100" dans la chaîne de requête - aucune idée de la raison, mais mise à jour en conséquence

57
Snouto

Il semble que la réponse suivante ne fonctionne plus et Facebook n'accepte plus les paramètres des liens de dialogue de dialogue

Vous pouvez utiliser la boîte de dialogue Flux via une URL pour émuler le comportement de Sharer.php, mais c'est un peu plus compliqué. Vous avez besoin d'une configuration d'application Facebook avec l'URL de base de l'URL que vous envisagez de partager configurée. Ensuite, vous pouvez faire ce qui suit:

1) Créez un lien comme:

   http://www.facebook.com/dialog/feed?app_id=[FACEBOOK_APP_ID]' +
        '&link=[FULLY_QUALIFIED_LINK_TO_SHARE_CONTENT]' +
        '&picture=[LINK_TO_IMAGE]' +
        '&name=' + encodeURIComponent('[CONTENT_TITLE]') +
        '&caption=' + encodeURIComponent('[CONTENT_CAPTION]) +
        '&description=' + encodeURIComponent('[CONTENT_DESCRIPTION]') +
        '&redirect_uri=' + FBVars.baseURL + '[URL_TO_REDIRECT_TO_AFTER_SHARE]' +
        '&display=popup';

(remplacez évidemment le [CONTENU] par le contenu approprié. Documentation ici: https://developers.facebook.com/docs/reference/dialogs/feed )

2) Ouvrez ce lien dans une fenêtre popup avec JavaScript en cliquant sur le lien de partage.

3) J'aime créer un fichier (par exemple, popupclose.html) pour rediriger les utilisateurs vers la fin du partage, ce fichier contient <script>window.close();</script> pour fermer la fenêtre contextuelle.

Le seul inconvénient de l’utilisation de la boîte de dialogue de flux (en plus de la configuration) est que, si vous gérez également des pages, vous n’avez pas la possibilité de choisir de partager via une page, seul un compte d’utilisateur ordinaire peut partager. Et cela peut vous donner des messages d'erreur vraiment énigmatiques, la plupart d'entre eux sont liés à la configuration de votre application Facebook ou à des problèmes de contenu ou d'URL que vous partagez.

21
LocalPCGuy

Sharer.php ne vous permet plus de personnaliser. La page que vous partagez sera supprimée pour les balises OG et ces données seront partagées.

Pour personnaliser correctement, utilisez FB.UI fourni avec JS-SDK.

14
Jack Marchetti

Facebook sharer.php paramètres pour le partage de messages.

<a href="javascript: void(0);"
   data-layout="button"
   onclick="window.open('https://www.facebook.com/sharer.php?u=MyPageUrl&summary=MySummary&title=MyTitle&description=MyDescription&picture=MyYmageUrl', 'ventanacompartir', 'toolbar=0, status=0, width=650, height=450');"> Share </a>

N'utilisez pas d'espaces, utilisez &nbsp.

4
Weider Lima