[Tutorial] Gfc Follower Gadget gestalten/verändern

Hey Ihr,

Endlich gibt es mal wieder ein Tutorial für euch!

Schon lange habe ich versucht, mein Google Friend Connect (GFC) Widget zu verändern, aber es hat nie funktioniert. Dann bin ich auf den Code von Nathalie gestoßen. Sie erklärt anhand eines kurzen Tutorials, wie man den Code benutzen kann, ich erweitere das Tutorial noch damit, was einzelne Teile des Codes bewirken und was man verändern kann.

Also, lasst uns loslegen!

Als Erstes müsst ihr den Seitenquelltext eures Blogs öffnen. Dazu geht ihr auf euren Blog und klickt nach einem Rechtsklick auf 'Seitenquelltext anzeigen'.

Öffnet ein Suchfenster und gebt "Div-" ein. Der Strich ist wichtig! Nun sollten ihr den Abschnitt wie auf dem Bild unten vor euch haben. Sucht nun eure DIV ID und SITE ID und speichert diese ab.

Nun kommt der Code ins Spiel. Eure DIV ID und SITE ID müsst ihr hier nur noch an den vorgegeben Stellen einfügen.

<!-- friend connect -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-1k5rleeknvgwd" style="width:260px;border: none;">
</div>
/* Change with you blog's div id*/
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "";
    skin['TITLE'] = "";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#a3a3a3";
    skin['CONTENT_HEADLINE_COLOR'] = "#4e4840";
    skin['FONT_FACE'] = "normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
    skin['NUMBER_ROWS'] = '2'; /* Change the number to control number of rows*/
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{id: 'div-1k5rleeknvgwd', /* Change with you blog's div id*/
site: '18018202288772692983' }, /* Change with your blog's site id*/
skin);
</script>
<!-- friend connect -->

Um euch zu zeigen, welche Abschnitte was bewirken, habe ich sie hier grün werden lassen und euch den passenden Abschnitt dazugeschrieben.

Die Breite des Widgets könnt ihr hier ändern:

Ganz oben beim style width

Wieviele Reihen des Widgets angezeigt werden sollen hier:

skin [NUMBER ROWS] ganz unten

Texte könnt ihr hier ändern:

CONTENT TEXT COLOR: Sie sind bereits Mitglied

CONENT HEADLINE COLOR: Mitglieder(xxx)

Leider ist es nicht möglich, die Farbe des blauen Balkens "Mitglied dieser Site werden" zu verändern. Alternativ könnt ihr eine Grafik dafür erstellen und verlinken (und ins Layout als Html Widget einbauen).

Für euch habe ich diesen Button gestaltet, den ihr gern benutzen dürft (alternativ auch in anderen Farben, fragt einfach nach!)

Code dafür:

ROT:

<a href="http://www.blogger.com/follow-blog.g?blogID=DEINE ID" target="_self"><img src="http://i46.tinypic.com/k4jcbk.png" border="0" alt="Image and video hosting by TinyPic"></a>

BLAU:

<a href="http://www.blogger.com/follow-blog.g?blogID=DEINE ID" target="_self"><img src="http://i49.tinypic.com/8yxkdw.png" border="0" alt="Image and video hosting by TinyPic"></a>

Ich hoffe, euch gefällt das Tutorial. Falls irgendwelche Fragen aufkommen, her damit!