web-dev-qa-db-fra.com

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

Je recherche des informations actuelles solides sur la création d'icônes de partage personnalisées pour les éléments suivants.

  • Facebook
  • Gazouillement
  • Google +
  • LinkedIn
  • Pinterest

Toute la documentation que je reçois semble concerner l’utilisation de LEUR boutons de type social/de partage - qui, la plupart du temps, ne me semble pas très attrayant. Des choses comme socialite.js aident à régler certains des problèmes qui se posent lorsque vous utilisez les boutons de partage/natif "natifs" (désolé, je ne sais pas comment les appeler), mais ils ne sont pas très jolis à dire vrai.

Tout matériel de référence/tutoriels ou conseils serait génial.

À votre santé.

facebooktwitterlinkedingoogle-pluspinterest
71
bigmadwolf

ci-dessous, je vais vous proposer les différents URL de services

Gazouillement

http://Twitter.com/home?status=[TITLE]+[URL]

Digg

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

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]

Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

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]

Google Bookmarks

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

Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

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

Google+

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

Juste une mise à jour rapide sur 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, ajoutez simplement ce code javascript après le href:

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 un autre, mais je n'ai testé aucun autre réseau social).

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>
15
Ratko Solaja

Les liens de partage personnalisés requis pour les médias sociaux sont fournis 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 sur les réseaux sociaux et le guide de mise en œuvre à partir d’ici - Comment créer des liens de partage social personnalisés

7
JoyGuru

La solution suggérée par Grzegorz est obsolète et ce n'est pas vraiment la meilleure façon de le faire. Pour Facebook, il vous suffit de charger le SDK JS ( https://developers.facebook.com/docs/reference/javascript/ ) et d'appeler la méthode de flux de l'interface utilisateur en cliquant sur votre bouton personnalisé. Plus de détails sur la méthode d'interface utilisateur: 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 par cœur et je ne sais pas si elles offrent toutes des alternatives.

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

7
Claudiu

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.

4
Grzegorz Ciwoniuk

Afin de personnaliser les boutons ainsi que le nombre de partages de différents réseaux sociaux réseaux et services de partage d’URL, vous pouvez utiliser un serveur proxy. Le serveur de bouton social Meddelare fait exactement cela (pour votre information, je suis le développeur derrière Meddelare).

Meddelare : Ceci est une alternative open source et auto-hébergée aux services de partage tels que AddThis et ShareThis. Comme vous exécutez vous-même le serveur proxy, vous défendez également la vie privée de vos utilisateurs contre le suivi des réseaux sociaux. Les utilisateurs n'acceptent leur suivi qu'une fois qu'ils décident de cliquer sur un bouton de partage - jamais de manière implicite, simplement parce qu'ils ont visité votre page.

Il existe plusieurs versions: a serveur autonome , middleware pour votre serveur Express.js et un autre backend pour des solutions entièrement personnalisées .

Screenshot of a Meddelare example

Voir exemples de Meddelare pour le JSON/JSONP que vous obtenez du serveur et de l'utilisation du script.

3
Joel Purra

Ceci est ma solution pour facebook en php. Je suppose que vous pouvez faire la même chose pour d’autres réseaux sociaux.

function customFShare() {
    $like_results = @file_get_contents('http://graph.facebook.com/'. get_permalink());
    $like_array = json_decode($like_results, true);
    return (isset($like_array['shares']) ) ? $like_array['shares'] : "0";
}
function fShareButton() {
    return "<a data-share='http://www.facebook.com/sharer/sharer.php?u=". $your_url_here ."' href='#' rel='nofollow'><i>Icon</i> <span>". customFShare() ."</span></a>";
}

HTML

<div class="facebook-share">
    <?php echo fShareButton(); ?>
</div>

JQuery

jQuery(document).on("click",".facebook-share > a", function (e) {
        e.preventDefault();
        var winHeight = 350,
            winWidth = 520,
            winTop = (screen.height / 2) - (winHeight / 2),
            winLeft = (screen.width / 2) - (winWidth / 2),
            link = $(this).data('share');
        window.open(link, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    });

Vous obtiendrez un joli bouton facebook avec une icône et un compteur.

1
zarcode

Un repo github régulièrement mis à jour et revérifié, avec environ 50 ou 60 services répertoriés.

https://github.com/bradvin/social-share-urls

C'est beaucoup mieux que la réponse acceptée. NewsVine, Delicious, Slashdot, Ping.fm, etc., sont tous des services inexistants aujourd'hui. De plus, certains éléments importants manquent, Skype, etc.

0
HoldOffHunger

Aucune des réponses ici ne semble réellement répondre à la question du PO. Alors voici ma tentative:

De nombreux réseaux sociaux fournissent en fait des directives sur l'utilisation de leurs logos, icônes de partage et autres liens. Certains sont plus flexibles que d'autres sur ce sujet.

Bien sûr, dans la plupart des cas, ils ne conviendront pas vraiment à votre conception et vous voudrez peut-être les personnaliser avec les couleurs de votre propre thème/site Web.

"Faites-le à vos risques et périls" est probablement la meilleure réponse que vous obtiendrez jamais.

Je ne suis pas avocat (ce n'est donc pas un avis juridique!), Mais d'après ce que j'ai pu lire dans différents articles, certains sites Web vendant des ensembles d'icônes avec Les logos de réseaux sociaux personnalisés ont été invités à les supprimer de leur liste de produits.

Il y a peu de chances que Facebook, Twitter ou toute autre société de réseau social vous poursuive (bien que ce soit probablement le cas) pour avoir personnalisé leurs icônes/logos pour votre blog personnel ou votre site Web, mais si vous souhaitez vous couvrir, envisagez probablement en suivant leurs directives ...

Voici quelques liens vers les directives relatives aux marques de réseaux sociaux:

Vous pouvez effectuer une recherche sur le Web "Règles de marque [! Nom de marque]" pour trouver ces règles pour presque tous les réseaux sociaux.

Quelques sources pour les informations ci-dessus si vous voulez en savoir plus:

J'espère que cela t'aides.

0
MrUpsidown

Le format du lien Twitter http://Twitter.com/home?status= [TITLE] + [URL] est obsolète et ne fonctionnera plus pour l'application Twitter Twitter iOS.

Utilisez à la place

https://Twitter.com/intent/tweet?text=[TITLE]+[URL]

Source: https://dev.Twitter.com/web/Tweet-button

0
xyz