Page 1 of 2 12 Last
  1. #1

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16

    Social network buttons

    Embed social network buttons tutorial - page 1 | bramvanroy.be

    Ik had zin om een tutorial te maken betreffende sociale netwerken en hoe dit te implementeren. Het is vrij basic, maar ik hoop dat het wel wat mensen helpt. Ik wilde vooral een snelle, overzichtelijke tutorial maken.

    Design is inderdaad afgekeken van Facebook, maar is dan ook de bedoeling.

    Ik heb zelf heel veel bijgeleerd met dit te maken (jQuery functies, meer van CSS begrepen, php include en require gebruikt, current page highlighting met CSS etc.)

    Commentaar op de code en design zie ik graag! Likes, comments, tweets, +1's zie ik nog graag-der.

    Bram
    Last edited by -BVR-; 13-07-2011 at 21:03.
    no votes   Reply With Quote Reply With Quote

  2. #2
    Spacy2003's Avatar
    Registered
    28/05/03
    Location
    Diepenbeek
    Posts
    2,290
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    2/2
    Leuk voor de doorsnee gebruiker, paar kleine opmerkingen misschien.

    2.1 Hide buttons when the window is too small
    Het media query alternatief misschien ook voorzien en javascript als fallback hiervoor gebruiken?

    Plaatsing van javascript tussen de HTML
    Ik zou alle script tags net voor het sluiten van de body plaatsen.
    Het is zoiezo properder en je bent zeker dat je de scripts niet 2x gaat inladen.
    Als je nu bijvoorbeeld 2 facebook like buttons op een pagina gaat plaatsen zit je al in de puree met je #fb-root en scripts. Dit moet maar 1x gedefinieerd worden op een pagina.
    Volg m'n vogel op twitter.
    What about lesscoffee for the front-end guy.
    no votes   Reply With Quote Reply With Quote

  3. #3

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Spacy2003 View Post
    This quote is hidden because you are ignoring this member. Show
    Leuk voor de doorsnee gebruiker, paar kleine opmerkingen misschien.

    2.1 Hide buttons when the window is too small
    Het media query alternatief misschien ook voorzien en javascript als fallback hiervoor gebruiken?

    Plaatsing van javascript tussen de HTML
    Ik zou alle script tags net voor het sluiten van de body plaatsen.
    Het is zoiezo properder en je bent zeker dat je de scripts niet 2x gaat inladen.
    Als je nu bijvoorbeeld 2 facebook like buttons op een pagina gaat plaatsen zit je al in de puree met je #fb-root en scripts. Dit moet maar 1x gedefinieerd worden op een pagina.
    Had ik ook aan gedacht, maar als je toch sowieso JS gebruikt voor de oudere browsers, waarom dan ook niet voor de nieuwere? Het lijkt me wat zot om extra code te schrijven voor iets dat geen functionaliteit of kwaliteit bijbrengt? Of zit ik hier fout?

    En, bedoel je de scripts van de buttons? Daar heb ik eigenlijk een vraagje over: hoe komt het dat sommige scripts enkel werken als ze binnen de body tag staan, en sommigen enkel als ze in de head staan? Vind het maar raar ... Bedankt voor de feedback
    no votes   Reply With Quote Reply With Quote

  4. #4
    Spacy2003's Avatar
    Registered
    28/05/03
    Location
    Diepenbeek
    Posts
    2,290
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    2/2
    1. Het is een vrij zwaar stukje javascript dat om de pixel gaat controleren als er iets aan de DOM veranderd moet worden (je javascript gaat dus het x aantal pixels dat je vergroot of verkleind uitgevoerd worden) . Met media queries is de performance een stuk hoger. Waarom dan de man met de moderne browser straffen met eigenlijk een vuil stukje javascript?

    2. Modernizr en de google analytics tracking code zijn twee goede voorbeelden die ik kan bedenken om je javascript in de head te laden. Modernizr heeft als reden dat er eerst een create element moet gebeuren voordat de html5 elementen gebruikt kunnen worden. Voor de GA tracking code is de rede dat ook de niet volledig geladen paginas gemeten kunnen worden. Bijvoorbeeld ik laad de pagina halfweg en verlaat de pagina, dan is de GA javascript al uitgevoerd en kan er bijgehouden worden als er nog een page load gebeurd is, zo krijg je een nauwkeurigere meting en kan je laadtijden, etc bijhouden.

    In al de rest van de gevallen zet je best al je scripts in de body. De reden is vrij simpel, javascript files blokkeren het laden van de pagina, aangezien deze bestanden vaak een redelijke grootte hebben kan je best eerst je HTML inladen. Zo ziet de gebruiker alvast de pagina, weliswaar zonder javascript maar de meeste javascript ga je toch pas gebruiken als er een event gebeurd of vlak na de page load.

    edit: ik bedoel inderdaad de scripts van de buttons

    Hopelijk heb ik je wat kunnen helpen
    Last edited by Spacy2003; 13-07-2011 at 22:13.
    Volg m'n vogel op twitter.
    What about lesscoffee for the front-end guy.
    no votes   Reply With Quote Reply With Quote

  5. #5

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Dat is zeker duidelijk, en helpt me zeker! Ik ga morgen misschien eens editen

    Toch vraag ik me dan af waarom het google scriptje wel in de head moeten worden geladen? Ik veronderstel omdat er nog geen 'basisdiv' geplaatst is in de code waar het javascript zich kan in nestelen en dat moet dus nog worden gemaakt 'voor' de rest geladen kan worden? Terwijl er bij twitter en facebook er respectievelijk al wel een link en een div in de body staat. Klopt dit?

    En dus jQuery etc. zou jij ook pas onderaan de pagina laden? Hoe doe je dit? Gewoon los, of in een aparte div #scripts of zo?

    Over media queries: ik begrijp wat je bedoelt, maar hoe zou je dit dan doen? Met conditional comments? Maar dan target je enkel IE en oudere webkit/mozilla browsers worden dan uitgesloten. Ik denk niet dat ik dit kan toepassen zonder bepaalde browsers buiten spel te zetten en dit werkt toch op alle browsers perfect. En que performance zit het nu ook wel goed, misschien dat het op grotere schaal wel duidelijker zichtbaar is dat de JS oplossing slechter performt.
    no votes   Reply With Quote Reply With Quote

  6. #6
    Spacy2003's Avatar
    Registered
    28/05/03
    Location
    Diepenbeek
    Posts
    2,290
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    2/2
    Het heeft er inderdaad wat mee te maken, als een element nog niet in de DOM aanwezig is kan er ook moeilijk vanuit javascript naar verwezen worden. Vandaar dat de meeste geschikte plaats onderaan is. De plaatsing van google analytics in de head heeft eerder met de functionaliteiten van GA te maken dan de manier van integratie in de DOM.

    Ivm het inladen van jQuery, hieronder vind je mijn default template:
    https://github.com/kristof/Reattiva-...ter/empty.html

    Media Query support kan gededecteerd worden met javascript, één van de scriptjes die op zulke support controleerd is Modernizr ( Modernizr ). Modernizr gaat classes toevoegen aan de html tag als er support voor is of niet. Als je graag wil weten hoe dat er juist gechecked wordt op MQ's ( https://github.com/paulirish/matchMe.../matchMedia.js ).

    Mvg
    Volg m'n vogel op twitter.
    What about lesscoffee for the front-end guy.
    no votes   Reply With Quote Reply With Quote

  7. #7
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    thanks!
    no votes   Reply With Quote Reply With Quote

  8. #8

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Spacy2003 View Post
    This quote is hidden because you are ignoring this member. Show
    Het heeft er inderdaad wat mee te maken, als een element nog niet in de DOM aanwezig is kan er ook moeilijk vanuit javascript naar verwezen worden. Vandaar dat de meeste geschikte plaats onderaan is. De plaatsing van google analytics in de head heeft eerder met de functionaliteiten van GA te maken dan de manier van integratie in de DOM.

    Ivm het inladen van jQuery, hieronder vind je mijn default template:
    https://github.com/kristof/Reattiva-...ter/empty.html

    Media Query support kan gededecteerd worden met javascript, één van de scriptjes die op zulke support controleerd is Modernizr ( Modernizr ). Modernizr gaat classes toevoegen aan de html tag als er support voor is of niet. Als je graag wil weten hoe dat er juist gechecked wordt op MQ's ( https://github.com/paulirish/matchMe.../matchMedia.js ).

    Mvg
    Ik heb besloten om in dit project nog geen Modernizer in te voegen. Ik ben van plan om binnenkort echter een uitbreiding te schrijven hoe men dit gemakkelijk kan implementeren op dynamische sites (php) en eventueel met sommige cms's. Daar zal ik dan misschien jouw ideeën bijvoegen, en als je wilt link ik naar je, maar dan moet je wel een homepage geven of zo

    @Dubbelpunt: als dat aan mij gericht was, geen probleem ik heb er zelf veel uit geleerd! Als het niet aan mij was: /fail
    no votes   Reply With Quote Reply With Quote

  9. #9
    Shaddix's Avatar
    Registered
    08/09/09
    Posts
    6,121
    iTrader
    23 (100%)
    Mentioned
    9 Post(s)
    Reputation
    3/121
    kleine bumb, maar het gaan naar een volgende pagina vind ik niet zo intinuïtief (was net even een kijkje aan het nemen door dat ik je sig las)

    misschien onderaan de tekst nog eens telkens een knop zetten voor de volgende pagina?
    PSN: Shaddix-be
    no votes   Reply With Quote Reply With Quote

  10. #10
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Waar ergens in de code zit de URL van de facebook-like pagina?
    Bijvoorbeeld Facecook | Facebook
    no votes   Reply With Quote Reply With Quote

  11. #11

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Dubbelpunt View Post
    This quote is hidden because you are ignoring this member. Show
    Waar ergens in de code zit de URL van de facebook-like pagina?
    Bijvoorbeeld Facecook | Facebook
    Is het niet duidelijk? Dit is uw like-div:

    Code:
     
    <div id="fb">
        <div id="fb-root"></div>
    	<script src="http://connect.facebook.net/en_US/all.js#appId=180335358696692&amp;xfbml=1"></script>
        <fb:like href="http://www.facebook.com/pages/Facecook/100757526637249" send="true" layout="box_count" width="55" show_faces="false" font="lucida grande"></fb:like>
      </div>


    @Shaddix: ja, misschien wel. Als ik tijd heb voeg ik er onderaan nog 'to next page' toe Bedankt voor je comment!
    no votes   Reply With Quote Reply With Quote

  12. #12

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    no votes   Reply With Quote Reply With Quote

  13. #13
    Shaddix's Avatar
    Registered
    08/09/09
    Posts
    6,121
    iTrader
    23 (100%)
    Mentioned
    9 Post(s)
    Reputation
    3/121
    prima!
    PSN: Shaddix-be
    no votes   Reply With Quote Reply With Quote

  14. #14

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Hmm, als ik de links op 9lives volg naar mijn website dan staat de likebutton in het Nederlands (hoewel ik hem toch in het Engels aanroep), en als ik rechtstreeks naar de website ga is die wel in het Engels. Vreemd
    Last edited by -BVR-; 26-07-2011 at 20:21.
    no votes   Reply With Quote Reply With Quote

  15. #15
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    De layout van facebook like is veranderd?

    http://www.diigo.com/item/t/2599734_81759264_4067809
    ...
    no votes   Reply With Quote Reply With Quote

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in