tutorial, wordpress

(Tutorial) GFC bei WordPress einbinden

Hallöchen, meine Lieben!

Heute geht es um ein Tool, welches für die meisten Blogger gänzlich unerlässlich ist, allerdings sehr viele davon abschreckt, zu WordPress zu wechseln. Nähmlich Google Friend Connect. Einst gab es ein WordPress-Plugin, mittlerweile allerdings nicht mehr. Jetzt muss sich der Blogger selber Gedanken machen, wie er das Ganze nun umsetzt, schließlich will man seine hart-erarbeiteten Follower auch irgendwo nicht verlieren, gell?

gfceinb

Natürlich benötigt ihr für das Tutorial einen Blog bei Blogger, wo ihr auch GFC nutzt, aber das habe ich jetzt mal als selbstverständlich gesehen (;
Solange ihr kein „Responsive Design“ habt, ist alles machbar, wieso das Ganze werdet ihr gleich sehen. Responsive bedeutet, dass sich der Blog, je nach Auflösung und Größe des Bildschirms „mitändert“, also die Größe, sowie Darstellung des Blogs sich verändert, je nachdem, ob ihr am PC, Tablet oder Handy schaut.

Also, nun geht ihr, wie gewohnt auf euren Blog und wählt die „Layout“-Option aus, bis euer Template bzw. Layout inklusive aller Widgets erscheint.

gfc01
Nun wählt ihr, wie hier angezeigt, „Gadget hinzufügen“ aus, um in das weitere Menü zu gelangen.

gfc02

Dort wählt ihr „Weitere Gadgets“ aus und fügt letztenendes die Follower hinzu (Falls ihr dies noch nicht getan habt :p, bei manchen Blogs wird die Followerzahl nämlich absichtlich nicht dargestellt.).
Hier könnt ihr ebenfalls die Farben des Gadgets, wenn nötig, ändern und auf euren neuen WordPress-Blog abstimmen.

gfc03

Nun geht es an’s programmieren, wählt dafür den Menüpunkt „Vorlage“ im linken Menü aus und dann „HTML bearbeiten“ unter eurer Blogvorlage.

gfc04

Jetzt wird eine kleine Suche ausgeführt: STRG+F drücken, um die Suchtleiste auszuführen und dort gebt ihr nun <b:skin> ein.
Neben dem gefundenem Punkt im Code steht nun ein kleiner Pfeil, den ihr bitte anklickt, um den restlichen dazugehörigen Code zu öffnen.
Nun gebt  ihr (Direkt hinter */ sonst funktioniert das Ganze nicht!) dort folgendes ein:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
scrolling: „no“;
}

#Followers1 {
position: fixed !important;
top: 0px !important;
left: 0px !important;
height: 360px !important;
width: 220px !important;
background: #ffffff;
}

#Followers1-wrapper {
position: absolute;
top: 0px;
left: 0px;
background: none repeat #ffffff;
}

und klickt oben auf „Vorlage speichern“.

Jetzt habt ihr das Gröbste geschafft, euer GFC Feed müsste nun bei euch links oben in der Ecke angezeigt werden – Sieht zwar doof aus, lässt sich aber leider nicht anders lösen – Aber schließlich haben wir bald einen neuen Blog, da wird das Ganze doch halb so schlimm sein, gell? Ein bisschen Schwund ist und bleibt immer.

So, kommen wir zum wichtigsten Teil, nämlich der Feed Umleitung. Wenn ihr die nicht macht, so können eure „Follower“ eure neuen Posts nämlich garnicht erst sehen – und das ist schließlich der Sinn hinter dem ganzen hier.

gfc05

Einfach unter „Einstellungen“ „Sonstiges“ auswählen und nun euren Feed eingeben.
Hierfür sucht ihr euch „Feed-Umleitungs URL veröffentlichen“ und gebt dort eure Feed Adresse an – Diese ist im Normalfall eure Blog-URL /Feed. In meinem Fall also „http://imaginary-lights.net/feed“.

Jetzt muss das GFC-Widget eigentlich nur noch in euren WordPress Blog eingefügt werden, damit ihr auch weiterhin (hoffentlich) treue, neue GFC-Follower empfangen könnt.
Hierfür müsst ihr selbstverständlich zu eurem WordPress Account wechseln.

gfc06

Einfach auf „Design“, dann auf „Widgets“ gehen und nun ein neues Text-Widget erstellen. Dort fügt ihr dann folgendes ein:

<iframe width=“185″ scrolling=“no“ height=“260″ auto=““ src=“EURE BLOGSPOT-URL„></iframe>

Speichern und fertig ist das Ganze! Schon könnt ihr beides nutzen, sowohl WordPress, als auch GFC :P Vorraussetzung ist natürlich, dass ihr euren GFC-Account nicht löscht, aber das würde ich euch sowieso an’s Herz legen (;

Liebe Grüße,

b8

27 Comments

  1. vreeni

    26. August 2014 at 6:39 AM

    Da spricht der Profi. Verfolge deine Tipps und Tricks auch schon immer bei Silk&Salt. An dieser Stelle: Danke dafür :)

    Liebst,
    vreeni von freak in you

  2. Alexander Grüßung

    26. August 2014 at 6:52 AM

    Ansich schöner Artikel, aber:
    – HTML heißt HyperText Markup Language -> zu deutsch Auszeichnungssprache und eben nicht Programmiersprache, also das bissel kopieren von HTML und CSS ist kein programmieren…
    Und als ausgebildeter Anwendungsentwickler muss ich das wissen ^^

  3. Frankie

    26. August 2014 at 9:37 AM

    Ein sehr tolles Tutorial, damit hilfst du wahrscheinlich sehr vielen, die ihre GFC-Leser zurücklassen mussten. Ich habe nur glaube ich noch eine kleine Verständnisfrage… und zwar der letzte Punkt, wo man das iframe in WordPress einbindet, welche URL muss da jetzt rein? Die von Blogger? Irgendwie ist die Frage noch offen, und vllt fügst du das noch hinzu :)

    Liebe Grüße!

  4. Janika

    26. August 2014 at 5:28 PM

    Oh schade, auf das Tutorial wäre ich gerne früher gestoßen, jetzt habe ich meinen Blogspot Account endgültig gelöscht :( Ich bin absolut zufrieden mit WordPress, aber die Follow Möglichkeiten sind etwas klein!

    Liebe Grüße :)

    http://WWW.YANIKAS.DE

  5. Esra

    26. August 2014 at 7:06 PM

    Wow, alter Schwede, Respekt, dass du dich so auskennst!!
    Allerdings mussich zugeben, ich habe jetzt nicht alles durchgelesen, aus dem einfachen Grund, weil ich ein responsive Design habe. Ich denke auch, responsive ist super wichtig, da die meisten Leute heutzutage sich die Blogs auf dem Handy ansehen (ich gehöre nicht dazu), und da sollte sich das Blogdesign in der Größe natürlich ans Handy-Display anpassen.
    lg
    Esra

    http://nachgesternistvormorgen.de/

  6. Alina

    26. August 2014 at 7:43 PM

    Ich mag die blusen auch sehr! Die sehen so schick aus :)

  7. Joana

    27. August 2014 at 11:18 AM

    Super tutorial! Habe ich mir direkt mal als Lesezeichen gesetzt :)

    Liebste Grüße ♥ Joana
    TheBlondeLion

    Es würde mich riesig freuen, wenn du an meinem Geburtstags Gewinnspiel mitmachst :)

  8. Melissa

    27. Dezember 2014 at 10:27 PM

    Hallo,

    ich hab die Schritte deines Tutorials befolgt, aber es funktioniert nicht. Bei mir wird im neuen Blog statt des GFC Kastens nur der html-Text angezeigt…

    1. Sophie

      30. März 2015 at 12:01 AM

      Bei mir wird auch nur der html-Text angezeigt. :(

  9. Caro

    7. Mai 2015 at 12:07 AM

    Halloo,

    vielen Dank für deine Mühe. Bei mir hat es leider nicht funktioniert, weil bei mir immer der komplette Blog dann in dem kleinen Fester angezeigt wird und das will ich ja nicht.. Hab auch schon alle möglichen Designs probiert, da ändert sich nichts :( Sehr schade!!

    Liebe Grüße
    Caro
    http://www.lieblingslicht-blog.com

    1. Natalie

      24. November 2015 at 5:29 PM

      Genau so ist es bei mir leider auch

  10. Bonny

    27. Juli 2015 at 4:05 PM

    Ich bin auch von Blogger zu WordPress umgezogen und hab nur den Feed umgeleitet (bisher (noch) ohne das GFC Widget einzubinden). Das hat bei den ersten zwei Beiträgen auch wunderbar geklappt. Nun seit ein paar Beiträgen erscheinen die leider nicht mehr im GFC-Feed. Hast du vielleicht eine Ahnung woran das liegen könnte? An der Feed-Adresse https://bonnyundkleid.com/feed/ hat sich ja eigentlich nix geändert. Bin mit meinem Latein am Ende /:

    Liebe Grüße
    Bonny

  11. Annika

    11. März 2016 at 12:10 PM

    Ich habe es für meinen Blog auch probiert, jetzt kann ich ihn nicht mehr öffnen. Er lädt ewig, aber es passiert nichts und das auch noch, nachdem ich die Schritte wieder rückgängig gemacht habe……
    Ich hoffe ich finde schnell eine Lösung, denn wer geht schon auf einen Blog der nicht lädt :D

    Aber lieb, dass du ein versucht hast eine Lösung für das GFC Problem bei WordPress anzubieten. :)

    Liebe Grüße

    Annika

  12. Jülide

    20. März 2016 at 7:44 PM

    Schade. Ich hatte so sehr gehofft, dass dieser Trick bei mir funktioniert, aber leider scheint das nicht der Fall zu sein.
    Ich leite alle Besucher meines alten Blogs automatisch an die neue URL auf WordPress und dadurch scheint dieser kleine Trick nicht zu funktionieren. :(

  13. friv games

    7. April 2016 at 12:26 PM

    Thanks for sharing excellent informations. Your site is very cool. I’m impressed by the details that you’ve on this blog. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for more articles. You, my friend, ROCK! I found simply the information I already searched everywhere and simply could not come across. What a perfect web-site.

  14. Margrett Chong

    9. Mai 2016 at 7:25 PM

    My brother recommended I might like this blog. He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this information! Thanks!

  15. Karma Nesser

    11. Mai 2016 at 9:30 PM

    This site was how do I say it? Relevant!! Finally I ave found something that helped me. Many thanks!

  16. Micaela Knap

    12. Mai 2016 at 5:25 AM

    Very neat blog.Really looking forward to read more. Will read on…

  17. heather catania

    26. September 2016 at 3:28 AM

    Hello, i think that i saw you visited my web site thus i came to “return the favor”.I am trying to find things to enhance my website!I suppose its ok to use a few of your ideas!!

  18. Mercedez Passmore

    19. Januar 2017 at 6:52 PM

    This design is steller! You certainly know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  19. Jasmine Cluck

    29. Juni 2017 at 8:30 PM

    Hi, i think that i saw you visited my weblog thus i came to “return the favor”.I am attempting to find things to enhance my website!I suppose its ok to use a few of your ideas!!

  20. ukshelving.co.uk

    17. August 2017 at 3:46 PM

    Hi just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.

  21. visit this blog

    23. August 2017 at 8:51 PM

    Thank you for sharing superb informations. Your site is so cool. I am impressed by the details that you’ve on this site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles. You, my pal, ROCK! I found just the information I already searched everywhere and just couldn’t come across. What an ideal site.

  22. angeltearz liest - Bloggerwelt | Das Abonnieren eines Blogs

    19. November 2017 at 11:36 AM

    […] eher für die Kategorie „Fortgeschrittene“. Es gibt dazu tolle Beschreibungen, wie z.B. hier oder hier. Ich wollte damals meinen Lesern die Möglichkeit bieten, meinen Blog ganz einfach in ihr […]

Leave a Reply