SiteVision-bloggen

Publicerat: 2015-09-25

Så lägger du till dela-knappar utan spårning

Många blev medvetna om hur bl.a. de populära delaknapparna från AddThis används för att spåra besökare då DN publicerade en artikel i början av september.

Vi har tagit fram ett enkelt sätt för dig att göra egna knappar som du kan använda om du vill slippa inkludera kod från tredje part och undvika att utsätta dina besökare för att bli spårade då de surfar på din webbplats.

Det är fritt fram att kopiera koden och göra ändringar så de passar för just dig. Beskrivning av hur du inkluderar dem på din webbplats hittar du längre ner på sidan.

Hjälp med skript ingår inte i supporten.

Knappar med ikon

Enkla knappar med endast text

Så här använder du knapparna

OBS! Om du vill använda knapparna på t.ex. alla artikelsidor så bör du ändra i mallen, inte i sidan.

Du kan ladda ner all kod du behöver i en zip-filZIP och kopiera därifrån.

1. Lägg till en skriptmodul på den plats där du vill att knapparna ska ligga.

2. I den nya skriptmodulen under fliken Javascript ska du först namnge några variabler. Kopiera koden nedan eller från filen 1.javascriptfliken.js-sitevision{X}.txt. (där {X} är den version av SiteVision du använder)

// Kopiera denna kodsnutt för SiteVision 3

var sitevisionUtils = request.getAttribute( 'sitevision.utils' ),
propertyUtil = sitevisionUtils.getPropertyUtil(),
portletContextUtil = sitevisionUtils.getPortletContextUtil(),
resourceLocatorUtil = sitevisionUtils.getResourceLocatorUtil(),
page = portletContextUtil.getCurrentPage(),
siteName = encodeURIComponent( resourceLocatorUtil.getSite() ),
pageName = encodeURIComponent( propertyUtil.getString( page, 'displayName' ) ),
url = encodeURIComponent( propertyUtil.getString( page, 'URL' ) );

// Kopiera denna kodsnutt för SiteVision 4

var propertyUtil = require( 'PropertyUtil' ),
page = require( 'PortletContextUtil' ).getCurrentPage(),
siteName = encodeURIComponent( require( 'ResourceLocatorUtil' ).getSite() ),
pageName = encodeURIComponent( propertyUtil.getString( page, 'displayName' ) ),
url = encodeURIComponent( propertyUtil.getString( page, 'URL' ) );

3. Gå till fliken Velocity och kopiera in HTML-koden nedan eller från filen 2.velocityfliken.vm.txt. Ta bort de tjänster/knappar som du inte vill ha med.

<ul class="sharebuttonlist sharebuttonlist--horizontal">
<li class="sharebuttonlist__item">
<!-- Dela på Facebook -->
<a href="http://www.facebook.com/sharer.php?u=${url}"
rel="external"
class="sharebutton sharebutton--facebook sharebutton--icon-facebook"
title="Dela på Facebook">
<span class="sharebutton__text">Dela på Facebook</span>
</a>
</li>
<li class="sharebuttonlist__item">
<!-- Dela på Twitter -->
<a href="http://twitter.com/intent/tweet?text=${url}%20(via%20${siteName})"
rel="external"
class="sharebutton sharebutton--twitter sharebutton--icon-twitter"
title="Dela på Twitter">
<span class="sharebutton__text">Dela på Twitter</span>
</a>
</li>
<li class="sharebuttonlist__item">
<!-- Dela på LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=${url}"
rel="external"
class="sharebutton sharebutton--linkedin sharebutton--icon-linkedin"
title="Dela på LinkedIn">
<span class="sharebutton__text">Dela på LinkedIn</span>
</a>
</li>
<li class="sharebuttonlist__item">
<!-- Dela på Google+ -->
<a href="https://plus.google.com/share?url=${url}"
rel="external"
class="sharebutton sharebutton--gplus sharebutton--icon-gplus"
title="Dela på Google+">
<span class="sharebutton__text">Dela på Google+</span>
</a>
</li>
<li class="sharebuttonlist__item">
<!-- Dela via email -->
<a href="mailto:?body=${url}%20(via%20${siteName})&amp;subject=${pageName}"
class="sharebutton sharebutton--email sharebutton--icon-email"
title="Dela via email">
<span class="sharebutton__text">Dela via email</span>
</a>
</li>
</ul>

4. Nu är knapparna funktionsdugliga, men du vill säkert att de ska se lite finare ut. Den CSS som vi använder i exemplet här ovanför hittar du i filen sharebuttons.css. Ändra efter tycke och smak! Vårt förslag är att du kopierar över innehållet till en befintlig CSS-fil om du har en sådan under Tillägg i <HEAD>. Du kan också kopiera in det i Egna tillägg till CSS-fil under Avancerat på webbplatsinställningarna.

5. Om du vill att knapparna ska öppna en liten popup så kan du lägga till det script du hittar i filen sharebuttons.js. Kopiera gärna in koden i en befintlig fil under Tillägg i <HEAD>. Det är ganska lite Javascript-kod, så du skulle kunna lägga in koden inline direkt i en script-tagg i velocitymallen istället om du vill.

Inställningar

Den kod du hittar här ovan och i zip-filenZIP ger vanliga knappar med ikon. Så här gör du om du vill ändra:

Runda knappar med dold text

Lägg till sharebutton--hide-text på varje länk i velocityfliken

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=${url}"
rel="external"
class="sharebutton sharebutton--linkedin sharebutton--icon-linkedin sharebutton--hide-text"
title="Dela på LinkedIn">
<span class="sharebutton__text">Dela på LinkedIn</span>
</a>

Enkla knappar med endast text

Ta bort sharebutton--icon-xxx på alla länkar i velocityfliken

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=${url}"
rel="external"
class="sharebutton sharebutton--linkedin sharebutton--icon-linkedin"
title="Dela på LinkedIn">
<span class="sharebutton__text">Dela på LinkedIn</span>
</a>

Alla knappar vertikalt i en kolumn istället för horisontellt i en rad

Ta bort sharebuttonlist--horizontal på <UL> i velocityfliken

<ul class="sharebuttonlist sharebuttonlist--horizontal">

Inlägget är skrivet av Petter Knutsson. Fler blogginlägg och nyheter från oss:

Vill du ha nyheter, blogginlägg och erbjudanden bekvämt levererade till din e-postadress? Prenumerera på vårt nyhetsbrev inSite! Fyll i din e‑postadress nedan:

Följ SiteVision: