Thread: Social network buttons
-
13-07-2011, 20:21 #1Deactivated user
- 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. 
BramLast edited by -BVR-; 13-07-2011 at 21:03.
no votes
Reply With Quote
-
-
13-07-2011, 21:45 #2Member
- 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.no votes
Reply With Quote
-
13-07-2011, 21:50 #3Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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
-
13-07-2011, 22:05 #4Member
- 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.
no votes
Reply With Quote
-
13-07-2011, 22:34 #5Deactivated user
- 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
-
13-07-2011, 23:06 #6Member
- 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
no votes
Reply With Quote
-
22-07-2011, 09:37 #7no votes
Reply With Quote
-
23-07-2011, 11:02 #8Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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
-
25-07-2011, 01:15 #9
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-beno votes
Reply With Quote
-
25-07-2011, 12:08 #10
Waar ergens in de code zit de URL van de facebook-like pagina?
Bijvoorbeeld Facecook | Facebook
no votes
Reply With Quote
-
26-07-2011, 00:31 #11Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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&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
-
26-07-2011, 16:41 #12Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Next chapter button toegevoegd

Embed social network buttons tutorial - page 1 | bramvanroy.beno votes
Reply With Quote
-
26-07-2011, 17:42 #13
prima!
PSN: Shaddix-beno votes
Reply With Quote
-
26-07-2011, 17:51 #14Deactivated user
- 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
-
27-07-2011, 09:42 #15Approved 9liver
- 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

