ilch Forum » Ilch Clan 1.1 » Kritik und Verbesserungen » Facebook Like-Box mit Hover Effekt

Geschlossen
  1. #1
    User Pic
    shadowkahn Mitglied
    Registriert seit
    25.08.2008
    Beiträge
    38
    Beitragswertungen
    0 Beitragspunkte
    Hallo Leute,

    habe heute schon länger auf der Homepage gesucht; leider bin ich nicht fündig geworden und ihr könnt mir vielleicht helfen.

    Ich versuche, eine Like-Box von Facebook (verbunden mit einer Facebook Seite) in ilch einzufügen und zwar so, dass man nicht mit den Spaltenbreiten herumexperimentieren muss, sondern die Like-Box mit den jeweils letzten Neuigkeiten von der Seite mittels Mouseover (Hover Effekt) links oben sich ins Bild hinein öffnet.

    Bin nicht gerade das Programmiergenie und hoffe, dass ihr wisst, was ich meine; bei Joomla gibt es ein Modul dafür und ihr könnt es auf externer Link sehen (links oben).

    Bitte um Hilfe - ich wäre euch echt dankbar!!!

    lg

    Michael


    verwendete ilchClan Version: 1.1 N

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    shadowkahn Mitglied
    Registriert seit
    25.08.2008
    Beiträge
    38
    Beitragswertungen
    0 Beitragspunkte
    Ausgehen tue ich u.a. vom HTML Befehl folgender Seite:
    bloggerlatein.blogspot.com/2012/02/facebook-like-box-mit-hover-effekt-bei.html

    Das Facebook Symbol wird auch angezeigt (zwar rechts aber wurst)....jedoch mit dem restlichen Code happerts ein wenig und die Box öffnet sich nicht!!!

    Würde mich freuen, wenn ihr mir helfen könnt... inzwischen habe ich eine ganz normale Like-Box eingefügt was aber nicht schön ist.

    lg
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    So?

    fblikehover.php
    <?php
    defined ('main') or die ( 'no direct access' );
    
    echo '
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/
     </script>
    
    <style type="text/css">
     .likebox{background:
     url("http://1.bp.blogspot.com/-dpYfea24Yb0/T0ADq-4HKlI/AAAAAAAAAq0/IScbnwhJGKY/s1600/fb.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
     .likebox div{border:none;position:relative;display:block;}
     </style>
    
    <div class="likebox">
     <div>
     <iframe style="background:rgb(255, 255, 255); border:currentColor;width:245px;height:270px;
     overflow:hidden;"
     src="http://www.facebook.com/plugins/likebox.php?locale=de_DE&amp;href=http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;
     connections=9&amp;stream=false&amp;header=false&amp;
     height=" frameborder="0" scrolling="no"></iframe> </div></div>
    ';
    
    ?>
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    shadowkahn Mitglied
    Registriert seit
    25.08.2008
    Beiträge
    38
    Beitragswertungen
    0 Beitragspunkte
    Vielen Dank Siggi,

    nur wo binde ich dann diese PHP Datei ein??? beim Loader sagt er mir "Parse error: syntax error, unexpected T_INCLUDE in /home/.sites/12/site217/web/west/include/includes/loader.php on line 33" wenn ich sie einfach in den loader miteinfüge...aber ich denke, dass das irgendwohin im Desing gehört... nur wo???

    lg
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Das ist eine Box.
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    packe sie in include/boxes

    und in der index.htm schreibs einfach {_boxes_fblikehover}
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    shadowkahn Mitglied
    Registriert seit
    25.08.2008
    Beiträge
    38
    Beitragswertungen
    0 Beitragspunkte
    *aufshirnhau* danke :-)

    funktioniert super :-) vielen vielen dank!!!!
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    shadowkahn Mitglied
    Registriert seit
    25.08.2008
    Beiträge
    38
    Beitragswertungen
    0 Beitragspunkte
    also das mit der box funktioniert...

    aber das mit der index.htm leider nicht... aber egal... das reicht mir schon :-)

    danke
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    zillo gelöschter User
    bei mir zeigt er an
    Parse error : syntax error, unexpected T_STRING in / usr / export / www / vhosts / funnetwork / hosting / facecom / include / Boxen / fblikehover.php on line 4


    in der index
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Was soll das Boxen sein?
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    zillo gelöschter User
    ich habe ne fblikehover.php datei erstellt
    <?php defined ('main') or die ( 'no direct access' );
     
    echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/
     </script>
     
    <style type="text/css">
     .likebox{background:
     url("http://1.bp.blogspot.com/-dpYfea24Yb0/T0ADq-4HKlI/AAAAAAAAAq0/IScbnwhJGKY/s1600/fb.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
     .likebox div{border:none;position:relative;display:block;}
     </style>
     
    <div class="likebox">
     <div>
     <iframe style="background:rgb(255, 255, 255); border:currentColor;width:245px;height:270px;
     overflow:hidden;"
     src="http://www.facebook.com/plugins/likebox.php?locale=de_DE&amp;href=http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;
     connections=9&amp;stream=false&amp;header=false&amp;
     height=" frameborder="0" scrolling="no"></iframe> </div></div>
    ';
     
    ?>
    in in include/boxes hochgeladen

    und in der index.htm habe ich {_boxes_fblikehover} einfefügt
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Wie kommt der Fehler zustande? Laut deiner Meldung greift der Fehler in der /Boxen/fblikehover.php, aber den Ordner Boxen gibt es nicht im ursprünglichen Ilch Script.
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    zillo gelöschter User
    wenn ich das {_boxes_fblikehover} im index.htm einfüge und hochlade kommt der fehler text auf der startseite der kommt anscheint mit dem echo nicht zurecht
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    mic_pt Mitglied
    Registriert seit
    03.01.2008
    Beiträge
    319
    Beitragswertungen
    19 Beitragspunkte
    moin moin,

    der button ist ja schon schick lächeln

    Kann ich das script einfach so umändern das ich auch jeweils einen Button für Twitter, Google+ und den RSS feed der seite anzeigen kann - jeweils als eigener slider?

    Muss ich da nur das Bild und die Zieladresse ändern ?
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Sollte normal gehen klar muss du die css position ein wenig ändern sonst sollte es überlappen

    Einfach mal testen zwinker
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    ]Chris[ Mitglied
    Registriert seit
    07.09.2012
    Beiträge
    33
    Beitragswertungen
    0 Beitragspunkte
    Ist zwar schon etwas älter der Fred hier, aber ich grab den lieber nochmal aus anstatt was neues zu eröffnen.

    Ich hätte gerne diese Hover-Box auf meiner Homepage. Ich habe aus dem o.g. Code die facebookhover.php erstellt und sie im Ordner /include/boxes gespeichert.

    In der index.htm habe ich {_boxes_fblikehover} ganz oben eingefügt.

    Leider funktioniert die Box dennoch nicht. Der F-Button ist da, das Menü "hoovert" auch auf. Aber da ist dann leider nur eine weiße Fläche zu sehen.

    Kann mir da evtl jemand helfen?

    Danke schonmal!

    Greetz Chris


    Betroffene Seite: sv-oberotterbach.de
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    Also wenn ich den Quelltext anschaue ... grumml

    Unbedingt Aufbau deines Codes/HTML Dokumentes beachten. Du hast mehrere Header drin.

    <style type="text/css">
     .likebox{background:
     url("http://1.bp.blogspot.com/-dpYfea24Yb0/T0ADq-4HKlI/AAAAAAAAAq0/IScbnwhJGKY/s1600/fb.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
     .likebox div{border:none;position:relative;display:block;}
     </style>
      
    <div class="likebox">
     <div>
     <iframe style="background:rgb(255, 255, 255); border:currentColor;width:245px;height:270px;
     overflow:hidden;"
     src="http://www.facebook.com/plugins/likebox.php?locale=de_DE&amp;href=http://www.facebook.com/pages/SV-Oberotterbach-eV/432771676766542;colorscheme=light&amp;show_faces=true&amp;
     connections=9&amp;stream=false&amp;header=false&amp;
     height=" frameborder="0" scrolling="no"></iframe> </div></div>

    ... und hier stimmt auch nichts
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    ]Chris[ Mitglied
    Registriert seit
    07.09.2012
    Beiträge
    33
    Beitragswertungen
    0 Beitragspunkte
    Sorry, ich glaub mir fehlt da grad der nötige Background. Bin leider nur absoluter Laie in Sachen php, html & co. Die Seite wurde hauptsächlich von nem Bekannten erstellt.

    Mehrere Header? Jetzt im Zusammenhang mit dieser Box oder generell?

    Wahrscheinlich muss ich leider mit der Nase auf den Fehler gestupst werden...:)
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Also hab es gerade nochmal getestet.

    fblikehover.php in include/boxes/
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*<![CDATA[*/ jQuery(document).ready(function() {
            jQuery(".likebox").hover(function() {
                jQuery(this).stop().animate({right: "0"}, "medium");
            }, function() {
                jQuery(this).stop().animate({right: "-250"}, "medium");
            }, 500);
        }); /*]]>*/
    </script>
    
    <style type="text/css">
        .likebox { 
            background: url("http://1.bp.blogspot.com/-dpYfea24Yb0/T0ADq-4HKlI/AAAAAAAAAq0/IScbnwhJGKY/s1600/fb.jpg") no-repeat scroll left center transparent !important;
            display: block;
            float: right;
            height: 320px;
            padding: 0 5px 0 30px;
            width: 245px;
            z-index: 99999;
            position:fixed;
            right:-250px;
            top:20%;
        }
        .likebox div {
            border:none;
            position:relative;
            display:block;
        }
    </style>
    
    <div class="likebox">
        <div>
            <iframe style="background:rgb(255, 255, 255); border:currentColor; width:245px; height:320px; overflow:hidden;"
                    src="http://www.facebook.com/plugins/likebox.php?locale=de_DE&amp;
                    href=http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862&amp;
                    width=245&amp; 
                    colorscheme=light&amp; 
                    show_faces=true&amp; 
                    connections=9&amp; 
                    stream=false&amp; 
                    header=false&amp; 
                    height=320px" 
                    frameborder="0" scrolling="no">
            </iframe> 
        </div>
    </div>


    in der index.htm (include/designs/designname/index.htm) vom Design zwischen </head> und <body>
    {_boxes_fblikehover}



    Zuletzt modifiziert von Siggi am 22.09.2013 - 19:37:15
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    ZitatZitat geschrieben von Siggi
    zwischen </head> und <body>
    ?
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Jub
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    ]Chris[ Mitglied
    Registriert seit
    07.09.2012
    Beiträge
    33
    Beitragswertungen
    0 Beitragspunkte
    Ähm.. nicht streiten:)

    Also, wenn ich das richtig kapiere, startet der Aufruf in der index.htm diese Box.
    Das funktioniert ja auch.
    Die Box als solches funktioniert ja auch, d.h. der Hoover-Effekt geht, das Bild ist da, etc.

    Es fehlt ja "nur" die Verknüpfung zu Facebook, oder?

    <div class="likebox">
        <div>
            <iframe style="background:rgb(255, 255, 255); border:currentColor; width:245px; height:320px; overflow:hidden;"
                    src="http://www.facebook.com/plugins/likebox.php?locale=de_DE&amp;
                    href=http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862&amp;
                    width=245&amp; 
                    colorscheme=light&amp; 
                    show_faces=true&amp; 
                    connections=9&amp; 
                    stream=false&amp; 
                    header=false&amp; 
                    height=320px" 
                    frameborder="0" scrolling="no">
            </iframe> 
        </div>
    </div>


    Müsst dann ja hier irgendwo liegen, das Problem?!


    Edit: Den Facebook-Link hab ich jetzt noch nicht angepasst. Btw. läuft das Ding vielleicht nur bei mir auf dem Rechner nicht?


    Nochmal Edit:
    Wenn ich den ifram ganz normal auf die Seite einbinde, geht auch nichts. Ich hab mir jetzt über facebook den Code für den iframe generieren lassen. Dieser funktioniert auch, wenn ich ihn irgendwo normal auf der Seite einbaue.
    In der Hoover-Box geht es leider immer noch nicht.

    Zuletzt modifiziert von ]Chris[ am 22.09.2013 - 20:55:14
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Wir streiten schon nicht vllt hab ich auch was falsch gemacht zwinker

    Aber bei mir geht es so wie es oben ist habs mit einer neu erstellten ilch version probiert
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Hab es auch mal mit deiner FB Seite probiert geht ohne Probleme.

    Teste es mal bitte mit dieser Box
    fblikehover.rar

    Habs nun damit getestet {_boxes_fblikehover} ganz unten in der Seite einzufügen
        {_boxes_fblikehover}
    </body>
    </html>



    Zuletzt modifiziert von Siggi am 22.09.2013 - 21:32:13
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    ]Chris[ Mitglied
    Registriert seit
    07.09.2012
    Beiträge
    33
    Beitragswertungen
    0 Beitragspunkte
    Super, funktioniert.(Y)YesYesYesYesYesYes
    Vielen, vielen Dank, Siggi!

    Lag es jetzt nur an der Position des Verweises?
    Auf den ersten Blick kann ich jetzt abgesehen von der Größenänderung beim style-Teil nichts finden..
    0 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Ich glaube zumindest war es bei mir so das wenn ich den code von hier kopiert hatte und bei mir eingefügt hab das er automatisch leerzeichen hinzufüge und deswegen eigentlich fehler ausgab zumindest das programm fehler zeigt.

    Darum hab ich mir mal gedacht speicherst diese und sollst mal downloaden und wie es ausschaut gehts ja naja
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    ]Chris[ Mitglied
    Registriert seit
    07.09.2012
    Beiträge
    33
    Beitragswertungen
    0 Beitragspunkte
    Hmm.. Leerzeichen im Code werden also nicht einfach ignoriert? IRgendwie hab ich das aus der C-Vorlesung anno dazumal anders in Erinnerung behalten..

    Naja, wieder was gelernt:)

    Und vielen Dank nochmal!
    0 Mitglieder finden den Beitrag gut.
  28. #28
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    erledigt
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Kritik und Verbesserungen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten