title »

Sådan Pimper du din Facebook Fanbox og Pagestream

njor facebook css 04 mini Sådan Pimper du din Facebook Fanbox og Pagestream Her er en tutorial der handler om hvordan du bruger CSS til at style din Facebook fanbox (facepile/likebox) og pagestream.

Under det store billede nederst kan du se en detaljeret beskrivelse, af hvordan jeg har rullet min egen css blanding og integrerer facebook med mit eget site, uden at give køb på den overordnet grafiske identitet. Det er testet i Safari og Firefox.

Facebooks sociale plugins kommer sit eget css. Det giver et ensartet look på tværs af alle Facebooks widgets og fortæller brugerne, at de interagerer med Facebook.

Husk det når du styler din Fanbox kasse. Det er vigtig, at dine brugere føler at de er i et “sikkert miljø”.

Jeg vil dække både hvordan du installerer dit eget css der udligner den originale facebook-style og hvordan du styler elementerne inden i kassen.

Sådan ændrer du Facebooks custom css

Hvis du bruger wordpress pluginet Simple Facebook Connect smider du bare dit css i kassen “Fanbox Custom CSS på SFC’s admin side.

Hvis du derimod har hentet din Fanbox direkte fra Facebooks site, får du her en forklaring på, hvordan du ændrer koden.

I teorien kan du bare linke til din standard css fil, men Facebook bruger sine egne css style-navne, så et bedre valg være, at lave din egen fil og gemme den på dit site. Måske i din themefolder, så det er lettere at vedligeholde.

XFBML

Hvis du bruge en XFBML version så kan du indsætte et direkte link (http://ditsite.dk/facestylesheet.css) til hvor din css fil er et sted inden "></fb:like-box> Her er et eksempel: css="http://ditsite.dk/facestylesheet.css?1"></fb:like-box> Hvis du bruger wordpress og opbevarer css filen i din themefolder, så kan du skrive: css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1" bemærk ?1. Det hentyder til den cached version af dit stylesheet. Det er vigtigt, at du husker at ændre nummeret i din XFBML kode, hver gang du laver ændringer (og ikke inkluderer ?1 i dit css filnavn, mmmmkay) så Facebook ved, hvilken version af dit css du hentyder til.

iframe

Iframe løsningen ser lidt mere kompliceret ud, men det er nu let nok. Ved slutningen på den her linie src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 DIN KODE HER " skal du skrive linket til din css fil lige inden den afsluttende . src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" Husk at ændre ASCII bogstaverne:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…css=1 => …css%3D1

Bemærk at iframe løsningen bruger ikke ?1 men =1, så husk at ændre = til %3D (%3D1)

Slutresultatet vil se nogenlunde sådan her ud: iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&amp;width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Nu har vi fået installationen af vejen. Så er tiden kommet til være kreativ med Fanboxen og pimpe den.

Detaljeret Beskrivelse

Under billedet finder du en detaljeret beskrivelse af hvordan jeg har stylet min Fabox. njor facebook css 04 Sådan Pimper du din Facebook Fanbox og Pagestream

1 – Hele kassen

njor facebook css 04 mini Sådan Pimper du din Facebook Fanbox og Pagestream
NOTE: Dette er hele kassen. Jeg har valgt at give den en orange kant.
Og for at være på den sikre side har jeg valgt at inkludere a:link, så jeg ved at alle links ser ud som jeg ønsker. Vi kan ændre de efterfølgende links, idet de “læses” senere og derfor har højere prioritet.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}


2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook logo

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE: Jeg kunne ikke lide den blå kant rundt om facebooklogo-billedet, så jeg downloadede billedet og ændrede det. Jeg hentede billedet her via dette link.


3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top avatar billede

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Page navn (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C – Connect top – Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Ligesom foroven, så har jeg hentet billedet og ændret det. Det kan hentes her


4 – Pagestream – alle historier


.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – enkelt historie

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B – Bruger link – Miklas Njor Fotografi

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: Jeg bruger css pseudo styles :before og :after til at at indsætte situationstegn før og efter teksten. Du kan se hvilke bostaver/tegn du kan bruge på denne fortegnelse for HTML entities. Du kan også bruge billedet. Pseudo classes kan ikke ses i IE6 og IE7.

4D – Post Billeder

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post Overskrift – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F – Websitelink – miklasnjor.com

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Brødtekst – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }



5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile tekst – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

Det var det! – stop editing :)

Der er rigtig mange elementer du kan ændre, men jeg har valgt at fokusere på de vigtigste. Hvis du vil finde flere detaljer du kan style, så vil jeg anbefale at du installerer Firebug til Firefox.



Tags: , , , , , , ,
Skrevet 03/05/2011

Page stats:

Facebook: 6 likes, 5 shares, 0 clicks, 2 comments
Twitter: 3
Google+: 0
Buzz: 0
Reddit: 0
Delicious: 0
StumbleUpon: 0
Diggs: 0
Pinterest: 0
LinkedIn: 3
Giv Karakter
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5,00 out of 5)
Loading...Loading...

Discussion

8 comments, would you like to comment on “Sådan Pimper du din Facebook Fanbox og Pagestream”