[Tutorial] Gfc Follower Gadget gestalten/verändern

03 März 2013 | |
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!


Kommentare:

  1. Ich habe einen neuen Blog erstellt, schau doch mal bei mir vorbei, ich würde mich über eine Blogvorstellung oder über einen neuen Leser freuen :)!
    http://feierlaune.blogspot.de/

    AntwortenLöschen
  2. Ein echt tolles Tutorial :)
    Wirklich gut gemacht :)

    AntwortenLöschen
  3. Dankeschön :)
    Tolle Idee, gut gemacht!

    AntwortenLöschen
  4. Dankeschön,diese Tutoial finde ich ganz toll.

    Ich habe Probleme damit, das ich im Anfang eingegeben habe, das man meine Profilseite sieht wenn man als Leser meinen Blog aufruft. Das kann ich nun nicht mehr änderen.
    Auch habe ich das Suchfenster nicht :0

    Über Hilfe würde ich mich sehr freuen.

    AntwortenLöschen
  5. Hey, ich wollte gerne das kleine blaue "Blog verfolgen" Widget einfügen, aber es kommt immer "Hoppla, es ist ein Fehler aufgetreten" :(
    fashionwithmsmomo.blogspot.com

    AntwortenLöschen
  6. hey! irgendwie funktioniert das bei mir nicht.. also ich habe deine erklärung verstanden und das ersatz-gadget für das blaue in's schwarz weiße verändert und dann auch bei tinypic hochgeladen. Danach habe ich den link in deinen vorgegebenen htmlcode eingesetzt und als html/javascript hochgeladen. problem: es erscheint extra und nicht anstatt des blauen. wie ändere ich das?
    und noch eine frage: wenn ich andere farben eingebe, zb anstatt 000000 777777 einsetze, verändert sich nichts :/ im seitenquelltext ist es jedoch verändert. kannst du mir helfen? freue mich über eine antwort. du kannst mir auch ne mail schreiben : lauraalbrecht95@yahoo.com
    Danke! :)

    AntwortenLöschen
    Antworten
    1. Hey :)
      Also eigentlich musst du das normale "blaue" Follower Widget dann nur bei deinem Layout löschen, oder was genau meinst du?

      Hm, warum sich die Farbe dann nicht ändert, weiß ich leider auch nicht, bei mir klappt es :/

      Löschen
  7. Hallo Lea,

    ich würde gerne die Farbe der Schrift ändern, da es bei meinem Widget nicht die Anzahl anzeigt, weil weiß auf weiß sieht man ja leider nicht.

    allerdings finde ich das <div id="div- schon mal garnicht :/ hast du nen tipp für mich?

    AntwortenLöschen
  8. Leider kann ich meinen Seitenquelltext nicht bearbeiten.. weißt du, woran das liegt? Oo

    AntwortenLöschen