Meny

Javascript verkar inte påslaget? - Vissa delar av Lunds universitets webbplats fungerar inte optimalt utan javascript, kontrollera din webbläsares inställningar.
Du är här

Välj bild då du delar i sociala medier

Då du delar innehåll från Drupal i sociala medier så visas logotypen för Lunds universitet i delningen som standard. Men det är möjligt att använda en annan bild.

Sociala medier använder sig av så kallade open graph-taggar för att avgöra hur de ska visa innehåll som delas på deras plattformar. För att det ska fungera behöver du gå igenom följande steg:

  1. Ladda upp den bild du vill använda i Drupal.
  2. Ta reda på adressen till själva bilden (url:en).
  3. Lägg in denna url i open graph-taggarna "Bild" samt "URL för bild" hörande till din artikel, undersida etc.
  4. Försäkra dig om att ändringen slagit igenom med hjälp av tjänsten Open Graph Check.
  5. Dela artikeln på valfria sociala medier. Nu ska bilden komma med.
  6. Om du delat artikeln sedan tidigare och vill uppdatera bilden i delningen kan du använda exempelvis Facebook Sharing Debugger eller Twitter Card Vaildator.

Ladda upp bilden till Drupal

Bilden måste först laddas upp i Drupal. Om du redan försökt att dela en färdig artikel eller bild och upptäckt att bara universitetets logotyp kommer med i delningen, så finns ju redan bilden på plats.

I annat fall går du till Innehåll -> Filer och klickar därefter på Lägg till fil.

Följ därefter de vanliga stegen som du använder för att ladda upp bilder i Drupal.

Det här kan också vara ett alternativ om du har en särskild bild som du vill använda just för delningen i sociala medier, men som inte finns med i själva artikeln.

Tänk på att bilden måste vara i korrekt storlek för det sociala medium som du vill dela till. För Facebook gäller minst 1200x727 px.

Kolla bildens adress

Högerklicka på bilden och kopiera dess adress.
Högerklicka på bilden och kopiera dess adress.

Url:en till en enskild bild på din webbplats hittar du genom att högerklicka på bilden i din webbläsare och därefter välja "Copy Image Location" (eller motsvarande beroende på webbläsare).

Om bilden inte finns publicera så hämtar rätt url för bilden genom att gå till Innehåll -> Filer. Klicka på filnamnet så att du får upp bilden. Därefter högerklickar du på bilden i din webbläsare och  väljer "Copy Image Location" (eller motsvarande beroende på webbläsare).

Det ska bli en länk i stil med: http://www.lu.se/sites/www.lu.se/files/palmer-fb.jpeg

Testa gärna att ange bildens url i din webbläsare för att försäkra dig om att den verkligen leder till den bild du tänkt.

Uppdatera open graph-taggar

Inställningarna för open graph-taggarna hittar du i administrationsgränssnittet under fliken "Metataggar" längst ner i exempelvis den artikel som du redigerar.

Open graph-taggarna hittar du under Metataggar i administrationsgränssnittet.
Open graph-taggarna hittar du under Metataggar i administrationsgränssnittet.

Metataggarna är uppdelade i tre flikar: Basic tags, Advanced tags och Open graph. Öpnna Open graph.

Det är fälten benämnda "Bild" samt "URL för bild" som avgör vilka bilder som visas på plattformarna. Försäkra dig om att du verkligen är under Open graph.

Det är Open graph-taggarna "Bild" samt "URL för bild" som du behöver ändra.
Det är Open graph-taggarna "Bild" samt "URL för bild" som du behöver ändra.

Då du skapar till exempel en ny undersida eller artikel så läggs url:en http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png in där automatiskt. Du är fri att ändra denna.

Klistra in url:en som du kopierade i förra steget i fälten "Bild" och "URL för bild". Spara.

Granska open graph-taggar

Efter att du sparat kan det som vanligt ta en stund innan ändringen slår igenom. Med hjälp av tjänsten Open Graph Check kan du skriva in url:en till webbsidan som du planerar att dela i sociala medier, och där se vilka open graph-taggar som är aktuella.

Använd den för att se att http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png bytts ut till bilden du angett.

Gå inte vidare med delningen förrän du försäkrat dig om att open graph-taggarna uppdaterats till den nya bild-url:en.
Gå inte vidare med delningen förrän du försäkrat dig om att open graph-taggarna uppdaterats till den nya bild-url:en.

Open Graph Check är ett smidigare alternativ till att manuellt gå in och granska sidans källkod. Du som är van vid detta förfaringssätt kan förstås göra det, men tänk på att det är hur koden ser ut för en extern besökare som avgör vad till exempel Facebook och Twitter "ser", så du måste vara utloggad ur Drupal (eller smidigare genom att öppna sidan/artikeln i ett privat webbläsarfönster).

Se vidare under Uppdatera delning om det dröjer oskäligt lång tid innan og:image och og:imageurl uppdateras.

Dela artikeln med bild

Dela artikeln på exempelvis Facebook eller Twitter på vanligt sätt.

Nu ska uppdateringarna från Open graph-taggarna hänga med enligt vad du kunde se i Open Graph Check.

Uppdatera delning

Facebook och Twitter har också egna verktyg där du kan kontrollera hur deras plattformar tolkar informationen som du har skrivit in:

Facebook Sharing Debugger

Twitter Card Validator

Du kan använda dessa för att se till att respektive tjänst läser om informationen från din artikel och tar med den nya bild-url:en som du angett i Open graph-taggarna.

Låt Facebook ta del av dina nya open graph-taggar genom att klicka på Scrape again i Facebook sharing debugger
Låt Facebook ta del av dina nya open graph-taggar genom att klicka på Scrape again i Facebook sharing debugger

I Facebook Sharing Debugger skriver du in adressen till artikeln du planerar att dela och klickar på Debug. Du kan därefter få Facebook att uppdatera delningen genom att klicka på Scrape again. Där visas också när den senaste uppdateringen gjordes.

Med Twitter Card Validator kan du se hur Twitter uppfattar dina open graph-taggar.
Med Twitter Card Validator kan du se hur Twitter uppfattar dina open graph-taggar.

I Twitter Card Validator skriver du in adressen till artikeln och klickar på Preview card för att se hur Twitter uppfattar din delning.

Vill du gå tillbaka till webbsidan och ändra igen i open graph-taggarna så kan det ta längre tid för cachen och ändringarna att slå igenom.

Om det fortfarande inte slagit igenom i källkoden för sidan efter cirka en kvart kan man eventuellt behöva testa ”Flush all caches" -> "Metadata". Detta kräver dock site administrator-behörighet och är inget som rekommenderas i första hand.

Sidansvarig: