Dodaci za web sajt https://developers.facebook.com/docs/plugins

Facebook dodaci

• https://developers.facebook.com/docs/plugins

• Na ovoj stranici se nalaze svi dodaci za web sajt koje nudi Facebook.

Facebook like and share

• https://developers.facebook.com/docs/plugins/like-button

Facebook like and share

• Pronaći Like Butto Configurator na stranici.

Facebook like and share

• U tekstualno polje URL to Like uneti adresu do svog sajta ili Facebook strane.

Facebook like and share

• Kliknuti na taster Get Code .

Facebook like and share

• Pojaviće se prozor kao a sli i. • Kliknuti na IFrame tab.

• Kopirati dobijeni kod unutar svog sajta.

Facebook like and share

https://www.youtube.com/

Youtube dodatak

• Otići a stra i u https://www.youtube.com/ .

• Pro aći video koji želite da prikažete u okviru svog sajta.

Youtube dodatak

• Kliknite na Share .

Youtube dodatak

• Zatim kliknuti na ta E ed . • Kopirati dobijeni kod u okviru svog sajta.

Youtube dodatak

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Google Maps dodatak

• https://developers.google.com/maps/documentation/javascript/adding-a-google-map .

Google Maps dodatak

• Da bismo na naše sajtu prikazali apu, potre o je u okviru svoje stra i e dodati sledeći kod kako bismo pristupili Google Maps API-u:

• <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>

API key

• Da bismo autentifikovali našu aplika iju u Google Maps, moramo ga dobiti API key.

1. Ulogovati se na svoj Google nalog i zatim otići a stra i u https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true&pli=1 .

API key nastavak API key nastavak

API key nastavak API key nastavak

• Vratiti se u kod i promeniti putanju za ucitavanje Google Maps API-a.

• Umesto YOUR_API_KEY ubaciti dobijeni API key.

Google Maps marker

• Kada smo povezali stranicu sa Google Maps API, sada trebamo u napraviti div u kome će o prikazati loka iju koju želi o.

Google Maps marker

1. U okviru svoje stranice napraviti div i zadati proizvoljan id.

2. Zatim je potrebno definisati u CSS-u width i heigth tog div-a, kako bismo definisali dimenzije okvira za prikaz mape.

Google Maps marker

3. Sledeći korak je da u JavaS ript-u napravimo funkciju kojom se u napravljenom div-u prikazuje mapa.

• google-map je id atribut napravljenog div-a.

<script type="text/javascript">

function initMap() {

var lokacija = {lat: 44.814514, lng: 20.483899};

var map = new

google.maps.Map(document.getElementById('google-map'),

{

zoom: 17,

center: lokacija

});

var marker = new google.maps.Marker({

position: lokacija,

map: map

});

}

</script>

Google Maps marker

Google Maps marker

• Rezultat:

Promena pozicije pokazivača

• U prethod o pri eru s o pokazivač postavili a loka iju škole. • Pokazivač se ože postaviti a ilo koje esto a api. • U prethodnom kodu treba promeniti vrednosti za lat i lng koje će o

do iti po oću Google Maps.

Pro e a pozicije pokazivača

• Otići a Google Maps. https://www.google.rs/maps/ .

Pro e a pozicije pokazivača

• Pro aći eku loka iju a api. • Desni klik na lokaciju i izabrati Šta je ovde?

Pro e a pozicije pokazivača

• Na d u stra i e će se prikazati lat i lng te lokacije, razdvojene zarezom.

Pro e a pozicije pokazivača

• Kopirati dobijene vrednosti i promeniti u kodu.

Promena pozicije pokazivača

Dodaci za web sajt