Scout Rails app monitoring

I saw this tweet from Scout just before leaving the office yesterday:

It looked really promising, and we really like scout but are still using New Relic for the monitoring of our Rails app. So I sent them an email and the first thing we did this morning was to deploy the new Scout Rails monitoring of our Rails app.

We’re happy with it so far, it can surely replace New Relic:

Scout Rails app monitoring overview

 

Posted by Leave a comment Posted in Analytics, Ruby on Rails, Services Tagged , , ,

Testbot – Distributed testing

TL;DR

If you have a lots of tests in a rails app that is annoyingly slow (+10 minutes), try testbot – a tool for distributed testing

Testbot

What?

Testbot is a tool for running tests distributed over several machines. Mynewsdesk test suite, ~1900 examples and growing strong, takes about 20 minutes when running on my local machine (a weak macbook air). By using testbot the suite takes about 3 minutes. Thats almost an performance win by 700%! Costs money though (ducks!)

How?

Testbot is composed by three parts.

Requester

The requester is the local machine that initializes the test-suite to be run with testbot. The requester will send its environment (rsync) to the master and waits for the test suite to be run.

Master

The master will split the test-suite into smaller parts and let runners set up the environment (rsync, bundle install) and run the subset of tests. The results from the runner will be sent back to the requester.

Runner

The runner is our work horse that will run a group of tests and sends the result (stdout) back to the master.

For more a detailed explanation see testbot’s documentation.

Our setup

We are using AWS EC2 to run our master(1) and runners(11). All our instances are of the type medium (2 cores, 1.7 GB memory)

Our requester

Every developer’s own computer

Our master

Some standard linux image offered by ec2. The testbot-master requires ruby and the testbot gem installed. For us, this machine also has a cron script that schedules when runners are to be run (office hours)

Our runner

This machine has all the required software to run our rails application in a test environment. Our rails application depends on solr and postgres, so this software is also installed.

How fast can the test suite run?

Distributed testing allows you to increase the number of runners to decrease the time it takes to run the whole test suite.

Bottlenecks for testbot is the time it takes to rsync the environment from the requester to the master, then rsync the environment from the master to the runner and lastly the time it takes for the runner to start the rails environment and run X number of tests.

For us this means that it should be theoretically possible to run our whole test-suite in seconds(!).

Our gotchas

Environment setup for the runners

In the beginning the runners didn’t run in a stable environment. For example solr didn’t always startup properly and we had to use monit to ensure solr was running.

Cache store

During our upgrade to rails 3 we got errors when reading from Rails.cache

Errno::ENOENT:
No such file or directory – /tmp/testbot/mynewsdesk/tmp/
cache/Site.local_sites20111013-3227-17jr2c4-0.lock

The problem could be avoided by using memory_store instead of file_store.

“It only fails on testbot!11! FUUU”

We have had quite a lot of tests that only have failed on testbot. Almost all these errors can be traced back to the fact that the test doesn’t start in the state that we expect. Some test changes a global variable/database-table but doesn’t resets the environment when the test is finished (side-effect™). Similar to this is that a failing test doesn’t ensure a clean environment when test starts.
Failures due to incorrect data in solr is one of our classics.

Tips

Simplify the process of updating runners

Testbot will handle your gem changes automatically if your are using bundler. Prepare yourself to make changes outside the rails stack smoothly. EC2 AMI’s functionality will solve this problem for you. Chef or Puppetmaster is an even better strategy if you someday want to migrate to another plattform.

Split big tests into smaller

Large test files will limit how fast your test-suite can run with testbot. If a single test file takes two minutes, your test-suite can never be faster than two minutes regardless of how many runners you add.

Final words

A lot of rails project would definitely benefit from testbot. Is there any other distributed test frameworks that are awesome?

Posted by 3 Comments Posted in Ruby on Rails, Testing Tagged , ,

Meet Flower, the Flowdock bot

Flowdock is a team collaboration and group chat service, similar to Campfire.

Flowdock is also the group chat service of choice here at the R&D dept. To make it more fun and/or usable, we made this bot.

Flower, the Flowdock bot was written in Ruby, and made to be easy to extend with your own commands.

How do I use it?

  1. Sign up for Flowdock if you haven’t already
  2. Create a new Flowdock user account for your Flower bot. Give it a nickname, for example “Bot”, or “Steve”.
  3. Download the source code from Github
  4. Copy and rename config.yml.example to config.yml, and fill it with your settings
  5. rake run
  6. Mention your Bot in the chat to command it

Writing my own commands

You should write your own commands to make Flower fun and/or useful for your team.

This is easy. Simply create a class like this in lib/commands that inherits Flower::Command:

MyCommand.respond will be invoked when a message prefix matches what you respond_to. Arguments passed are:

  • command – The matched command
  • message – The entire message
  • sender – A hash with sender user id/nick info: {:id => 123, :nick => "Jonas"}
  • flower – The Flower instance, that can say or paste something. Both methods can take the option {:mention => sender[:id]} to highlight a message to that user in the chat.

A few commands can be found in our separate command repository at Github: https://github.com/mynewsdesk/Flower-Commands

The really fun and useful commands still remains to be written, but Flower provides us with a nice API.

So what do you think? What commands should be implemented next? Is anyone out there using Flowdock?

Posted by 6 Comments Posted in Services, Workflow Tagged ,

Hårdvaruhacking i en post-PC-värld

Vägen hit

I begynnelsen (även känt som 90-talet) fanns idén om att en central dator skulle styra och övervaka hemmet. Genom den skulle du kunna hyra film, kontrollera mjölken i kylen och sätta på larmet.

Sedan kom genombrottet för bärbara datorer, netbooks, smarta mobiler och surfplattor. Den centrala datorn kändes allt mer avlägsen och Apple började prata om en “Post-PC world” där PC:n inte längre står i centrum utan många små enheter löser allt mer specialiserade problem i våra liv.

Open source-rörelsen har hela tiden legat i framkant av utvecklingen och utan den skulle våra datorer och enheter skulle se väldigt annorlunda ut. Det faller sig därför naturligt att en open-source-plattform tar plats i vår Post-PC-värld, på att sätt som Arduino har gjort. Det är en plattform för att vi som inte är civilingenjörer i elektroteknik ska kunna ta fram objekt som interagerar med sin omgivning.

Arduino startades i Ivrea, Italien av Massimo Banzi och David Cuartielles 2005. Då universitetet hotades av nedläggning och de var rädda att allt skulle läggas i malpåse, släpptes såväl kod som hårdvarudesign under öppna licenser. Sedan dess har projektet rönt stor uppmärksamhet. Att även hårdvarudesignen har öppen licens gör att vem som helst kan producera egna kort, vilket gör det svårt att veta hur många som har släppts, men förra året hade 120 000 officiella Arduino producerats, med målet att nå en miljon i år. På Googles senaste utvecklarkonferens presenterades deras planer på att släppa en egen version, Google Accessory Development Toolkit, specialiserad för Android-utvecklare.

Skapandet av en timer

Jag är normalt utvecklare av webbapplikationer men Arduino känns alltför intressant för att inte prova på. Jag beställde därför en officiell Arduino Uno från leverantören Seeed Studio, baserad i Shenzhen, Kina. Bortsett från att det var billigare att ta varvet runt jorden så erbjöd de också en prisvärt sidekick, ett kit med en uppsättning komponenter att experimentera med. Totalt kostade allt ringa 320 kr, fritt porto.

Själva Arduinon levereras i en liten ask som är ungefär hälften så stor som en iPhone. Hjärtat i Arduino är en enchipsdator med namnet Atmel ATmega328. Den har 32 kB flashminne och bara 2 kb RAM. Med dessa begränsade resurser har folk byggt allt från musikinstrument till quadcopters.

Bland tillbehören fanns en liten breadboard, det vill säga en platta med små hål att sticka komponenter i, en handfull sladdar några sensorer (ljus, lutning, värme, tryck, vrid) och några enheter att påverka (servomotor, lysdioder, högtalare), motstånd, kondensatorer etc. Tillbehören är utmärkt dokumenterade på Seeed Studios wiki.

Jag tänkte begränsa mitt första projekt till en timer, fast inställd på 25 minuter enligt projektmetoden Pomodoro. Den kan alltså användas som alternativ till äggklocka för att se när det är dags att ta paus. Tanken var att fem lysdioder ska blinka, en i taget, för att sedan hissa en flagga. En knapptryckning skall starta om timern.

Det är slående hur pass enkelt det är att få ihop ett fungerande projekt som detta. Elektronik brukade vara komplicerat och tidskrävande, som jag minns det från min begränsade erfarenhet under gymnasietiden. Logiken består till största del av programkod. Arduino tillhandahåller ett litet men kompetent IDE. Själva programkoden skrivs i en förenklad form av C som sedan prekompileras till ett fullfjädrat C-projekt som kompileras och via USB förs över till Arduinon. Det tar bara någon sekund eller två att genom ett knapptryckning kompilera, ladda upp och driftsätta koden. Sedan kan man helt koppla bort datorn och Arduinon är självgående, förutsatt man man ger ström via något annat än USB, exempelvis ett 9V-batteri.

Jag blev nöjd med resultatet! Den kanske inte är så praktisk att använda men att paketera den i en låda ingår inte i projektet. Jag blev klar så pass snabbt att jag la till en högtalare som spelar Gubben Noak när tiden gått ut.

Dokumentation

Till skillnad från rena mjukvaruprojekt som man kan arkivera eller driftsätta när man är klar så är det inte lika enkelt med hårdvara. För att inte den biten skulle vara förgäves efter att jag plockat tillbaka alla komponenter i lådan ville jag dokumentera allt. Jag hittade den eminenta applikationen Fritzing som tagit fram i samma anda av open source och lekfullhet som Arduino. Med den kan man med ett snyggt och effektivt GUI.

Fritzing erbjuder tre vyer:

  • Breadboard där man drar ut komponenter på en breadboard och en Arduino på ett realistiskt sätt
  • Schematic som ger en schematisk överblick av projektet
  • PCB som ger en kretskortsvy

Om man vill serieproducera sin produkt, eller åtminstone göra en mer stabil produkt som inte kräver lösa komponenter på en breadboard, kan man använda PCB-vyn för att producera ett kretskort att löda fast komponenterna på.

Du kan ladda ned dokumentation och kod här, open source under MIT-licens.

Framtiden

Arduino lär fortsätta att ta världen med storm. Det öppnar upp för helt nya typer av lösningar. Det finns gott om tillbehör i form av så kallade sköldar som staplar ovanpå Arduinon. Till dem hör Ethernet Shield som ger en fullfjädrad TCP-IP-stack. Den finns stor potential att utveckla produkter med, exempelvis en Rails-baserad server på Heroku som kommunicerar med ett antal Arduinos som analyserar och påverkar världen runt omkring.

Posted by Leave a comment Posted in Arduino, Hardware

Använd HTML5 data attribut och delayed loading av bilder för snabbare laddning

Om man har väldigt många bilder som laddas från externa tjänster på en webbsida så kan man inte alltid vara säker på att den externa tjänsten svarar så snabbt som man vill.

Då även antalet bilder på sidan slöar ner laddningstiden så vill man ibland ladda bilder som inte är kritiska och ej är själva huvudinnehållet på sidan efter att hela DOM:en är laddad för att på så sätt inte påverka den upplevda laddningstiden.

För att ta ett konkret exempel på när och hur man skulle kunna använda detta är när man exempelvis har bilder av flera kontakter på en sida, alternativt kommentarer för en artikel där man visar bilder genom tjänsten gravatar.

I och med HTML5 och data attribut så kan man använda dessa för att spara url:en till den bild man vill ladda och sedan skriva ut ett image element med JavaScript efter att DOM:en är laddad.

För att anropa scriptet efter att DOM:en är laddad så använder man sig av eventet window.onload som skickas då hela trädet är laddat, som bilder, frames osv.

Exempel med jQuery 1.6.1
För att göra detta ännu smidigare så kommer här ett exempel med jQuery 1.6.1. Det använder sig av $(window).load(function(){...}); som gör att det vi kör scriptet först efter att DOM:en är klar.

Där itererar vi över alla länk element som har data-attributet data-gravatar-url. För varje element så ersätter scriptet innehållet i länk elementet med en bild som använder src från data-gravatar-url och lägger till bildens alt från den text som står i elementet sedan tidigare.

Nedan är ett exempel på hur detta kan användas (gist på github).

Om man sedan tittar hur laddningen ser ut genom firebug så ser man följande resultat

Laddning av gravatar med delayed loading
Image of loading delayed gravatar images after window load

Om man inte använder sig av onload eventet och laddar bilderna direkt blir resultatet istället enligt nedan:

Laddning av gravatar utan delayed loading
Loading of gravatar images

Av dessa två skärmdumpar kan man se att den utan delayed loading flyttar fram load eventet (röda linjen i Firebug) markant. Den totala laddningstiden är nästan identisk, men man ska ju komma ihåg att detta bara är ett exempel och inte speciellt många bilder som laddas.

Posted by 4 Comments Posted in Front End, Javascript, jQuery, Uncategorized Tagged , , , , , ,

Hantera profiler i olika versioner av Firefox

Som webbutvecklare så vill jag gärna kunna testa nya versioner av webbläsare i ett tidigt skede och på samma gång enkelt kunna falla tillbaka och använda den version av webbläsaren som majoriteten av besökaren av den webbplats jag utvecklar för använder.

Då jag är en flitig användare av Extensions i Firefox så är det tidskrävande och irriterande att när man byter mellan olika versioner av webbläsaren så har extensions en tendens att uppgradera sig alternativt sluta fungera med den aktuella versionen som man för tillfället använder.

För att lösa detta problem så kan man använda sig av olika profiler för de olika Firefox versionerna man har installerade. Jag stötte nyligen på ett program som man kan använda sig av om man vill slippa sig av att använda terminalen som heter Profile Manager som fungerar ypperligt för hantera profiler i Firefox och finns som en beta 2.


Så här kan det se ut i Profile Manager beta 2 för att hantera Firefox profilerna

Ladda ner Profile Manager
ftp://ftp.mozilla.org/pub/utilities/profilemanager/1.0_beta2/

Eller läs mer från en av skaparna av Profile Manager
http://jagriffin.wordpress.com/2011/01/11/profilemanager-1-0_beta1/

Vill man mot förmodan hellre använda sig av terminalen för att hantera sina profiler så gör man det så här:

Mac OS X

  • /Applications/Firefox.app/Contents/MacOS/firefox-bin -profilemanager

Linux

  • ./firefox -profilemanager

Windows

  • firefox.exe -profilemanager
  • firefox.exe -P

Vill du lära dig mer om profiler så finns bra läsning på http://kb.mozillazine.org/Profile_manager

Posted by Leave a comment Posted in Browsers, Front End Tagged , ,

TinyMCE Flash Embed Plugin

TinyMCE är en WYSIWYG Editor som vi använder för de företag som publicerar sina nyheter via Mynewsdesk. TinyMCE är en populär editor med stor användarbas som bland annat används i grundutförandet av WordPress. Fördelen med editorn är att den går enkelt att konfigurera efter sina speciella behov genom att använda sig av inställningar eller lägga till olika plugins som följer med.

På Mynewsdesk har vi använt TinyMCE sedan några år tillbaka och har försökt att hänga med uppgraderingar av editorn så gott som möjligt. Då den medföljande media pluginen i TinyMCE är alldeles för komplex för våra användare så har vi haft en egen variant till att infoga flash kod genom editorn.

Tyvärr har vi märkt att det ibland har blivit eftersatt med uppdateringar då det bara var vi själva som använde vår specialdesignade infoga flash media plugin för TinyMCE som vi använde tidigare.

Efter en av de senare uppgraderingarna av TinyMCE vi gjorde i och med att stödet för Internet Exlorer 9 uppdaterades råkade vi ut för lite konstiga problem. Istället för att ändra i den gamla befintliga koden för vår plugin beslöt jag mig för att avsätta två lab days till att lära mig skriva plugins för TinyMCE och samtidigt dela med oss av en plugin till TinyMCE som även andra kunde ha nytta för.

Resultatet blev en plugin som fått namnet TinyMCE Raw Embed Plugin och är en väldigt enkel plugin som innehåller möjligheten att infoga en flash object/embed kod i en dialog med en textarea.

Samtidigt finns möjligheten att direkt i HTML-läget infoga embed-kod och då visas det på samma sätt som det gör genom infogande via knappen och dialogen.

För att använda sig av pluginen lägger man rawembed-mappen i sin TinyMCE plugins-katalog. Sedan konfigurerar man initieringen av editorn så att pluginen laddas och knappen visas i editorn.

Idén till denna plugin kom från den ursprungliga media plugin som finns med i TinyMCE och är en rejält nedbantad variant av den pluginen.

TinyMCE Raw Embed Plugin ligger på Github med mer information och ett exempel på initieringen av editorn, hur man konfigurerar knappen i verktygsfältet samt hur man lägger till rawembed pluginen i TinyMCE .

Om du vill testa skapa din egen plugin till TinyMCE så finns ett plugin-template med instruktioner hur man går tillväga på deras webbplats. Värt att tänka på är att om man ska använda sig av egen design så är det snyggast enligt mig att ha det i en separat css i plugin katalogen och ladda denna genom plugin:en då det initieras. Detta löste jag genom att lägga till en extra CSS till editorn i pluginens init metod genom följande kod.

Posted by Leave a comment Posted in Editor, Front End, GUI Tagged , , , , ,

A workflow for translations

As Mynewsdesk is moving into new markets, our internationalization (i18n) efforts have been stepped up a notch. Rails has pretty good i18n support, but maintenance becomes painful when projects scale up [insert "rails can't scale" joke]. A better translation process was a big itch to scratch for us.

After exploring a few online translation tools, we settled on WebTranslateIt.com. It has a nice GUI and user friendly documentation. Our translation files took a while to import, but the payoff was immediate: graphs and stats on how up to date our translations are.

The translation process is straightforward and quite pleasant. You pick the untranslated strings in your language of choice, start typing and hit “Save and Next”. When we developers add strings, we wti push our changes on the command line. And when translations are done, we wti pull.

A problem with centralized translations

Having a central online service for all translations presents some challenges, however. Our workflow with feature branches doesn’t map well to WebTranslateIt’s system. Here are a few things our workflow needs to support:

  • Translators should be able to work in parallel on new features. We want to push updated strings from a feature branch to WebTranslateIt before they are ready for a merge with the master branch.
  • The team will work on several features simultaneously. A feature might add, update or remove translations. We want a process that can handle conflicts between new features.
  • Translation strings should not disappear and reappear for our translators. They should have a steadily progressing environment, with changes from several features merged together.

To accomplish this, we have the following workflow:

  1. One team works on feature A. They add, update and remove translation strings a.added, common.updated and a.removed, but only in our master language.
  2. In parallel, work is done on feature B, which adds/updates/removes b.added, common.updated and b.removed. Again, only in the master language.
  3. Feature A is ready for translation, but not deployment. It is merged (fast-forward) into branch wti, and our master translation file is pushed to WebTranslateIt with wti push. Translation on feature A can begin.
  4. Later, feature B is ready for translation, but not deployment. It too is merged into branch wti and conflicts (on common.updated) are resolved. We then do wti push once more. Translations on feature  B can now start.
  5. Feature A is ready for deployment. Feature B is not. Translations are ready. Check out the wti branch and do wti pull. Review changes to the locale files in Gitx. Stage all translations relating to feature A and commit (a.added, common.updated and a.removed), then all relating to feature B (b.added and b.removed) and commit.
  6. Check out branch A, and git cherry-pick one of the commits from branch wti.
  7. Proceed with normal deployment of feature A.

It is important to tease apart updated translations into several commits in step 5, because we don’t want to b.removed to be missing when we deploy feature A.

There are some pitfalls with the process. If the new translation of common.updated is specific to feature B and makes no sense in feature A, merging it on top of the changes from A will be a problem when A is deployed before B. One solution is to use a new, more specific translation key in feature B, and avoid the conflict altogether. Generally, the teams need to talk about merge conflicts in step 4.

A feature request

WebTranslateIt could make this process easier if they implemented some sort of feature support. It would be great if we could tag strings with the feature name, and pull only translations to strings with a specific tag. Tagging could be done in the code with a commenting convention.

In the example below, the string blog_post.topics belongs to the categories branch, and translations to it would be pulled with wti pull --feature categories or something similar. Even a full wti pull would be easier to separate into several commits, as the tag would be evident when reviewing changes.

This would have the double benefit of letting us easily tell translators to focus on a specific feature we want to deploy soon, and also greatly simplify managing parallel feature translations. WebTranslateIt’s support team has been very helpful so far, and so we hope this feature request (no pun intended) will be taken into consideration.

Posted by 6 Comments Posted in Workflow Tagged , , , ,

Google Analytics Event Tracking jQuery Plugin

Som jag skrev i ett tidigare inlägg om att utveckla med Cloud9 IDE så testade jag att skriva en jQuery plugin med Cloud9 IDE och lovade att återkomma med en blogpost med resultatet av plugin:en.

Efter att ha varit på Geek Meet med Jake Archibald som anordnades i Stockholm av Robert Nyman i februari där Jake Archibald bland annat tog upp vikten av återanvändbar kod så tänkte jag att det börjar bli läge att utveckla min första jQuery plugin.

Richard har tidigare skrivit om Analytics Event Tracking med Prototype som vi i dagsläget använder. Då vi använder oss flitigt av Google Analytics och Event Tracking här på Mynewsdesk tyckte jag att det kändes aktuellt att skriva en plugin som även vi har användning för och dela med oss av de möjligheter som finns med Event Tracking i Google Analytics.

Vi har olika behov av spårning hos oss och behövde en plugin som fungerade lite olika vid olika tillfällen. I det flesta fall använder vi oss av data-attribut på elementen som vi vill spåra i Google Analytics men ibland vill vi kunna sätta värden dynamiskt och mer generellt.

Lösningen i denna jQuery Plugin för Google Analytics Event Tracking är att det i grundutförandet använder data attributen på elementen för spårning och sparar det värdet i Analytics.

Data-attributen som används är:

  • data-jaet-report-category
  • data-jaet-report-action
  • data-jaet-report-label
  • data-jaet-report-value

Spårning med Data-attribut

I det enklaste utförandet kan man göra på följande sätt för att börja använda plugin:en.

<a href="/signup" data-jaet-report-category="signup" data-jaet-report-action="signup-click">Sign up</a>
$("a").analyticsEventTracking();

Ovanstående kod skulle spara en Category som är signup och en Action som är signup-click.

Spårning med definierade värden

Om man istället önskar att definera spårnings värden direkt vid initieringen så kan man göra det också. Säg att vi vill spåra alla användare som klickar på länkar i ett visst område på sajten med vissa värden.

<div id="contact">
<a href="/contact">Contact</a>
<a href="http://twitter.com/mynewsdesk">Twitter</a>
</div>
$("#contact a").analyticsEventTracking({
category : "contact",
label: "contact-link-click"
});

Ovanstående kod skulle spara en Category som är contact och en Action som är contact-link-click för samtliga länkar i arean som användaren klickar på.

Mer avancerad spårning

Vill man göra mer avancerad spårning kan man göra genom att ange en JavaScript-funktion som ska köras för att hämta värdet innan det sparas till Google Analytics. På detta sätt så kan man styra mer vad som ska hända och vad som ska spåras. Jag har testat detta några veckor med följande JavaScript kod.

$("div.box a").analyticsEventTracking({
category : "Beta1",
label: "link-events",
action: googleEventTrackingBetaTest
});
function googleEventTrackingBetaTest(){
return $(this).attr("href");
}

Med denna kod så blir resultatet enligt följande i Google Analytics:

Beta1 som event category i Google Analytics

Event category Beta1 visas i Google Analytics

Link-events som event label i Google Analytics

Event label link-events visas i Google Analytics

Link-action som som event action i Google Analytics

I bilden ovan ser man värdet under action då länkarna som användare klickat på genom att funktionen googleEventTrackingBetaTest har körts för att hämta ut värdet på länken som besökaren klickade på.

Rapporterna i Google Analytics hittar man under Content -> Event Tracking

Detta var lite exempel på hur man gör, finns många saker att applicera detta på. Exempelvis så kan man enkelt analysera utfallet av olika länkar i förhållande till varandra och se ifall det ger något resultat av att flytta länkar/ändra design när man använder sig av spårning med Google Analytics Event Tracking.

Denna jQuery plugin ligger på Github med mer information om vad som krävs och ett enkelt exempel på implementation. Givetvis så måste man ha Google Analytics på sin sajt för att spårningen ska fungera.

Uppdatering 21/5-2011, uppdaterade ändringen av data-attributen med “namespacing” så de avspeglar Version 1.0 av pluginen

Posted by Leave a comment Posted in Analytics, Front End, Javascript, jQuery, plugins Tagged , , , , , ,

Använd Open Graph-protokollet för att anpassa Facebook Likes

Vi lade nyligen till Open Graph-funktioner på Mynewsdesk, med vilka vi kan styra hur våra Facebook Likes ser ut på Facebook. Open Graph är ett protokoll ursprungligen framtaget av Facebook, och har inspirerats av Microformats och liknande protokoll. På hemsidan kan man läsa följande:

“The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.”

Det låter ju väldigt komplext. Tur då att det är väldigt enkelt att bara definera ett antal nya meta-taggar och få bra resultat snabbt:

<meta property="og:site_name"
  content="Mynewsdesk" />
<meta property="og:title"
  content="Restplatser till fjällen under sportloven" />
<meta property="og:type"
  content="article" />
<meta property="og:url"
  content="http://www.mynewsdesk.com/se/...sportloven-577030" />
<meta property="og:image"
  content="http://resources1.mynewsdesk.com/...skistar_small.jpg" />
<meta property="og:description"
  content="Snart är sportlovet här ... restplatser till bra priser. " />

De olika attributen vi använder:

  • site_name: Namnet på tjänsten, alltså inte kundens pressrums namn.
  • title: Titeln på länken som visas på Facebook.
  • type: Typ av object vi länkar till. Här finns ett antal alternativ, se listan hos Open Graph. article, blog eller website är de tre som rekommenderas för webbplatser. Vi använder article för vårt material. För andra objekt, som exempelvis “platser”, “organisationer” etc finns andra värden att använda.
  • url: Permalänken. Bra att definera här för att tex undvika att fel campaign-tracking följer med till Facebook.
  • image: Anledningen till varför vi först implementerade Open Graph. Här tillåts vi själva välja vilken bild som ska höra till artikeln på Facebook, istället för att användaren ska välja ut en bild. Det är också bra att kunna definera “fallbacks”, om en artikel inte har en bild associerad, men kunden har en logotyp som vi kan använda istället.
  • description: Texten till artikeln på Facebook. “En till två meningar” är rekommendationen här.

Nu ser våra Facebook Likes ut såhär, snyggt och prydligt!

Vi definerar några fler media-taggar för våra videor, och dom förklarar sig själv:

<meta property="og:video"
  content="http://csp.picsearch.com/...F2anRT.flv" />
<meta property="og:video:type"
  content="application/x-shockwave-flash" />
<meta property="og:video:height" content="276" />
<meta property="og:video:width" content="454" />

Det ska göra att det går att se våra videor direkt på Facebook:

Hur använder du själv Open Graph på din webbplats?

Posted by Leave a comment Posted in Front End Tagged , ,