- Udgivet 14. april 2011 kl. 22:57
Sådan indsættes Facebooks “Synes om”-knap på din hjemmeside
Jeg har som bekendt tilføjet Facebooks “Synes om”-knap til alle mine blogindlæg og webdesigns, og da jeg har brugt pænt lang tid på at sidde og nørkle med det, og ikke lige er stødt på andre danske guides, vil jeg lige dele ud af mine erfaringer og forklare hvordan det gøres.
Der kan være to fremgangsmåder: Enten via en iframe eller Facebooks eget FBML (Facebook Markup Language), som er en modifikation af HTML med FB- og OpenGraph-specifikke tags osv.
Først og fremmest er der lige nogle ting vi skal have på plads i koden.
Øverst i sidens html-kode – lige under !DOCTYPE tilføjes xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" til <html>-tag’et.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
I <head></head>-sektionen indsættes følgende:
<meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg" /> <meta property="og:site_name" content="IMDb" /> <meta property="fb:admins" content="USER_ID" /> <meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
- hvor:
og:title er sidens titel – ikke selve webstedets.og:type er sidens objekttype i henhold til OpenGraphs understøttede objekter. Se en komplet liste på developers.facebook.com/docs/opengraph/#types.og:url er URL’en til den side du synes om – dvs. den side knappen indsættes på.og:image er det billede der vil figurere på din profil sammen med “Du synes godt om et link…”. Forsøg at holde det på ca. 90×90 pixels.og:site_name er webstedets overordnede titel.fb:admins er dit numeriske Facebook bruger-ID (kan findes ved at gå til https://graph.facebook.com/<dit_brugernavn>. Mit facebook-profilnavn er henrik.mortensen, så mit ID er730993699.og:description er en kort beskrivelse af siden.Samlet set kunne det se således ud:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta property="og:title" content="Min side, som folk skal kunne synes om" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://www.minside.dk/mitindhold.htm" /> <meta property="og:image" content="http://www.minside.dk/billeder/facebook_billede.jpg" /> <meta property="og:site_name" content="Mit Websted" /> <meta property="fb:admins" content="5826148372" /> <meta property="og:description" content="Denne side har jeg lavet for at andre skal kunne synes om den" /> ... </head>
Det var det mest tidskrævende. Gem filen og gå derefter til developers.facebook.com/docs/reference/plugins/like/ for at konfigurere “Synes om”-knappen. Her kan vælges følgende:
Angiv hvor bred iframen skal være, så den passer til layoutet.Når dette er gjort, klikkes “Get Code”, og en boks dukker frem indeholdende iframe- og XFBML-kode. Herefter er det blot at vælge hvilken af dem man vil bruge, og indsætte dem i sin html-kode. XFBML kan bestemt anbefales, da det har nogle fordele frem for det “gamle” iframe-system, men bruger man samtidig Facebook Connect på sit site, vil XFBML-versionen ikke virke! Så er man på nuværende tidspunkt desværre nødt til at nøjes med iframe-versionen. Forhåbentlig bliver det ordnet på et tidspunkt.
Kører man WordPress på sit site, er det også såre simpelt at tilføje knappen til ethvert blogindlæg:
1. Åbn din skabelons header.php og indtast følgende:
<meta property="og:url" content="<?php if (is_home()) { echo "http://www.minside.dk"; } else { the_permalink(); } ?>" />
<meta property="og:title" content="<?php if (is_home()) { echo "Mit websted"; } else { the_title(); } ?>" />
<meta property="og:type" content="<?if (is_home()) { echo "website"; } else { echo "article"; } ?>" />
<meta property="og:image" content="http://www.minside.dk/billeder/facebook_billede.jpg" />
<meta property="og:description" content="<?php if (is_home()) { echo "Beskrivelse af mit websted"; } else { while (have_posts()) : the_post(); the_excerpt(); endwhile; } ?>" />
Linje 1 tjekker om det er forsiden eller et blogindlæg der vises. Hvis det er forsiden, sættes og:url til webstedets overordnede adresse, http://www.minside.dk. Hvis det er et blogindlæg, sættes og:url til indlæggets permalink, f.eks. http://www.minside.dk/dette-er-et-blogindlæg.
Linje 2 tjekker om det er forsiden eller et blogindlæg der vises. Hvis det er forsiden, sættes og:title til webstedets overordnede titel. Hvis det er et blogindlæg, sættes og:title til indlæggets titel.
Linje 3 tjekker om det er forsiden eller et blogindlæg der vises. Hvis det er forsiden, sættes og:type til "website". Hvis det er et blogindlæg, sættes og:type til "article". OBS! Det er vigtigt man ikke angiver ting som f.eks. blogindlæg som kan ændre permalink eller midlertidige sider som værende “website”, da der bliver oprettet en ny Facebook-side for hvert indlæg der trykkes “Synes godt om” ved, så man til sidst har en overflod af Facebook-sider.
Linje 4 angiver det billede som skal vedhæftes opslaget på éns væg. I dette eksempel er det statisk, men man kan sagtens få vist det enkelte indlægs billede (hvis det har et sådant) ved hjælp af custom fields
Linje 5 tjekker om det er forsiden eller et blogindlæg der vises. Hvis det er forsiden, sættes og:description til at være en kort beskrivelse af webstedet. Hvis det er et blogindlæg, sættes og:description til indlæggets korte uddrag.
2. Åbn din skabelons single.php (enkeltsidevisning af blogindlæg), og sæt Facebooks genererede iframe-kode ind hvor du vil.
Du skal være logget ind for at skrive en kommentar.
darv bo. tak for hjælpen, påskedag.
.
Var så lidt