Kategoriarkiv: Widgets

Hur gör jag för att lägga till en Twitter-widget?

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 5,00 av max 5)
Loading...
Många frågor har kommit in kring hur man lägger upp en Twitter-widget som visar sin tidslinje eller annat. Du behöver först ha aktiverat och anslutit dig till Jetpack.

1. Först ska vi skapa en widget på twitter.com. Gå till (eller klicka på länken) till https://twitter.com/settings/widgets

t1

Klicka på ”Skapa ny” efter att du har loggat in.

2. Nu ska vi välja vad vi vill visa i vår widget. Det som kommer upp per default är din tidslinje. Till höger ser du en förhandsgranskning över hur det kommer att se ut. Du behöver inte bry dig om höjd och annat, utan det viktigaste är att vi väljer vilket innehåll vi vill ha.
Du skulle t ex kunna välja en hashtag eller annat också. Då får du välja ”Sök” i verktygsfältet och skriva in den taggen.

t2

När du är nöjd klickar du på ”Skapa widget”.

3. När din widget har skapats får du titta uppe i adressfältet på din webbläsare. Efter https://twitter.com/settings/widgets/ kommer en serie av siffror. Dessa ska du kopiera (för att i nästa steg klistra in i din Twitter-widget på din blogg). På bilden här under har jag ”suddat ut” dessa siffror.

t3

4. Logga in på din blogg och gå till ”Widgets” under ”Utseende”. Aktivera widgeten ”Twitter Timeline (Jetpack)” genom att dra upp den dit du vill ha den. Klistra sedan in numret du kopierade i föregående steg under ”Widget ID”

t4

Här kan du även välja till lite i utseende som att ta bort ramar mm. Den är bara att testa. Glöm inte att spara inställningarna längst ned i widgeten.

5. Klart

t5

Skapa en widget med länkar

Meh!NjaeOkejGrymtToppen! (6 röster, med ett snitt på: 4,67 av max 5)
Loading...
De som har kört WordPress ett tag vet att det fanns något i adminpanelen som hette länkar. Man kunde skapa en liten länksamling som man kunde lägga i en widget och ha på sin blogg.
Sedan WordPress 3.5 tog man bort det ur WordPress, men det går att göra rätt okej ändå, med hjälp av lite kod.

1. Gå till adminpanelen och klicka på ”Widgets” under ”Utseende” på vänstersidan.

2. Leta efter widgeten som heter ”Text” och dra upp den till den position du vill att den ska ha. Om du vill veta hur man hanterar widgets finns det en grundläggande film här http://support.moobis.se/2013/05/14/vad-ar-widgets-hur-gor-jag/

3. Klicka på pilen till höger om namnet på widgeten ”Text” så att du får fram möjligheten att redigera. Jag döper min widget till ”Nyttiga länkar”. Du kan givetvis döpa den till vad som helst.

Skärmavbild 2013-09-07 kl. 16.32.58

4. Nu är det dags att skriva in koden. Du kan kopiera den härunder och klistra in.

<ul>
	<li><a href="http://moobis.se">Moobis</a></li>
	<li><a href="http://mlabs.se">MLABS</a></li>
	<li><a href="http://skolverket.se">Skolverket</a></li>
</ul>

Nu ska det se ut så här i din widget.

Skärmavbild 2013-09-07 kl. 16.53.28

Som du ser om du tittar på koden så består varje rad av en adress och länktext. Detta är nu bara att ändra. Vill du lägga till, kopiera då bara en rad och klistra in på raden under, eller vart man vill ha den. Dock måste det ligga mellan de båda två små kodsnuttarna UL, som koden börjar och slutar med.

5. När du är nöjd trycker du på spara och om vi tittar på hur det ser ut, blir resultatet som följande…

Skärmavbild 2013-09-07 kl. 16.59.40

YTTERLIGARE TIPS

Det kan ju även vara så att du inte vill ha en länk till en webbplats, utan en länk till ett dokument, bild eller annat. Det funkar givetvis på samma sätt.
Gå till ”Media” i adminpanelen och ladda upp en fil. I detta exemplet är det en wordfil. Du kan givetvis använda vilken fil som helst i ditt mediabibliotek.

Skärmavbild 2013-09-07 kl. 17.04.16

Klicka på filnamnet, i mitt fall, ”Blomma i ruta” som jag vill ha en länk till.

Skärmavbild 2013-09-07 kl. 17.05.29

Om ni tittar till höger nu så ser ni ”Fil-URL” följt av adressen till filen. Kopiera hela adressen (hela adressen syns inte) och klistra in i din widget.

Lycka till!

Hur lägger jag till en Google-kalender?

Meh!NjaeOkejGrymtToppen! (4 röster, med ett snitt på: 4,00 av max 5)
Loading...
UPPDATERAD: 2 nov, 2015

Många undrar hur man lägger till / bäddar in en Google kalender då man inte kan använda sig av embed-koden. Här visar jag hur du gör med hjälp av pluginet och widgeten Google Calendar Events.
Bli inte orolig över att det ser mycket ut. Man kan göra massor om man vill, men bara lite räcker. 🙂

1.

1

Börja med att logga in på Google och gå till din kalender. Jag utgår från att du redan har en kalender i Google och om inte, så googla lite på hur du gör en. Den måste också vara publik, så att alla kan se den.
På bilden ovan har jag bläddrat ned lite på sidan och klickar på den lilla pilen bredvid ”Mina kalendrar” och klickar sedan på ”Inställningar”.

2.

2

I detta exemplet vill jag bädda in matsedeln på min blogg. Därför klickar jag på kalendern ”Matsedel” i listan.

3.

epostkalender

Om man bläddrar lite nedåt på sidan ser du detta. Till höger om ”Kalenderadress” finns länken till din kalender, det som står inom parentes efter ”Kalender-ID. Det ser ut som en lååång e-postadress.
Markera och kopiera hela den adressen (alltså bara det som står efter ”Kalender-ID:” och utan parenteser).

4.

Skärmavbild 2014-12-07 kl. 09.40.37

Nu är det dags att gå till din blogg. Logga in och gå till adminpanelen. Nånstans runt mitten hittar du ”GCal Events” och under den, ”Add new”. Klicka på den, så ska vi skapa en ny kalender.

OBS! Om du använder mallen klassblogg finns redan en demo-feed inlagd. Klicka då på ”All GCal Feeds” och klicka sedan på ”Matsedel” för att redigera den feeden, alternativt klickar du på ”Papperskorg” och tar bort demo-feeden och kör denna instruktion från början.

5.

kalender1

Börja med att döpa din kalender till något. Vad, spelar ingen roll egentligen, utan är till för att du ska veta vilken kalender det är. Du kan nämligen lägga till flera kalendrar om du vill.

Sen ska vi ”bygga” vad som ska visas på din sida. Som ni ser, finns det en massa kod i fönstret. I sin enkelhet kan ni göra så att ni tar bort allt, förutom det som jag strukit under med rött, dvs [event-title].
Eftersom jag bara vill visa maten för dagen bryr jag mig inte om klockslag och annat.
När ni gjort det, ska det alltså se ut som på bilden under.

Skärmavbild 2014-12-07 kl. 09.52.53

6.

Skärmavbild 2014-12-07 kl. 09.58.33

Nu är det dags att klistra in adressen till vår kalender, som vi kopierade i steg 3. Detta gör vi vid ”Google Calendar ID”, lite längre ned på sidan.

Nu kan vi hoppa över allt annat och klicka på ”publicera” längst upp till höger på sidan. Detta innebär att vi skapat en koppling mellan vår google-kalender och sajt. Nu är det dags att lägga till widgeten som ska visa upp detta.

Skärmavbild 2014-12-07 kl. 10.00.32

7.

Google har skärpt sina krav för användandet av deras kalender-API. Ett API är förenklat bryggan som gör det möjligt att hämta ut data från deras tjänster, i detta fall google calendar, och visa upp på exempelvis externa sajter som inte tillhör google.

Så vad göra? Jo,  gå till  ”GCal Events” > ”Allmänna inställningar” så ser du en ruta där du måste lägga in din API-nyckel. Precis under där ser du en länk ”Instructions on how to generate and set your own Google API key”. 

Följ den och skapa – därefter klistra in er API-nyckel och spara så funkar allt igen.

Skärmavbild 2015-11-02 kl. 08.23.52

 

8.

feedid

Innan vi lägger till widgeten, så måste vi ta reda på ”Feed ID” som vår kalender har. Gå tillbaka till ”GCal Events” och klicka på ”All GCal feeds” så listas alla kalendrar du lagt till. Notera ditt ”Feed ID” (numret som i mitt fall är 323) som du kommer behöva lite längre fram.
Om du vill visa upp fler kalendrar (om du har fler kalendrar) i samma widget får du notera alla ”Feed-ID”.

9.

gcalwid

Nu har vi gjort våra inställningar i pluginen och går då till ”Utseende” > ”Widgets”. Leta efter widgeten som heter ”Google Calendar Events” och dra den till den position du vill den ska ha. Klicka på den lilla pilen bredvid titeln på widgeten så du kommer åt inställningarna.

10.

Skärmavbild 2014-12-07 kl. 10.25.12

Börja med att döpa widgeten under ”Title”. Jag döper min till ”Matsedel”. Detta kommer att synas på din sajt.

Under ”Feeds to display” ska vi lägga in ”Feed-ID” som vi letade fram i steg 7. Om du har flera kalendrar så separerar du ID med ett kommatecken.

Under ”Display events as:” har jag valt ”Grouped list”. Det gör att alla händelser samlas under ett datum, i stället för att samma datum visas för varje händelse.

”Show paging links” kan ni välja om ni vill bocka eller ej. Om det är på, så visas en liten framåt- och bakåtlänk så att det går att hoppa framåt till kommande händelser.

Under ”Number of events per Page” kan ni välja hur många dagar framåt som widgeten ska visa händelser för. Testa er fram vad som ser bäst ut för er.

Under ”Display Title on tooltip…” har jag valt att plocka bort texten som stod där, då jag bara vill ha datumet utan text framför.

GLÖM NU INTE ATT KLICKA PÅ SPARA, LÄNGST NED I WIDGETEN!

Skärmavbild 2014-12-07 kl. 10.56.04

Voila! Klart. Har ni problem, tveka inte att höra av er.