Bild 1. Lilon.se innan Twitter & Facebook
Lilon.se har nu fått lite ny design. I min jakt på bättre kunskap inom sociala medier så har jag tagit några steg till för att föra webbutiken närmare Lilon.se på Facebook och Lilon.se på Twitter.
Jag började med att använda Facebooks och Twitters färdiga widgets för att presentera sidorna i webbutiken och lade dem då till höger om butiken (se bild nr 2). Som ett första stag valde jag att vänsterställa butiken, istället för att ha den centrerad, detta förenklade placeringen.
Min första tanke var dock att placera Twitter och Facebook i höger kolumn, men de skulle i så fall hamna långt ner på sidan och jag tror att detta skulle minska andelen besökare som konverterade till Twitterföljare och Facebookfans.
Bild 2. Lilon.se - Twitter & Facebook till höger om webbutiken (se röd markering)
Att enbart lägga till banners eller knappar för att presentera sidorna vill jag inte göra, då jag vill testa att skapa en levande webbutik genom att publicera Twittermeddelanden och Facebookfans.
När jag lagt in widgetsen till höger om webbutiken så presenterade jag det på Twitter och Facebook för att få lite återkoppling och andras tankar kring den nya designen.
Ett förslag jag då fick från Viktor Varland var att placera Twitter upp i toppen istället och enbart flytta in Facebook i höger kolumnen, och han skickade även en snygg skiss på det hela (se bild nr 3).
Bild 3. Viktor Varlands skiss
För att få till det här behövdes mer än bara standardwidgets från Twitter, så jag fick leta efter HTML-widgets och javascript och jag hittade Twitter Statuses Badge (som jag använde mig mest av) av Morgan Aldridge samt tog lite hjälp från dessa ställen; Create a HTML Twitter Widget For Your Blog Using JavaScript and CSS och Editing Twitter Widget.
Att få kod och få design att fungera är inte min starka sida och varenda gång måste jag nästan sätt mig in i det på nytt. Det är alltid kul att lära sig något nytt, men det kan bli rätt så drygt när enkla saker ska ta flera dagar att lösa.
Min kunskap sträcker sig så långt som till att knycka och sedan anpassa genom "trial and error"-metoden och efter det tvinga fram resultat med tidigare kunskap.
Efter några misslyckade försök så fick jag slutligen rätt på det (tror jag :P). Jonas Björk tipsade om att jag inte cachade Twitter och att det var seg, men min kunskap räcker för tillfället inte till för att förstå vad det betyder eller göra något åt det. Bra kodat är jag nog inte i närheten av, men jag fick till slut sakerna att sitta där de skulle (åtminstone i Internet Explorer 7, Google Chrome och Firefox 3). Säg dock gärna till om det finns några problem eller buggar.
Här på bild nr 4 ser ni den nya designen (man kan även se den live på Lilon.se):
Bild 4. Nya designen på Lilon.se. Facebook i höger kolumn, Twitter i toppen (se röda markeringar)