XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Facebook-Einbindung – Styleänderung möglich? (http://xhtmlforum.de/showthread.php?t=64501)

Sunlion 30.04.2011 18:30

Facebook-Einbindung – Styleänderung möglich?
 
Ich habe auf einer Sportstudio-Webseite einen Bereich erstellt, in dem die Facebook-Seite des Studios als kleiner Überblick eingebunden wird:

Dokan Sportclub

Siehe etwas weiter unten und von den drei Bannern das rechte.
Der Hintergrund des Facebook-Bereichs ist weiß mit blauem Rand, ich hätte ihn aber gern transparent, damit er so aussieht, wie die beiden Banner links daneben. Alle meine Versuche mit allowtranparency="true" und background-color="none" oder "transparent" führten zu keiner Veränderung.
Erkennt einer von Euch, wenn er den Quelltext sieht, ob sich außer der Größe sonst noch etwas daran ändern läßt?
Der Bereich, wo Facebook eingebunden wird, lautet:

<script type="text/javascript"
src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US">
</script>

<script type="text/javascript">FB.init("12c142aca03256473dae42859e8a2 5e0");</script>

<fb:fan class="FB_fan FB_ElementReady" profile_id="231134128850" stream="1" connections="4" width="276px" height="441px"></fb:fan>


width und height sind soweit klar und lassen sich auch ändern, stream holt die Beiträge und connections gibt an, wieviele Follower-Fotos angezeigt werden sollen.

Borsti 30.04.2011 18:57

Die einzigen, bei denen ich das bisher gesehen habe, dass die den Frame von Facebook ändern, ist Spiegel Online.

Facebook hat da in der API was, wo man eine eigene CSS-Datei übergeben kann.

*google* *google*
Tadaa:
--> How to Customize Facebook Fan Page Widget

Sunlion 30.04.2011 19:02

Du bist ein Schatz! *knuddel*
Hätte ich sicher auch finden können, aber mir fehlen da die richtigen Suchbegriffe. Es war schon schwierig, das zu finden, was ich da eingebaut habe.
Na jedenfalls probiere ich das mal aus.
Danke! :thumbsup:

Sunlion 30.04.2011 20:37

Mhm ... also so richtig klappt das nicht. Ich habe zwar eine CSS-Datei erstellt und verknüpft, und tatsächlich ändert sich dann in dem Banner auch etwas, der Text „Dokan Sportclub“ ist nicht mehr blau und die a-Tags verändern sich. Ich habe den Eindruck, daß ich die richtigen Tags noch nicht identifizieren konnte.
In der CSS-Datei liegen nun folgende Formate, alle testweise mit Schriftgröße 20, damit die Veränderung sofort auffällt, aber irgendwie tut sich da nix:

hmtl {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px; font-weight:bold; text-align:right}
body {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px; font-weight:bold; text-align:right}


p {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
a {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h1 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h2 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h3 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h4 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h5 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
h6 {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}

.page_stream {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.fan_box {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIIntentionalStory {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIStory_Message {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIIntentionalStory_Names {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIStoryAttachment {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIStoryAttachment_Media {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
.UIStoryAttachment_MediaSingle {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
#UIStoryAttachment_Media {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}
#UIStoryAttachment_MediaSingle {background-color:#000; font-family: arial, helvetica, sans-serif; color:#c3371e; font-size:20px; line-height:24px;}

Borsti 30.04.2011 22:03

Das bringt dir so nix.

Du musst eine extra CSS-Datei erstellen, die mit dem CSS von der Seite nix zu tun hat.
hast du ja, hab ich gerade gesehen
Ich hab damit auch noch nicht gearbeitet, deswegen nimm dir einfach zum Designen die Vorlage von Spiegel Online.
--> http://www.spiegel.de/static/sys/facebook/fanbox520.css
kopier den Inhalt in deine .css Datei auf deinem Server und dann ändere den Code.

einbinden musst du dann die CSS Datei folgendermaßen:
Hast du auch richtig
Code:

<fb:fan class=" FB_fan FB_ElementReady" width="276" height="441" locale="de_DE" logobar="0" connections="4" stream="1" profile_id="231134128850" css="PFAD zu deiner CSS Datei">
In dem Code sind Alle Parameter gesetzt (z.B. locale, logobar), die du in deinem ursprünglichen noch nicht hattest, deswegen kann sich da was verschieben.

Sunlion 30.04.2011 22:51

Vielen Dank für Deine Mühe! Ich schaue mir das morgen mal an, hab den Rechner heute schon aus und sörfe gerade mit dem Handy. Nach der Spiegel- CSS-Datei hatte ich vorhin schon mal im Quellcode gesucht, war aber offenbar nicht gründlich genug. Ich sehe schon, da sind noch viel mehr Formate drin, als bei mir. Mal sehen, ob ich das morgen hinbekomme.
Nochmal vielen Dank und schönes Wochenende!

Sunlion 01.05.2011 10:53

Huuurrraaa!!!
Es funktioniert!
Dank Dir, Borsti, Du hast mir wirklich sehr geholfen!
*freu*
:D


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:43 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020