Bootstrap – Add a facebook feed to your bootstrap or html website

Bootstrap – Add a facebook feed to your bootstrap or html website


Hi Guys this is Jamie from http://www.system22.net and http://www.great-webdesign.com/ in this video I want to add a Facebook feed
to my bootstrap website here it’s pretty easy to do and it’s a nice
feature to have on your bootstrap website so the first thing we need to do
or the easiest way to do it I’m going to show you here is go to developers a
script comm and I’ll put this link down below once you’re in there you’ll see
this page and you need to put the URL of the Facebook page that you’d like to
embed in this little box right here and I’ll show you how to put your URL it’s
pretty obvious but supposing you don’t know here we are here’s the URL of the
Facebook page that I want to embed there so I just click on that and copy it and
go back to that site we don’t actually need what’s on the end of that URL there
but once you put it in there and refresh the page it’ll shorten it to the correct
one so I’ll put that in there and we’ll just refresh the page and as you can see
it’s shortened it to the correct version there and if you just scroll down a
little bit here’s a demo of what we’re going to see or an example of what the
actual embedded codes going to look like once once we’ve got this embedded in our
site and this is just what I’m looking forward to a nice feature to have now
all we need to do is get the code so there’s a nice little blue button we
click on that it will pop up a box here now for this tutorial I’m going to use
the iframe because it’s very easy and I’ll just expand that a little bit you
can see what’s going on there’s not a whole lot of code here and all we need
to do is find somewhere to put this in our site
so if we go back to our website that we want to put it in and scroll down and
let’s find a place to put it I’m not going to put it up here with the slider
I don’t think I’ll put it here in the intro section but right here looks like
a good place to put it it would fit quite well there I don’t have to edit
much of this in fact I don’t have to touch that I think I can put it there
with no problem at all okay so how are we going to be that you
say well all you have to do is go to your index.html file or whatever page
HTML file your want to embed it in open it in a text editor I’m using brackets
which is a great free one from brackets dot IO I’ll also put that link below and
once you go to open your page you’re going to get your HTML HTML code here so
what we need to do is scroll down to that section where I want to put it
let’s just have a look it’s right there by the we’re ready it’s just under the
Welcome section right there so forgive damn let’s try and find it here rather
the really here’s the Welcome section and that is the image for that little
iPad or whatever it is the tablet looking iPhone me looking thing there
that’s what we’re actually going to replace so we can go ahead and delete
that and get our code which we had before from the developers dot
facebook.com/ here just select it which was all blue like that just roll your
cursor over it for those of you you don’t know
hit ctrl C to copy go back to our brackets text editor and just paste it
in where will you remove that photo there okay now if we do a quick save
ctrl s and go back to our index.html and do a refresh now that little Facebook
feed hopefully will be in that section there yep there it is and it’s nice you
can scroll it you can click on any of these posts here you can like the page so that is a very very simple way of
embedding a Facebook feed into your bootstrap or html5 site I’m going to
take this a little bit further I want to make that look a little bit more like
how it looked before if you remember we had that sort of iPhone or iPad II
looking element there so let’s let’s just add a little bit of code bit of
custom styling to this if we can’t make it look a little better there I mean
that’s fine but but I want to take it a step further so let’s go back to our
brackets here and have a look at the code okay but wait that’s how wide
obviously how high this is the styles here obviously you can add if you wanted
to you can add style to your CSS file I’m going to go ahead and do in line
here it’s going now not transfer that’s fine so we need to add some style here
what I’m going to do is I’m going to start by giving it a border or let’s say
26 solid and a color of black which is zero zero zero and let’s just have a
look at that Oh before I do that let’s give it a border radius to make it look
a bit more like a an iPhone that will give it rounded corners of the service 325 pics okay let’s say that control
pest and take a look back at our site now it’s to quick refresh there we go
it’s given it it’s given it that border which is nice getting there it’s looking
a bit more like it but I think the iPhone or what that
thing before had a sort of larger board on the top and the bottom then it did
from side to side so let’s adjust that go back to our brackets and let’s make
this border left picks again let’s just copy that paste it next to it control V
and make that border right and let’s just paste it one more time and make it
border top and now the border top we want it almost twice as my last try 40
picks change that to 40 and paste it one more time border bottom so this is
bottom border and again we want a sick one forty forty that looks good okay
let’s do ctrl s to save back to our site and refresh what’s getting there as you
can see the border at the top and the bottom are sicker than the side one
which makes it look a little bit more like one of those tablets or smartphones
which is the kind of effect I was looking for here now it looks like the
the inside part there is is not really showing it’s almost cutting off on the
right-hand side so let’s adjust that so if we go back to our brackets let’s adjust on the width here let’s add
no stri adding 20 pixels so it’s that’ll be width of 360 now which is not too
wide for most smartphones should be able to handle that with no problem if people
are browsing to your site on your smartphone which a lot of people do so
ctrl s to save and back to the site let’s do a refresh yeah that looks a lot
better yes that looks a lot better now we can see the side of this and we
haven’t got anything cut off there and that Scrolls nicely so we’re actually
getting there which is good let’s yeah everything’s working you can
like the page and go to the page you can scroll and you can actually must make
sure we can click on these blog post to actually go to the pages yeah that’s no
problem that works fine okay well that’s pretty much there let’s
let’s just put a cherry on the cake here it’s giving a bit of a drop shadow
underneath just to give it a bit of depth and to do that let’s go back to
our brackets okay drop shadow or a box shadow it is
actually all right now border areas let’s put it right there do and select
box shadow let’s make it we don’t want any left and right we really want it on
the bottom so first numbers left and right so I’m going to set that to zero
and the second number is top and bottom or the the bottom distance there so
let’s give it 10 pixels will do it probably and you add a third attribute
which is the spread of the actual shadow you know whether it’s a hard shadow or
soft shadow so let’s say it’s about 15 pictures what I usually use for this
sort of thing and now of course you’ve got to give it a color so I wouldn’t
give it black which is your zero zero but oh you want to get it pretty close
to black political it’s um like 999 or eight eight eight just try 88 semicolon
Kooks a control s back to our site and a refresh yeah may see we’ve got our box
shadow effect underneath which just gives it a little little bit of a 3d
look without being too heavy on the CSS there I think that’s where we’ll leave
it that’s kind of the effect that I wanted
like I say it’s a great idea to have a Facebook feed in your website and just grow your sight read your post
there on the side click on and we get to them like your page so there we have it
I hope that’s been useful to you once again this has been Janey’s from system
22 and great web design comm thanks for watching have a great day

10 Replies to “Bootstrap – Add a facebook feed to your bootstrap or html website

  1. Only watched a couple of your vids, but I really like them. You've already given me some great tips for site no.2

  2. This video is good, but I am having issues with it as well. When I access the developer.facebook….section for plug ins things start out looking like your video however once I put in the public page URL that I want to embed in my site and hit refresh the URL I put in is wiped out and it goes back to the generic URL for Facebook. I also do not get that little preview that is above the "Get the code" button that you have in your video. I can get the code and snag the iframe code but putting that into my html code doesn't work, I can get a very nice border like you created but no actual feed. What is the deal? Help?

  3. Nice video! When you collapse the page (i.e. Chrome > Inspect) and "Toggle Device" as Mobile, don't you have issues with the right edge not being responsive? Always blows out my layout… interested in your response. Thanks!

  4. hi i used your code and it works perfectly on IE and Chrome however in firefox i can't seem to get it to work , this also included on your own personal site – https://imgur.com/a/QTe7j2V i did have ublock on, but i turned that off but still it doesnt work. also the side bar doesnt appear. any ideas?

  5. I'm having issues making the iframe responsive in relation to the rest of the website, looks fine on the upper and lower resolution thresholds but goes kind of out of place in between, is there any way to make it resize along with the rest of the "grid"?

Leave a Reply

Your email address will not be published. Required fields are marked *