Etikettarkiv: api

Spreadshirt – Sälja varor med API

spreadshirt-logoJag har alltid varit intresserad av att driva min egen webbshop, jag har har vid flera tillfällen både installerat och underhållit olika webbshoppar men aldrig något eget. Därför blev jag extra intresserad när jag nyligen upptäckte Spreadshirt och fram för allt Spreadshirt API, jag gillar tanken bakom APIer,  möjligheten att bygga vidare eller mixa olika datakällor och blev intresserad av att testa spreadshirt och se hur deras API fungerar.

Jag började med att skapa ett konto och att ansöka om en API-nyckel, de gör skillnad på den europeiska och amerikanska marknaden. Länken i deras api information länkar till den tyska sidan för den europeiska marknaden, men ett snabbt hack visar att det gick lika bra med den svenska sidan genom att byta ut .de till .se.

Första steget är redan avklarat, jag tyckte inte produktbilderna passade in bra med designen på min butik så jag valde ändra på hur produktbilderna presenteras. Detta gjorde jag genom att bygga en egen mashup som laddar ner befintliga produktbilder från deras image-server, ta ut trycket från bilden och lägga det på mina egna bilder, fria från 90-tals drop-shadow, sedan roterar jag bilden och lägger en liten reflektion under bilden. Bilderna komprimeras sedan med tinypngs API (deras API är i stängd beta men kontakta dem på twitter om ni är intresserade av att testa) och laddas sedan upp och cashas på amazon s3. Tjänsten är för tillfället fri att använda och koden släppt som open source så kolla gärna in image.spreadshirt.pixel2.se.

Nästa steg är att utveckla min egen webbshop som kopplar mot Spreadshirts API. Genom deras api kan man få tillgång till följande information

  • Produktbilder i valfri storlek
  • Butiks information (så som valuta, språk, tidigare beställningar)
  • Artiklar (produkt information, priser, rabatter, design)
  • Kundvagn (spara produkter i kundvagnen)

Så när kunden trycker på att gå till kassan måste man fortfarande vidarebefordra kunden till spreadshirts egen betallösning, vilken till en viss del kan vara skönt då man slipper allt strul med betalningar. Men det gör också att det blir svårare att påverka flödet i kassan, och t.ex. fraktkostnader.

De har också en mycket användbar API Browser som jag använt vid flera tillfällen där man enkelt kan testa olika anrop och se deras svar.

Webbshoppen bygger jag med min favoritplattform wordpress med woocommerce plugin för att lägga på extra funktionalitet för webbshoppen, shoppen bygger även på ett tema från samma företag. Både deras tema och woocommerce är mycket smidigt att arbeta med då de följer samma princip som wordpress med hocks som man kan registrerar sig på. Vilket gör att det är mycket enkelt att lägga till egna delar eller helt byta ut befintligt innehåll utan att behöva göra några modifieringar i deras kod. Detta gör det mycket enklare att underhålla då alla ändringar ligger i min egen plugin, och det gör det också väldigt enkelt att uppdatera deras kod ifall det skulle behövas.

Så vad är det jag tänkte försöka mig på att sälja undrar du kanske då….  domänen säger förhoppningsvis allt; tygpåsar.nu mer om det senare 🙂

Mina reflektioner över WebCoast 2012

Över helgen har jag fått äran att delta på webcoast, ett stort tack till binero som gjorde det möjligt. Det var första året för mig på webcoast som är en uniconference med inriktning på web och sociala medier. Det har varit en mycket trevlig helg med intressanta föreläsningar, men framförallt intressanta möten med nya människor.

Men det var framförallt två möten, två sessioner som var extra inspirerande (följer man mitt twitter-flöde kanske man kan lista ut vilka ;)).

image

Det började strålande redan under förmiddagen med en API duo av Annika Linde och Andreas Krohn där de pratade första om apier ur ett marknadsförings perspektiv och sedan mer praktiskt om vilka apier som finns att tillgå och vad man kan göra med dem.

Som en bra avrundning på dagen höll Annika också en session om 12 steg att tänka på som startup, ett steg mer än förra gången hon höll presentation. Undrar om det blir en 13 stegs process nästa år? 🙂

Båda sessionerna, och många fler finns tillgängliga på bambuser och man kan nog till och med höra mina kniviga frågor mot slutet.

Nästa år ser jag fram emot, och skall försöka hålla min egen session om användarvänlighet och user interaction både på webben och i mobila lösningar på WebCoast 2013.

Jag bloggar detta på buss 16 på väg in till dag 2, för att jag är med och tävlar om Bineros grymma “surfplatta”  🙂

Så här får du tag på RSS-flöde för din kanal på Youtube

Jag ville nyligen visa Youtube-aktivitet för en speciell kanal direkt på kundens hemsida. Nu för tiden är man ganska bortskämt med att webbtjänster tillhandahåller både färdiga widgets och API. Men att komma åt ett simpelt rss-flöde är inte alltid lika enkelt längre. Och informationen om just Youtube är både mycket utspridd och inte så väldokumenterad.

Efter att sökte runt en bra stund och nästa gett upp gick jag in och granskade källan på youtube.com och såg då det jag letat efter så länge. Adressen till flödet, unikt för varje kanal. Så dagens tips är kort men förhoppningsvis sparar det dig lite huvudbry ifall du vill göra något liknande med youtube-flöden.

Så här får du fram flödet

  • Högerklicka på sidan och välj ”visa källa”
  • Scrolla ner tills du hittar <link rel="alternate" type="application/rss+xml" title="RSS" href="http://gdata.youtube.com/feeds/base/users/<namnet-på-kanalen>/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile">och kopiera hela href-attributet.
  • Eller anpassa adressen själv genom att bara byta ut delen med kanalens namn i.

Så har du ett flöde med rubrik, beskrivning och en thumbnail över videoklippet. Själv ville jag göra detta för att kunna slå samman flera flöden till ett, men mer om det i ett kommande inlägg. Ifall du vill göra mer avancerade saker mot youtube finns även ett API att tillgå.

Vad betyder Shobre för dig?

Jag äger i alla fall domänen, den var inköpt under mina domän glada dagar men hade inte direkt någon plan för vad jag skulle göra med den. För att den inte ska stå helt tomt har jag nu lagt upp en simpel sida med den något så officiella beskrivning på vad shobre betyder enligt Språkrådet (2004). Men jag ville samtidigt göra något mer av den, när jag lekte runt på facebooks plugin-lista fick jag tanken att se vad shobre betyder för andra. Sagt och gjort jag slängde upp en facebook comment plugin. Vilket är väldigt simpelt, man konfigurerar bara vilken adress man vill kommentera kring och bredden på sidan och får sedan en färdig snippet att inkludera på sidan. Kolla in Shobre.se för att se hur det blev.

Hämta Facebook profilbilder till din sida med Facebook API

Jag bestämde mig idag för att göra klart en hemsida som har legat orörd alldeles för länge, något så simpelt som min släktdomän janitzek.se (den främsta fördelen med att ha ett efternamn som ingen kan uttala, domännamnet finns ledigt :)). Jag hade tidigt en idé om hur jag ville använda den för att länka ihop familjens aktiviteter på webben, och till detta vill jag använda profilbilder och letade efter ett sätt att göra det automatiskt.

Med hjälp av Facebooks Graph API var det riktigt enkelt, den kräver ingen inloggning eller autentisering och du kan hämta vilken användares profilbild som du vill. Leta först upp användarnamnet till personen du vill visa, i de flesta fall har användaren valt ett eget namn men ifall användaren inte har det fungerar användarens ID lika bra.

&lt;img src=&quot;http://graph.facebook.com/xxx/picture&quot; /&gt;

Genom att byta ut xxx ovan mot användarnamnet och med ett vanligt GET-anrop mot Facebooks API får man tillbaka profilbilden i 50×50 pixlar. Så ifall man vill ha ut profilbilden för Nikke Lindqvist på facebook (hans bloggpost fick mig på tankarna att leka med Facebook så han får stå modell) använder man användarnamnet ”nikke”.

Varför vill man hämta profilbilder från Facebook?

  • En väldigt simpel lösning för att integrera din hemsida med Facebook, kräver ingen autentisering utan endast att man känner till användarnamnet
  • Man behöver inte själv lägga ner resurser på att skapa funktioner för att ladda upp, beskära och moderera profilbilder.

Det finns mer rolig information man kan få ut direkt från Facebooks API eller så kan du hämta ut alla dina kompisars statusuppdateringar utan autentisering. Har du något exempel på hur man kan använda Facebooks API skriv gärna en kommentar.

Sprid gärna vidare om du tycker det är intressant…

 

Hur skapar man barcode/streckkod (QR) länkar till android market?

Illustration från Barcode Scanner till androidNär jag tidigare i veckan tipsade om Air Control måste jag ju naturligtvis länka till vart man laddar ner spelet, något som de löst väldigt smidigt i Android. Genom att ta en bild på en QR-kod får man automatiskt all information man behöver utan att skriva några sökord eller en url.

Jag använder själv Google Googles för att scanna streckkoden då den gör det väldigt smidigt. Genom att ta en vanlig bild med Googles så integrerar den direkt med Android market och visar ikoner och länkar direkt till applikationen. Det finns också ett flertal olika barcode scanners för android. Men hur gör man själv för att skapa dessa bilder?

En QR-kod är avancerad streckkod och kan innehålla mycket mer information och används vanligtvis vid identifiering med mobiltelefoner, något som är mycket stort i t.ex. Japan. Svaret visade sig vara mycket enkelt då google tillhandahåller ett API för att skapa dessa QR-koder med vanliga GET-anrop. För att skapa en QR-kompatibel streckkod med hjälp av googles API skickar man enbart med texten man vill komprimera och storleken på bilden.

 http://chart.apis.google.com/chart?cht=qr&amp;chs=100x100&amp;chl=http://blogg.pixel2.se

Ovanstående kod skapar en 100×100 bild som länkar till förstasidan på min blogg när den scannas. Enbart genom att ändra chl attributen kan man välja vad QR-bilden skall innehålla. För att länka direkt till android market krävs det bara att man gör en länk till en sökning.

market://search?q=barcode

På samma sätt som för googles API använder man istället attributet q för att definiera vad man vill söka efter, man kan även använda definierade nyckelord för att hitta exakt rätt paket. pname:dk.logisoft.aircontrol länkar till exempel direkt till paketet för aircontrol från logisoft.

market://search?q=pname:dk.logisoft.aircontrol

Att få tag på paketnamnet är inte riktigt lika enkelt, men enklast om man sitter vid datorn är att gå in på Cyrket som innehåller statistik och länkar till alla applikationer i android market. Där finns det även färdiga QR-koder att använda.

Mer information

Sprid gärna vidare om du tycker det är intressant…

 

Förbättra sökningar i wordpress med Google did-you-mean™

WordPress är ett perfekt verktyg till så mycket mer än bloggar, jag använder det ofta för sina CMS egenskaper och med hjälp av några extra tillägg kan man få det mycket bättre. Så när jag igår började jobba på en ny kunds webbsida i wordpress började jag med att leta runt bland bloggarna i mitt rss-flöde då jag följer många duktiga utvecklare som delar med sig av sina wordpress tips. Något som är extra viktigt när man skapar en större webbplats är möjligheten att söka för att hitta sin information, och ingen gör det bättre än Google. Jag gillar speciellt googles did-you-mean, eller ”menade du” funktion som med en gång rättar till eventuella felaktigheter i sökfrågan. Inte baserat på något lexikon utan baserat på vad användare faktiskt söker efter, det gör deras funktion så mycket mer flexibel och uppdaterad.

Jag hittade många tips angående hur man förbättrar sök funktionaliteten i wordpress, bland annat tipsar Andras Karman om hur man förbättrar sökfunktionen i wordpress (nere för tillfället) om två väldigt intressanta plugins Search Unleashed och Search Suggest. Search Unleashed förbättrar sökfunktionaliteten i wordpress något avsevärt med mycket fler inställningar och möjlighet att byta sökalgoritm. Jag valde att använda Lucene och det fungerar otroligt bra, hittar till viss del felstavade samt böjningar av ord och det funkar minst lika bra på svenska som engelska. Search Suggest verkade också mycket lovande då den använder Yahoos API för att hitta felstavningar och ord, dock blev jag snabbt besviken. Den hade två stora nackdelar:

  1. Yahoos API fungerade enbart med engelska ord, och även där fungerade det inte lika bra som googles did-you-mean.
  2. När man infogade koden gjorde sökningarna att hela sökresultatet blev segt eftersom det tog en stund att ladda yahoos api.

Jag bestämde mig då för att leta efter en implementation eller ett API mot googles did-you-mean istället, jag trodde att det skulle vara ganska enkelt då google har en ganska öppen policy med massvis av APIer. Men jag lyckades inte hitta något i wordpress katalogen, många använde google search direkt men jag ville enbart ha tillgång till googles rättstavning. Efter lite googlande hittar jag att det faktiskt finns ett SOAP Search API som stödjer Google suggestion med funktionen doSpellingSuggestion. Men min lycka blev inte långvarig då jag snart insåg att Google SOAP Search inte längre ger ut några API-nycklar istället hänvisar de till sitt AJAX Search API och i AJAX Search API finns det ingen möjlighet att använda doSpellingSuggestion eller på något annat sätt då ut googles did-you-mean.

Exempel på hur Google did-you-mean ser ut i wordpressJag bestämde mig då sent igår kväll för att skriva min egen class i PHP för att hämta ut googles föreslagna ord, några timmar senare har jag en första version klar. Jag har tidigare använt CURL för att läsa in andra hemsidor och började därför att försöka läsa in Google.com genom CURL för att få ut googles förslag. Det var inte riktigt lika enkelt då google nu för tiden använder mycket ajax och javascript vilket inte gjorde det möjligt att parsa resultatet direkt. Lyckligtvis hittade jag m.google.com, deras mobila sökplattform och den är fortfarande mer straight forward med ett vanligt GET-anrop för att göra sökningarna. Efter att jag fått tillbaka resultatet från google skapade jag ett simpelt regular expression för att hämta googles did-you-mean, med hjälp av deras css-klassnamn kan jag använda exakt samma kod oavsett vilket språk sökningen är på.

/&lt;div[^&gt;]*spelling_onebox_result[^&gt;]*&gt;.*?&lt;b&gt;&lt;i&gt;(.+?)&lt;/i&gt;&lt;/b&gt;.*&lt;/div&gt;/

Jag valde att göra en wordpress plugin för att enkelt kunna integrera med nya hemsidor, jag försökte göra det helt med hooks först men efter letat i timmar efter vilken hook att använda så gav jag upp och insåg att less is more och make it work, then beatuifull är två viktiga ledord och valde därför att skriva en simpel funktion (om någon har mer information om hur man hittar rätt hooks, eller vilka hooks man kan använda vid sökningar säg gärna till så kan jag göra en helt automatisk plugin). För att ansluta mot google skrev jag ett kort ajax-script i jQuery för att på så sätt inte göra hela webbsidan seg medan den i bakgrunden hämtar förslag på nya ord. Ifall den hittar något nytt ord så visar den förslaget där man valt att anropa google_suggestion(). I tillfället finns det både på svenska och engelska om man skickar med ”sv” som argument till funktionen, den skriver då ut ”Menade du” istället för ”Did you mean” samt att den använder google.se som sökmotor (dock tror jag inte att det spelar så stor roll vilken domän man använder). För att inkludera i din wordpressblogg anropa bara funktionen där du vill använda googles did-you-mean, förslagsvis ifall du inte hittar några resultat i sökningen men det går lika bra att använda vid en lyckad sökning.

&lt;?php if ( function_exists('google_suggestion') ) { google_suggestion(&quot;sv&quot;); } ?&gt;

Fördelen med att använda Google did-you-mean för wordpress är:

  • Enkel integration, installera wordpress pluginen och lägg till en kodrad så fungerar resten automatiskt.
  • Använder googles grymma tjänst ”Menade du” för att hitta felstavningar men fungerar även lika bra på särskrivningar och andra konstigheter.
  • Använder ajax-anrop för att inte göra din blogg långsam.

Både bakgrundslogiken i PHP för att hämta did-you-mean orden från google samt wordpress pluginen är släppt som open source och finns tillgänglig på github, jag tar gärna emot förslag på hur man kan förbättra det. Jag avvaktar med att lägga upp det på wordpress.org, dels vet jag inte om google skulle bli så glada eftersom de själv inte släppt ett eget API, samt att jag gärna vill ge det lite tid för att upptäcka eventuella buggar. Hör gärna av dig ifall du väljer att använda det och hur det fungerar för dig. Jag har för tillfället ingen möjlighet att visa ett demo då bloggen ligger på wordpress.com samt min server idag kör IIS, så för nu får det räcka med bilden men installationen är väldigt enkel så testa gärna själv och jag ska försöka fixa fram ett demo lite längre fram.

För er som letar efter fler tips om hur man anpassar wordpress till ett bättre CMS verktyg rekommenderar jag att ni läser igenom Andreas Karman (hans blogg har inte uppdaterats på länge och ligger för tillfället nere, tyvärr), Niklas Olsson tipsar om bra tillägg vid wordpress som CMS , Nikke Lindqvist har publicerat en lista på alla tillägg han installerat (visserligen en blogg, men listan innehåller många bra tillägg)

Har du något annat livsnödvändigt tips för hur man får ut det mesta från wordpress som CMS?