speciale Facebook button

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Forumregels

LEES: Richtlijnen voor Support. Vul de support template in!
phpBB3.0.x
Verschaf iemand geen servertoegang tenzij het niet anders kan. Maak altijd eerst een volledige backup en verander de inloggevens na afloop. Eigen risico.
Plaats reactie
Gebruikersavatar
petjes
Berichten: 129
Lid geworden op: 14 jan 2006, 15:27
Locatie: Waalwijk
Contacteer:

speciale Facebook button

Bericht door petjes » 17 jan 2014, 19:13

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.

Afbeelding

Afbeelding

Iemand enig idee.

MVG Patrick
http://www.twinsite.nl

Gebruikersavatar
Solidjeuh
Berichten: 681
Lid geworden op: 05 okt 2010, 06:28
Locatie: Aalst / Belgie
Contacteer:

Re: speciale Facebook button

Bericht door Solidjeuh » 17 jan 2014, 22:10

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>
Forum voor NL Extensie vertalingen ---> https://www.solidjeuh.fun
----------------------------------------------------------------------------


Gebruikersavatar
Solidjeuh
Berichten: 681
Lid geworden op: 05 okt 2010, 06:28
Locatie: Aalst / Belgie
Contacteer:

Re: speciale Facebook button

Bericht door Solidjeuh » 17 jan 2014, 22:31

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
Forum voor NL Extensie vertalingen ---> https://www.solidjeuh.fun
----------------------------------------------------------------------------

Gebruikersavatar
petjes
Berichten: 129
Lid geworden op: 14 jan 2006, 15:27
Locatie: Waalwijk
Contacteer:

Re: speciale Facebook button

Bericht door petjes » 18 jan 2014, 09:49

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

Plaats reactie