Archief - Social network buttons

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
-

-BVR-

Legacy Member
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. :p

Bram
S

Spacy2003

Legacy Member
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.
-

-BVR-

Legacy Member
Spacy2003 zei:
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.
Klik om te vergroten...

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 ... :p Bedankt voor de feedback :)
S

Spacy2003

Legacy Member
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 ;)
-

-BVR-

Legacy Member
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.
S

Spacy2003

Legacy Member
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-CSS-framework/blob/master/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/matchMedia.js/blob/master/matchMedia.js ).

Mvg ;)
-

-BVR-

Legacy Member
Spacy2003 zei:
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-CSS-framework/blob/master/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/matchMedia.js/blob/master/matchMedia.js ).

Mvg ;)
Klik om te vergroten...
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 :p

@Dubbelpunt: als dat aan mij gericht was, geen probleem ik heb er zelf veel uit geleerd! Als het niet aan mij was: /fail :p
S

Shaddix

Legacy Member
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?
-

-BVR-

Legacy Member
Dubbelpunt zei:
Waar ergens in de code zit de URL van de facebook-like pagina?
Bijvoorbeeld Facecook | Facebook :$
Klik om te vergroten...

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!
-

-BVR-

Legacy Member
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 :s
-

-BVR-

Legacy Member
Inderdaad. Om een of andere reden leest de browser nu een cookie van de browser uit waarin de taal van de facebookgebruiker die ingelogd is op FB opgeslagen staat en gebruikt die taal. Als jij je FB op Spaans hebt staan, en je bent ingelogd, en je bekijkt mijn site dan zal de likebutton in het spaans zijn. Rotsysteem.

Blijkbaar kan je dit met iframe oplossen, maar dat lukt me ook niet. Damn FB blijft altijd maar hun concepten aanpassen zodat het voor webdevs moeilijker is om een consistente oplossing te hebben.
D

Dieterg

Legacy Member
Wat ik nog zou toevoegen is syntax highlighting. Voor de rest, nja precies of je kijkt naar facebook hé ;-)..

linkje synstax highlighting: klik
-

-BVR-

Legacy Member
Mam zei:
Wat ik nog zou toevoegen is syntax highlighting. Voor de rest, nja precies of je kijkt naar facebook hé ;-)..

linkje synstax highlighting: klik
Klik om te vergroten...

dat ga ik zeker eens bekijken! Thank you :)
enja, dat was dan ook de bedoeling. Ben blij dat de opzet geslaagd is :p

bedankt voor je comment :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan