74 votes

Liens de partage social avec des icônes personnalisées

Je suis à la recherche de toute information solide et actuelle sur la création d'icônes de partage personnalisées pour les éléments suivants.

  • Facebook
  • Twitter
  • Google +
  • LinkedIn
  • Pinterest

Toute la documentation à laquelle j'ai accès semble porter sur l'utilisation de LEURS boutons sociaux de partage ou de " like " - qui, la plupart du temps, ne sont pas très attrayants. Des choses comme socialite.js aident à gérer certains des autres problèmes qui se posent lors de l'utilisation des boutons "natifs" de partage / like (désolé, je ne sais pas comment les appeler autrement), mais ils ne sont pas très jolis pour être honnête.

Toute documentation de référence, tout tutoriel ou tout conseil serait le bienvenu.

A la vôtre.

180voto

Baskaran Points 512

URL des liens sociaux

Twitter

https://twitter.com/intent/tweet?text=[TEXT]

Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

StumbleUpon

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Délicieux

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Signets Google

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

16voto

Ratko Solaja Points 21

Une mise à jour rapide de ces liens, voici un lien pour Google+.

https://plus.google.com/share?url=[URL]

Maintenant, si vous voulez que ces liens s'ouvrent dans une nouvelle fenêtre, il suffit d'ajouter ce code javascript après les href's :

onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"

Ce code javascript fonctionne avec Twitter, Google+ et Facebook (peut-être d'autres, mais je n'ai pas testé d'autres réseaux sociaux).

Exemple pour WordPress :

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Here you can add text, image, whatever.</a>

7voto

Claudiu Points 2846

La solution proposée par Grzegorz est obsolète et n'est pas vraiment la meilleure façon de procéder. Pour Facebook, il suffit de charger le SDK JS ( https://developers.facebook.com/docs/reference/javascript/ ) et appelez la méthode d'alimentation de l'interface utilisateur lorsque vous cliquez sur votre bouton personnalisé. Plus de détails sur la méthode UI : https://developers.facebook.com/docs/reference/javascript/FB.ui/

Pour Twitter : https://dev.twitter.com/docs/tweet-button#build-your-own

Vous aurez d'autres options pour LinkedIn, Google+, etc. mais je ne les connais pas de tête et je ne suis pas sûr qu'ils offrent tous des alternatives.

Continuez à chercher, vous n'avez probablement pas creusé assez profond, il m'a fallu 2 minutes pour trouver le lien pour Twitter :)

7voto

JoyGuru Points 1467

Les liens de partage personnalisé des médias sociaux dont vous avez besoin sont indiqués ci-dessous.

Facebook

http://www.facebook.com/sharer.php?u=[EncodedURL]

Twitter

http://twitter.com/share?text=[TITLE]&url=[URL]

Google +

https://plus.google.com/share?url=[EncodedURL]

LinkedIn

http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]

Pinterest

http://pinterest.com/pin/create/button/?url=[EncodedURL]&media={[MEDIA]}&description=[TITLE]

Vous pouvez trouver d'autres liens URL personnalisés pour les médias sociaux et un guide de mise en œuvre ici. Comment créer des liens de partage social personnalisés

4voto

Grzegorz Ciwoniuk Points 103

Pour le partage sur Facebook, vous pouvez simplement ajouter ce lien à n'importe quel objet :

<a href="http://www.facebook.com/sharer.php?u=<url to share>
&t=<title of content>">link or image</a>

Pour le reste : Désolé, mais je ne peux pas vous aider.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X