Dela inlägg på Twitter och Facebook – utan att använda plugins eller bibliotek

Marcus Olsson,

Att skaffa en "Tweet", "Recommend on Facebook" eller "Like"-knapp på sin webbplats är enkelt, men inte alltid helt optimalt.

Facebook t.ex. föredrar att du antingen laddar in deras Javascript SDK eller använder en iframe. Detta påverkar sidladdningar negativt samtidigt som det alltid blir lite extrajobb med att positionera och skala knapparna som man vill.

Exempel på Twitters "Tweet"-kod:

1<a href="https://twitter.com/share" class="twitter-share-button" data-via="olssonm">Tweet</a>
2
3<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
1<a href="https://twitter.com/share" class="twitter-share-button" data-via="olssonm">Tweet</a>
2
3<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Som tur är erbjuder både Facebook och Twitter sätt att dela innehåll utan att behöva dra in onödig extern kod.

För Twitter är det så enkelt som:

1<a href="https://twitter.com/intent/tweet?text=Text som du vill dela">Tweet!</a>
1<a href="https://twitter.com/intent/tweet?text=Text som du vill dela">Tweet!</a>

Och för Facebook:

1<a href="http://www.facebook.com/sharer/sharer.php?u=http://länk-till-sida-du-vill-dela" class="facebook">Dela på Facebook!</a>
1<a href="http://www.facebook.com/sharer/sharer.php?u=http://länk-till-sida-du-vill-dela" class="facebook">Dela på Facebook!</a>

För att göra det hela lite snyggare kan man använda Javascript för att få länken att öppnas i ett nytt fönster, med önskad storlek. Här med hjälp av jQuery:

1$('.facebook').click(function(){
2    window.open(this.href, 'facebook-share', 'width=580, height=296');
3    return false;
4});
1$('.facebook').click(function(){
2    window.open(this.href, 'facebook-share', 'width=580, height=296');
3    return false;
4});

För att dela rätt data via Facebook bör du även sätta upp Open Graph-taggar för att dela korrekt data. Annars delar du sidtiteln, description-taggen och den första bilden som Facebook hittar som standard (duger i de flesta fallen som jag har stött på dock).

Det här sättet att hantera delningar i sociala medier medför även att du kan använda vilka texter eller ikoner som än önskas. Se t.ex. här under det här inlägget de två knapparna som jag använder mig av.

⋯