speciale Facebook button

[petjes]

Op de website van forum gebruiker Yomi, staat een hele leuke facebook button.
Zijn website is : http://www.witvisforum.nl

Nu ben ik op zoek naar de code van deze facebook button en hoe kan ik deze op de hoofdpagina plaatsen zoals Yomi heeft gedaan ?

Voeg er nog 2 foto's bij hoe het eruitziet.





Iemand enig idee.

MVG Patrick
http://www.twinsite.nl

[Solidjeuh]

Kijk naar de bron code.. Daar vind je de meeste info

Code: Selecteer alles

    <style type='text/css'>
    /*<![CDATA[*/
    #fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
    .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfHVMXhWk/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
    /*]]>*/
    </style>
    <script type='text/javascript'>
    /*<![CDATA[*/
        (function(w2b){
            w2b(document).ready(function(){
                var $dur = 'medium'; // Duration of Animation
                w2b('#fbplikebox').css({right: -250, 'top' : 350 })
                w2b('#fbplikebox').hover(function () {
                    w2b(this).stop().animate({
                        right: 0
                    }, $dur);
                }, function () {
                    w2b(this).stop().animate({
                        right: -250
                    }, $dur);
                });
                w2b('#fbplikebox').show();
            });
        })(jQuery);
    /*]]>*/
    </script>
    <div id='fbplikebox' style='display:none;'>
        <div class='fbplbadge'></div>
        <iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FSportvistotaal&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
    </div>

[Theriddler]

komt me bekend voor http://www.phpbbservice.nl/forum/viewto ... 32&t=11973

[Solidjeuh]

Je bent beter om de css apart te plaatsen.

Open: JE_STYL/theme/common.css

Plaats helemaal onderaan op een nieuwe lijn:

Code: Selecteer alles

#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
    .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfHVMXhWk/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;
}

Open: overal-header.html

zoek:

Code: Selecteer alles

</head>

Plaats boven:

Code: Selecteer alles

<script type='text/javascript'>
    /*<![CDATA[*/
        (function(w2b){
            w2b(document).ready(function(){
                var $dur = 'medium'; // Duration of Animation
                w2b('#fbplikebox').css({right: -250, 'top' : 350 })
                w2b('#fbplikebox').hover(function () {
                    w2b(this).stop().animate({
                        right: 0
                    }, $dur);
                }, function () {
                    w2b(this).stop().animate({
                        right: -250
                    }, $dur);
                });
                w2b('#fbplikebox').show();
            });
        })(jQuery);
    /*]]>*/
</script> 
   <div id='fbplikebox' style='display:none;'>
        <div class='fbplbadge'></div>
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Froddelkwartier&width=250&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;background:#FFFFFF;' allowTransparency="true"></iframe>
    </div>

Je moet enkel de naam van je facebook pagina veranderen in de overal_header.html

[petjes]

Bedankt voor de snelle reactie.
Het is inmiddels gelukt met bovenstaande code.

MVG Patrick
http://www.twinsite.nl

Best wel leuk / handig deze buttons aan de zijkant van het scherm, waar kan je nog meer van dit soort scripts vinden.
Eventueel zelf aan te passen met bijvoorbeeld buienradar / nieuwslinks oid.

uiteraard dat je de positie kan aanpassen.

Berichten samengevoegd. Dubbelposten is niet toegestaan, zie de algemene voorwaarden #3.5.

- PhilipvD