Archief - Hoe sociale media toevoegen aan html-site

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.
t

tonymontana

Legacy Member
Beste,

steeds vaker zie je sociale media op webblogs en ik zou dit dan ook graag toepassen op mijn website.

Ik zou dit willen doen op volgende manier:

Versatile Furniture Piece For the Unutilized Corner Spaces: LEAN

De sociale media moet dus meegaan met de pagina tijdens het scrollen. Een gewone facebook button onderaan een pagina plaatsen kan ik zelf ook;)

Weet iemand of hier javascript codes of dergelijke bestaan voor statische websites type .html


Alvast bedankt!
C

Curahee Q

Legacy Member
Zet ze in een div en zet de css van die div op position: fixed;
t

tonymontana

Legacy Member
Qua programmatie heb ik niet zoveel kaas gegeten. Daarom dat ik opzoek ben naar een reeds aangemaakte code waar ik dan zelf wat mee kan prutsen tot het goed is :)
Q

QuietKillah

Legacy Member
programmatie? er is niet veel programmatie aan hoor :p

html:
<div id="bla"> HIER SOCIALE MEDIA </div>


css:
#bla{
position:fixed;
//nog width, height en positioneren
}
-

-BVR-

Legacy Member
Javascript is niet nodig. Iets als dit bv.:

HTML
Code: 
<div class="like">
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js#appId=162589687136634&amp;xfbml=1"></script>
  <fb:like href="http://www.fancy.bramvanroy.be" send="true" layout="box_count" width="55" show_faces="true" font="arial"></fb:like>
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

CSS
Code: 
.like {
	position: fixed;
	top: 7px;
	left: 13px;
	height: 120px;
	width: 62px;
	background-color: #fff;
	display: block;
	padding-left: 7px;
	padding-top: 8px;
	border-radius: 7px;
	margin: 0;
}

Voorbeeld vind je hier (Wel zonder twitter :))

EDIT: twitter toegevoegd.
t

tonymontana

Legacy Member
Thanks, wat een handig forum! De nieuwe google button zal ik zelf wel kunnen :) Daarna handmatig toevoegen aan 100 pagina's...
-

-BVR-

Legacy Member
Google is hetzelfde. Daar vragen ze enkel om het script in je head te zetten (dus niet binnen je body tag) :)

Klik
t

tonymontana

Legacy Member
Toch nog enkele vraagjes over deze code:

Hoe kan ik ervoor zorgen dat dit verschijnt achter de content bij andere schermresoluties? Op sommige pc's staat de content over de volledige breedte waardoor de sociale media over de content komt te staan.


Iemand een idee hoe ik dit zo makkelijk mogelijk kan integreren en bewerken zonder php en content management? Ik wil mijn .html extensies niet wijzigen.
-

-BVR-

Legacy Member
z-index aanpassen.

Bv.: #content waar alles instaat op z-index: 1000 zetten en #like dan op z-index: 900

EDIT: of dit werkt weet ik niet want die widgets krijgen van een external stylesheet vaak een z-index mee.
t

tonymontana

Legacy Member
Ik heb bij beiden Z-index bijgeplaatst maar er verandert niets. Het perfecte voorbeeld is eingelijk dit forum. Op mijn pc zie ik de reclame duidelijk links en rechts en op m'n andere pc zie ik de reclame slechts gedeeltelijk.

Dit is m'n css:

#wrapper {
width : 990px;
margin : auto auto;
text-align : left;
padding : 0 7px;
}


#body {
border : 1px solid #b4b4b4;
margin : 10px 0;
background : url(/images/wrapper.gif) repeat-y 700px 0%;
background-color : #ffffff;
}

#content {
width : 700px;
float : left;
}
-

-BVR-

Legacy Member
Misschien moet ge voor ge met deze dingen begint eerst fatsoenlijk uw eigen code leren schrijven.

1. #body is geen id, moetgewoon 'body' zijn.
2. normaalgezien geef je geen border aan je body. Normaal staat er altijd een margin: 0; op je body, gebruik hiervoor een wrapper. Je body kan je wel gebruiken voor achtergrondafbeelding en achtergrondkleur
3. margin: auto auto? Waarom?
4. float: left; op je content, waarom?
t

tonymontana

Legacy Member
Ik ben begonnen met deze website door gebruik te maken van een bestaande template die ik naar mijn hand heb proberen zetten. Van programmatie heb ik, zoals ik al zei, niet teveel kaas gegeten, anders zou ik hier geen info vragen.

Om toch op je vragen te antwoorden:

1. Ik heb 2x body staan. ( 1 maal gewoon en 1 maal als id)
2. Op body algemeen staat geen border
3. Als ik float left op m'n content wegdoe dan wordt mijn rechtermenu pas getoont ter hoogte waar de content stopt.


Ik kijk geregeld m'n css en html na met checkers en die zijn volledig foutloos. Daarom leek volgens mij alles ok.
Q

QuietKillah

Legacy Member
BramVroy zei:
No shit :p Maar ik had toevallig al een voorbeeld maar dan stond enkel FB al in :)
Klik om te vergroten...
haha, i know, i know... kwou het er voor de duidelijkheid gewoon nog eens bij vermelden :p
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