Facebook Login & Graph API | JavaScript SDK

Поділитися
Вставка
  • Опубліковано 20 жов 2024
  • In this freestyle coding video I will implement Facebook login using the JavaScript SDK and we will take a look at the Graph API. We will also be working with the Graph API explorer and taking a look at the different permissions that we can request with the access token
    CODE: Code for this video
    github.com/bra...
    Graph API Explorer:
    / explorer
    Register Facebook App:
    / apps
    SPONSORS:
    DevMountain Bootcamp - goo.gl/6q0dEa
    EDUONIX COURSES: Please use affiliate links from website below
    www.traversymed...
    SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
    www.paypal.me/t...
    / traversymedia
    FOLLOW TRAVERSY MEDIA:
    / traversymedia
    / traversymedia
    / bradtraversy

КОМЕНТАРІ • 227

  • @battenhallsam
    @battenhallsam 2 роки тому +3

    Still works in 2022 and by far the best Meta API JavaScript SDK tutorial I have found. Thank you Brad!

    • @AlexisXavier
      @AlexisXavier 2 роки тому

      Was gonna ask if it still worked and almost scrolled past this comment
      Brad is awesome

  • @prospersikhwari5289
    @prospersikhwari5289 7 років тому +84

    The smile I get when I see a new video from you .....man keep it up. Thanks for all the knowledge you're sharing. I'm from a third world country and just through watching your videos and a little googling I've been able to make an income. I owe you Stax

    • @TraversyMedia
      @TraversyMedia  7 років тому +17

      That's awesome. That is the stuff that gives me drive to do this.

    • @prospersikhwari5289
      @prospersikhwari5289 7 років тому +3

      Traversy Media keep it up. My currency is 0.15 to the dollar so I need to make even more to support you in a meaningful way but I will so that you can keep changing lives.

    • @TraversyMedia
      @TraversyMedia  7 років тому +9

      You support me just fine by watching and liking, etc.

    • @IlemonaJamesAtuluku
      @IlemonaJamesAtuluku 7 років тому

      yours is better mine is 0.0032... kinda fuckup country

    • @gidmanone
      @gidmanone 7 років тому

      u gotta live in Nigeria to make that claim bro.
      how is programming over there

  • @FedorSteeman
    @FedorSteeman 7 років тому +22

    This may sound strange, but the occasional little slip ups, typos, backtracking, error fixing and even saying things wrong and then self-correcting just add to the charm and authenticity! It really gives a feeling of actual coding and thinking going on and makes you part of the process, because it entices you to think along. You're like: "Wait, what? ... Oh, OK!" Tutorials that are all polished and neat are just sleep inducing. So keep up all the little imperfections and not be all prepared, Brad!

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      I feel the same way. Actually many of my favorite UA-camrs don't do much editing and are very off the cuff. I am not an always prepared and polished kind of person so I guess it shows in my videos.

    • @FedorSteeman
      @FedorSteeman 7 років тому

      Yeah! Funny thing is, I couldn't do it myself. I have been trying on my UA-cam channel (different account) to talk more spontaneously, but I always end up as a dribbling idiot with a heavy accent. XD
      So back to scripts every time for me.

    • @TraversyMedia
      @TraversyMedia  7 років тому +9

      Keep practicing. I hate to do this but go and watch my first videos. I cringe when I watch them. My Boston accent is so thick and I just sound horrible. You will get into your groove after a while. EVen now I have low confidence and sometimes Im like "should I even upload this?" and I do and everyone loves it. You are your worst critic. Everyone is

  • @davidbasil2727
    @davidbasil2727 7 років тому +11

    You and Derek Banas are the best programmers on youtube; others are mainly fluff.

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      Thanks. That's a compliment. Derek is great

    • @General_Aladeen
      @General_Aladeen 7 років тому

      Derek Banak is not. Adam Khoury and Toni Alicea were also the two best.

    • @davidbasil2727
      @davidbasil2727 7 років тому

      Just found net ninja; yeah, that guy is a master as well.

    • @umeshkumar143ify
      @umeshkumar143ify 6 років тому

      j

  • @aaronharrison6459
    @aaronharrison6459 2 роки тому

    It really gives a feeling of actual coding and thinking going on and makes you part of the process.

  • @MrTaraskoro
    @MrTaraskoro 7 років тому +1

    Just admit that you are wizard! Yesterday I looked for this kind of video. And today! Voila. It is in your channel.
    Thank you. Very much!

  • @jerrytroyanna5090
    @jerrytroyanna5090 3 роки тому

    I have got to tell you, I absolutely LOVE your attitude regarding smartass know-it-all programmers. I've been developing software since 1989 and those annoying SOB's have been a thorn to tolerate for all of these years. Your video was outstanding, BTW

  • @thomasmoraes7067
    @thomasmoraes7067 3 роки тому

    The best video about integrated facebook api with javascript sdk 10/10

  • @juniorbarbosa7838
    @juniorbarbosa7838 7 років тому

    Really good, I'm from Brazil and I tried every video class in portuguese but not successful, then I watched this one and I got it... Thank you, you are really detalist.

  • @michaelchambers5606
    @michaelchambers5606 7 років тому

    WOW -- I have been searching through videos to find a guide like this. I can not thank you enough for creating this video. BLESS YOU!!!!!

  • @NickyKeyse
    @NickyKeyse 7 років тому +2

    Great introduction to FB login and graph api, thanks Brad. Can't wait for the Google api tutorial from you.

  • @FreakyCoach
    @FreakyCoach 7 років тому +2

    Bro! I think you're a mind reader, reading your subscribers mind. lol... what I think of you upload the video.
    Millions of thanks and congrats in advance for 100k subscribers.

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      Thanks man. Almost there :) another month

  • @aayush_dutt
    @aayush_dutt 6 років тому

    This is one of my favourite UA-cam channel

  • @luxmarble-vy8qr
    @luxmarble-vy8qr 8 місяців тому

    Brad Traversy never disappoints

  • @alexandros-markovits
    @alexandros-markovits 7 років тому +2

    I was wondering again how this fb login was happening and you gave the answer before I started looking for it :D thank you again for all the hard work.

  • @sahilbedi6541
    @sahilbedi6541 7 років тому +5

    Hi Brad thanks for the video. I have learnt so many things from your video tutorials. Thanks once again Brad. :)

  • @stefanventer575
    @stefanventer575 4 роки тому +1

    thank you so much for this video! This was exactly what I was looking for. All the basics I need to get started. There is a ton of documentation on this Facebook graph which is kind of overwhelming, but this video made it easy to get started.

  • @liquidwason
    @liquidwason 7 років тому

    whoa dooood. I was completly lost before watching your video but tnx to you now ... I'm not so lost ... keep up the good work.

  • @albertorojas5738
    @albertorojas5738 7 років тому +1

    Thanks man, now I'm going to create a WebApp that let you upload photos more easily.

  • @nikhilhukkerikar6753
    @nikhilhukkerikar6753 5 років тому

    Brad - I googled for facebook login api tutorial and your video pops up so just know that there's always someone with a wisea** know it all comment on more than one of your videos but I would say this great job man keep up the good work and know that you are helping a lot of us devs in your videos and it means a lot to us so ignore them and keep doing what you do the best!
    Happy new year in advance and hope to see you next year with even more amazing videos like this one cheers!

  • @tuhidulislammridul3126
    @tuhidulislammridul3126 5 років тому

    best teacher in the world , love you sir

  • @coding_ss632
    @coding_ss632 7 років тому

    wow this is so magical... everytime i want to learn something new ... brad makes and uploads video of it on UA-cam 😁😁😁😁

  • @MrSoorajsingh
    @MrSoorajsingh 7 років тому +1

    Wow man.!
    Thanks for taking up my request ^_^
    I was watching your crash course videos right now. LOL.

    • @TraversyMedia
      @TraversyMedia  7 років тому +2

      You're welcome :) I try and get to as many as I can especially if it is something I am interested in and have nor done yet on the channel

    • @MrSoorajsingh
      @MrSoorajsingh 7 років тому

      You made it look simple.! Amazing explaination :)

  • @kadidibwa968
    @kadidibwa968 Рік тому

    I love how real you are...

  • @63montywilliams50
    @63montywilliams50 2 роки тому

    Litterally you have a video for everything i search, u da 🐐 bro! Great content i really need to go ahead and get that book u published. As a matter of fact im gonna look it up rn. I dont even know whats in it but i remember u mentioning it recently.

  • @ddozefacts
    @ddozefacts 7 років тому

    woah!.. thank you for your tutorial. By the way, I'm the one who send you a request message on facebook. Thank very much Traversy Media. THANK YOU!!!! :)

  • @nickehultgren
    @nickehultgren 5 років тому +1

    Great tutorial Brad! Keep up the good work!

  • @LatinoWebStudio
    @LatinoWebStudio 3 роки тому

    Thanks so much for the tutorial, it was really helpful in understanding the Graph API better.

  • @krowwweee2918
    @krowwweee2918 7 років тому +4

    I actually laughed out loud in a few spots. Love your work. Please keep going :D

  • @vigneshs2886
    @vigneshs2886 7 років тому

    Wow whenever I see a Unity SDK, I smile :)

  • @revenant097
    @revenant097 4 роки тому

    Great tutorial, works just fine other than some HTTPS certificate configuration you need to do now in 2020 and the obvious outdated css. I was having serious trouble interpreting the official documentation and code I saw online but you explained it perfectly. Thank you!

  • @IlemonaJamesAtuluku
    @IlemonaJamesAtuluku 7 років тому +8

    How do you do your studies? I really wants to be like you. I wish to resign from my regular job soon.. Kinda boring staying locked up here. But this part of the world not easy for us as developer. We hardly have power to work from home.
    Love Brad from Nigeria

    • @TraversyMedia
      @TraversyMedia  7 років тому +25

      Your job may be boring but please don't resign without having something else. As far as how I study, believe it or not but what helps me the most is documentation. For instance, Angular, React, even for this video, the documentation is always the most up to date. I also watch online courses and even other UA-camrs. Ive been doing courses for 4 years or so and I have been fortunate to get paid to learn and then teach the course. I will be making a video on this stuff soon.

  • @mahathirmohammad8635
    @mahathirmohammad8635 5 років тому

    salute you thousand time. thanks from core of my heart. i learn graph api from this video and make money $$.

  • @smarthouse-learnprogrammin4309
    @smarthouse-learnprogrammin4309 7 років тому

    Great Video! One thing to look out using Facebook SDKs though - is writing integration tests - since Facebook is often changing things "on the fly" - breaking your own solution.

  • @idenm
    @idenm 6 років тому +1

    Instant subscription thanks to this video!

  • @kamalpandey7177
    @kamalpandey7177 7 років тому

    Waiting for rails tutorial. Keep up the good work

  • @amjadiqbal5353
    @amjadiqbal5353 7 років тому

    Very Very impressive . I like your all Tutorial Keep going on

  • @dani4uro
    @dani4uro 7 років тому

    I really like your intro's!!! You are a great guy!

  • @steavebohn2349
    @steavebohn2349 4 роки тому

    thank you verry much for this ussefull and cultive content , because of your ckontent i become familiar with html and css and javascript and react thank you verry mush

  • @IgnacioAinol
    @IgnacioAinol 5 років тому

    excellent contribution thank you very much. Greetings from Chile

  • @cryptocurrencyog
    @cryptocurrencyog 5 років тому

    Great channel. Thank you so much for sharing all your knowledge. You helped me out so much on understanding a wide variety of frameworks and what they do. Thank you sir!

  • @daymaker_trading
    @daymaker_trading 4 роки тому

    Thank you so much for all the work and for sharing your knowledge! Your tutorials help so much!
    Even if the topic was really hard for me at first attempt, after your tutorial I start to make progress, thank you very much!!

  • @daniellaerachannel
    @daniellaerachannel 7 років тому +1

    Thank you man for your effort
    Great vidéo

  • @meeruislandresortspa5402
    @meeruislandresortspa5402 7 років тому +1

    Another Great Video! Thanks Brad.

  • @webtutorials4279
    @webtutorials4279 Рік тому

    March 2023 Update: Still works 100%.

  • @bhoopalani7256
    @bhoopalani7256 6 років тому

    I'm sure this is going to change my life!! Sorry I'm yet to contribute anything. But I soon and definitely will do.

  • @electrotsmishar
    @electrotsmishar 3 роки тому

    extremely helpful. thanks Brad

  • @jorgenorena727
    @jorgenorena727 6 років тому

    Great tutorial.... now is clear for me.... Facebook Documentation sucks!!

  • @MenAtWorkMedia22
    @MenAtWorkMedia22 7 років тому +2

    Great video like always! Thank you!

  • @sebdesigns5230
    @sebdesigns5230 2 роки тому

    Hey Brad!
    Your tutorials remind me of a prof. I had for web development course work, yrs ago.
    Very helpful and pragmatic in your examples and flow of logic!!
    Questions about Fb Api:
    Can one query an individual page's events, and then display info about each event, w/o requiring a visitor to the 3rd party fb-feed derived site to be logged-in to fb?
    Thanks,
    Scott

    • @healinbeet
      @healinbeet 2 роки тому

      Oh wow. I have this exact question. I'm trying to figure this out too.

  • @mahmoudkandel2230
    @mahmoudkandel2230 2 роки тому

    thank u brad for this awesome tutorial

  • @SleekCollins
    @SleekCollins 7 років тому +1

    Oh, my word! Thank you!
    I've got a MERN (or Vue in place of React) project involving creating an app which, among other things, lets the user login then downloads Facebook photos and saves them in a DB (Mongo), and wrapping my head around this is exactly what I needed as part of the building process.
    By the way, in your opinion, which of either React or Vue would be _more_ ideal for such a task? I'm looking for efficiency, bearing in mind I'm nowhere near proficient in either.
    You're a godsend to web dev learners, Brad.

    • @TraversyMedia
      @TraversyMedia  7 років тому +1

      I would suggest Vue for the frontend but not by a long shot. I just think Vue is easier and more practical. React is great as well but for someone that is new to both I think you will have a bit of an easier time with Vue

    • @SleekCollins
      @SleekCollins 7 років тому +1

      Thank you for the quick response. And yeah, the learning curve with Vue seems a lot less steep compared to React.

  • @caroldanvers265
    @caroldanvers265 6 років тому

    Brad I don't think the fb login works on my local machine when I tried to enter the url website onto Facebook's information. But thank you for making this video. You're awesome!

  • @dannyfonseca963
    @dannyfonseca963 7 років тому

    Excellent video. Thank you. Question: Would you be able to point me to another video/website/documentation on Facebook login Valid OAuth redirect URIs ? I'm assuming the functionality here is that once logged in successfully the url defined in the redirect field will be displayed. I can't get that to work.

  • @prafullaraichurkar4369
    @prafullaraichurkar4369 5 років тому

    really helpful , thanks Brad!

  • @santiagoojeda5177
    @santiagoojeda5177 6 років тому

    Great job Dude! you really save me!

  • @alzheimancer
    @alzheimancer 7 років тому +1

    Dejavu, I'm working on this project!

  • @brendiums
    @brendiums 7 років тому

    You're incredible! Thank you so much. Learned a loooot!

  • @Tiara48z
    @Tiara48z 7 років тому

    Thanks for making these videos.

  • @winniecapstone4965
    @winniecapstone4965 6 років тому

    This may be an obvious question, but can large scale businesses use/integrate the Graph API into business?

  • @newabyuser
    @newabyuser 6 років тому

    @T bro you rock I learn a lot from you

  • @anubhavsingh1433
    @anubhavsingh1433 7 років тому

    Dear Brad,
    Thanks as always.
    Is it possible to to have a starter video on how to migrate from systemjs to webpack/angular-cli? It is pretty confusing how you configure setup to handle 3rd party libraries in angular-cli, especially if u have a running application made with systemjs.

  • @MrEnz54
    @MrEnz54 7 років тому +1

    Hi Brad, thanks for the video :-)

  • @bubbenswebbdesign
    @bubbenswebbdesign 5 років тому

    Thanks alot for this video. This video helped me to finally implement facebook login for my site. :D

  • @flashteq1030
    @flashteq1030 5 років тому

    brilliant brad

  • @NadeemGorsi
    @NadeemGorsi 6 років тому

    Pls make a video about Google login.. Thankx nd Happy Coding..

  • @akashpatel5823
    @akashpatel5823 6 років тому

    Really helpful video. Thanks!

  • @ahmedkamal4390
    @ahmedkamal4390 7 років тому

    You're doing a great job man! I've a question.
    I am a game developer by profession but want to dive into Web Dev. I always get confused by the number of stacks there are, which one to go with and which one is good for job prospects?I am ready to learn any :D

  • @gghanshyam01
    @gghanshyam01 6 років тому

    Very nice video. Thanks man !

  • @pdvega6350
    @pdvega6350 7 років тому

    Thank you, this video so detail that help me to use fb dev sdk....

  • @emas24now
    @emas24now 6 років тому

    Aloa from Germany - great Tuts on your Chanel .. i really like it ! What do you think about a "service workers / web workers" tutorial ? Thank u ;)

  • @programmed509
    @programmed509 7 років тому

    Very nice video but I'm facing with the server...how did you manage to link atom with apache?

  • @raniab7585
    @raniab7585 7 років тому

    i loved it thank you and i hope you'll make another one or a part two pls

  • @eddieantar6958
    @eddieantar6958 7 років тому +14

    Who is this hater that keeps giving a thumbs down.....

    • @TraversyMedia
      @TraversyMedia  7 років тому +18

      Personally I think it is another UA-camr. Maybe the assholes that have stolen my videos and I reported

  • @jacobusstrydom7017
    @jacobusstrydom7017 5 років тому

    Love how you just tell the know it all's not to be a dick. Thumbs up just for that

  • @MultiCodFTW
    @MultiCodFTW 6 років тому

    Great videos. I was wondering if it is possible to extract posts on my newsfeed to check the reactions on the posts my friends and followed pages post for statistical (education) purposes? Thanks

  • @rubanprakash8088
    @rubanprakash8088 7 років тому

    Hi Brad it was just amazing stuff. I m facing a small issue while doing the same. The issue is the posts are not getting displayed in my webpage but only loop is running perfect. is there any alternative way to print tha value without using dollar and {} symbols ?

  • @riderblack6401
    @riderblack6401 5 років тому

    Great tutorial THanks!

  • @youboys0077
    @youboys0077 6 років тому

    First of all thank you. I just want to know will it work in a website having no SSL certificate or with no https... please reply

  • @Sam-xv5ko
    @Sam-xv5ko 4 роки тому

    Nobody:
    Brad: Ahhmmmm Excuse Me!!
    Really love cool stuff from you..

  • @khalil_rahmani
    @khalil_rahmani 7 років тому

    Hey Brad ! I need your HELP ! can you give us some tips on how to use the Graph API with Vue JS to display profile data (ex.: Albums) ?

  • @IsfhanAhmed
    @IsfhanAhmed 6 років тому

    big big thanks for this video

  • @cheerdad
    @cheerdad 6 років тому

    Great video. Thanks!!!

  • @murunwascengy2762
    @murunwascengy2762 7 років тому +1

    great video Brad, can you please do video on how to intergrate facebook ads on web?

  • @ApexHighlightReels
    @ApexHighlightReels 6 років тому

    another great video ! thank you ! i was wondering if there is anyway to get my new feed with the graph api.

  • @factionzer0
    @factionzer0 7 років тому +1

    Hey, how did you get your google chrome new tab page to look so sleek? Is it an extension?

    • @TraversyMedia
      @TraversyMedia  7 років тому +3

      Yes it's called Momentum. Awesome extension

  • @JuniorCommandant
    @JuniorCommandant 5 років тому

    Thanks a lot for this tuto . How can we change the style of the facebook button?

  • @JUANVargas-bx7sk
    @JUANVargas-bx7sk 5 років тому

    Is there a way to create a Facebook app automatically? with a library or something?

  • @jessec7359
    @jessec7359 6 років тому

    great video, I have an company and a competitor wrote a fake review without a comment. Facebook said there is nothing I can do to take the star rating off since there is no comment. Is there a way to use the API to take it off the fake star rating?

  • @sabinaseidakhmetova898
    @sabinaseidakhmetova898 6 років тому

    I don't understand which kind of site url should I use?

  • @cagansit7268
    @cagansit7268 7 років тому +1

    Thanks Brad

  • @longboardcreator
    @longboardcreator 7 років тому +1

    awesome video!

  • @user-cf7vy4hl8p
    @user-cf7vy4hl8p 7 років тому

    Can you more data visualization, perhaps with D3? Started out with something simple.

  • @laithharzalli5081
    @laithharzalli5081 3 роки тому

    Where i can find same thing but for facebook pages with a page acces token

  • @bg73
    @bg73 7 років тому

    What are you using for the welcome page on Chrome with image background and the time/date etc?

  • @abhishekshah416
    @abhishekshah416 5 років тому

    Awesome video

  • @firshen
    @firshen 4 роки тому

    muy bueno, me ayudo bastante.

  • @kaysiz-zw
    @kaysiz-zw 7 років тому

    Hie Traversy, would you by any chance be doing a lesson on building a facebook App using either php or JS?

  • @webdev7345
    @webdev7345 Рік тому

    When I refresh page automatically logged out and show's login button
    what is the exact issue here

  • @sarathrj10
    @sarathrj10 3 роки тому

    I want to get visitor post for my page along with visitor details like name and profile picture. The graph API is giving me the posts but i am not able to get visitor data. I tried getting from property but still not getting anything.