How to embed Youtube, Addthis, Disqus, Google Maps & Eventbrite on a Dreamweaver page

Hi, my name is Dan. In this video we're going to look at a few other things that you could embed that might be useful for you.

So, we were looking out for services that allow paid or free embed codes to make your website do things that potentially could be really tricky for you to do on your own, and manage. So first of all, what I want to do is clear a space for it. So I've cleared a space at the top here for my map. I'm going to come down here and clear these away so I can put some-- something that can really fit in the page. I'm going to dump in lots of bit codes just so you can see how easy they are, and what they get up to.

So in this case, I'm going to grab my Row. There's a Column inside of it, I'll keep that one but I'll delete this Column on this side. I'm going to grab this guy, I'm going to extend him up to about '12'. Where does this want to go? I'll delete this image inside of it, and then drag it out. Dreamweaver is having not a great time with it. So I'm going to make sure I'm on Large. I'm going to switch it here, and set it to '12', force it to go up to-- not sure what's wrong over there. I'll leave it in though because it might happen to you. So I've switched it out, so it's 12, so it fits in. I'm going to stick my Embed code in here. I'm going to hit 'Split' view, so I can see it. And in here is my Column. I'm got put some codes in here.

Let's go and have a look at what's easy to use. You choose probably one of the most common ones used. Here it is here. You can see, I use it on my site, I use Youtube I use a private channel so people-- so I can control it a little bit more, but I get to use the power of Youtube, so I've got one of my videos here, and what I want to do is, we're looking for down the bottom here, there's one called Share. And then, the one I want to call Embed. Remember, Embed's the word. Sometimes they call it widgets in different programs but generally either Embed or Widgets. I'm going to select this.

You can see here, I can pick height and a width. I can go through, and go 'Show More', it could give me more customized. I can just hide things like- I'll turn this off, 'Show suggested videos at the end'. Just to get some inappropriate appearance. I can 'Show Player Controls’, yes, I've had Play and Stop here. All these types of things, I can put in specific height and width. I'm going to leave mine standard Youtube size, and I'm going to grab 'Embed Code'. 'Copy' it, 'Dreamweaver', 'paste' it in here. You'll notice at the top here, I've got a lovely video replay. Then we switch out to-- here we go, here is my map from Google, and here's my video from Youtube playing on my site.

Now if you're not using Youtube, using Vimeo, it does the same thing, or Wistia, does the same thing. Just copy and paste it, and you get the power of their service. So let's jump out and look at a different one. So I'm going to bin Youtube. Let's look at some other ones. Another one in Embed code which is quite useful is a calendar. It might show that-- say you're a professional, and you're available or busy, you can set up a calendar in Google Calendar, which is free. I'm just going to show you how to add the Irish holidays. So I've got this Holiday Calendar set up in Google. I go to 'Calendar Settings', and here, there's an Iframe. You could do this with any calendar you create. Now I just copy it. I could go through and customize the color and size, and different options, but I'm just going to copy it, and put it into Dreamweaver. And I'm going to paste it in here, and voila, hopefully…

Back up to my Preview version. There's a calendar, and it's totally usable. I can switch to Week view, Agenda view. You can customize it a little bit more. It's a great way to get things, like well, holidays in Ireland, I don't have to go through and do anything. Or you can put things like, when you're available. Say you're a personal trainer, or a dentist or anybody that needs to show when there are bookings available. You can show that using Google Calendars. You can't style so much like you can some other widgets. You can do some basic stuff with colors, but it still looks a little bit Googley.

Next we'll look at is something like Eventbrite. Eventbrite, I use quite a bit for, say I'm running in-house classes, and I've got a course coming up to teach Dreamweaver. People can book on it, in Dublin, or in this case, my class is in Auckland. When you're setting it up, it's free to start with, Eventbrite. They take commission on sales. They call these widgets, rather than embed. I click on it, and they got a few different ones. I'm going to use this one here, Ticket Form. And there should be, down the bottom here, a bit of copy and paste code, copy it. And you could see now, I can take payments from my website, hopefully. I get rid of the old Iframe from the calendar, paste this one in. I'm going to check out our Preview version.

On my lovely page now, I've got the option that people could buy a course, so they can join my June 13th one. They can pick 'Quantity', and book now, and pay now through my website. So instead of trying to set it all up yourself in Dreamweaver with this booking, and drop-down buttons, and quite technical stuff, and setting up payment gateways, and all sorts of other crazy stuff, you can use and leverage these other bits of-- they're technically called Software Service. It's a bit of website that will do all the processing of your events for you. And to be honest, it saves a lot of time. And if I'm honest, I use a lot these embeds to leverage other people's knowledge and learning, and IT support, and technical abilities. So I just use a lot of Embed Codes for lots of different things.

Let's look at a couple more before we move on, like Twitter. So this is my Twitter grab, here I am here. danlovesadobe, follow me if you are a Twitter user. What you can do in here, say I want my feats to appear on my website. So I can go to settings here, I can go down to 'Settings'. And over here, on the side here, there's one called Widgets. Remember, it's Widgets or Embed Codes. I can click 'Create New'. I'm going to have this little block here that displays all my tweets, including 'Exclude replies', 'Include replies', 'Exclude replies'. And you can pick some basic colors, some basic heights. Little bits, you can't do too much. But I'm going to click on 'Create Widget', and what happens is, down the bottom here, there's a little bit of Embed Code. We know what to do with that now. I'm going to 'Select' it all, 'Copy' it, go here. Get rid of this guy, paste him in. And hopefully now, if I jump out to my Preview, there he is there. Here's my lovely trophy. People can start to see things that I've been working on. They can follow me from here. It's a handy little option.

The same thing applies for Facebook. Any other social networks, LinkedIn have Embed Codes to show you tweets. You can make your site look-- I find these social options gives, especially if you are active on social media, it gives you stuff that might be kind of dead and doesn't get up anywhere very much. Give it new contents and new updates. I haven't updated mine since before I went away for Christmas. So it's probably not great to show you're not doing anything on social media. In my case, I'm not going to put my tweets up here.

Rather than show you all the rest of them, because we understand them now, we understand pretty much. We find everything, the Embed Code, or Widget and we'll just go through, and copy and paste it on to our website. I'll show you a few things I've used on one of my sites. So this one here, there's a few things, this thing here is called the Addthis. So 'addthis.com', if you want to go and have a look. And it's just a really easy thing to set up, it's free. It allows people to click and share socially. My pages here, just really handy, just copy and paste the code. It handles all the hard work of delivering it off, and adding these updates here.

Other thing I've used on this page is this thing here, it's called Disqus. I wanted a quick and easy way to get a forum going where people can add questions and answers. Technically you'll need a database to do that. It's quite a bit out of scope of our current Dreamweaver class where we may be into doing large scale database. Which is something you might want to go and do, but to be honest, this thing here, you'll see, the style of it, it's quite common. Why? Because everybody is using Disqus, which is an easy way to copy and paste rather than use somebody else's technical ability to add a forum like thing to your website. So check out Disqus for that one. Check the spelling there. D-I-S-Q-U-S.

Another thing I'll show you on this site here that I use. Down the bottom here, there's an email subscribe button to my emailer. So, what you can do - if you're not already - go to bringyourownlaptop.com, go to the bottom and subscribe, and I'll send you updates and links, and all those types of things. What it does is-- I'm into MailChimp. MailChimp is an email system that will send out emails to people, and they will give you an Embed Code, so people can add their email address, and then hit 'Subscribe'. And it will handle it, and add it to your list so that when you do have to send out a big email bill, or email newsletter, your list is all created, and ready to go in MailChimp.

Now there are hundreds of other Embed Codes. I'm not going to go through everything, but if you are thinking of doing something, and you're like "How do I add this to my website technically using Dreamweaver?" you might go off and see if there's a company that you can sign up for. Often there's free options that you can then just embed on your site, and potentially later on go and build it yourself. But you could leverage somebody else's work at the moment and just get going quickly. That's going to be it for the Embed Codes.