In this lesson we will learn how to add embeddable content from other websites to ours. We may find a lot of possibilities on the Internet to ease our work, saving time on programing, designing and security.
<iframe> - this tag is used to include in a page content from another page. We will not create it ourselves, on the pages which provide embeddable content there is mostly a possibility to copy code to embed.
Example using Google Maps:
If you want to share a location on your webpage, you can draw a map, but it is not necessary. You can use Google Maps as visualized on the picture above. There are other possibilities to use personalized maps with Google.
Example embedding YouTube video:
If you need to embed a video on your website, you can copy it to your server and run it from there, but that can mean increased traffic and cost, or you can upload to a video sharing channel and embed the video in your webpage. That means the video runs on another server.
Example embedding Facebook like button:
If you want to embed a social media plugin, you should search on their page for a way to generate code to embed in your page. There are more ways to do this, we choose the <iframe> again to include a like button.
We need to add a link to the page we want others to share or like, so I copied the link of the LIFT project.
- The previous examples can be solved without registering to a website, but there are more possibilities by registering. You can download program codes and personalized codes to access data, statistics and resources from the pages you use.
- There are possibilities to use external form. Using HTML forms you need to use database and programs to process the data, but using an external, embedded form has the advantage that your data gets filled in a table and downloaded in a spreadsheet. This needs registering on a site (like Google).
- You can set a Custom Search Engine to add a search bar to your website – to search the content of your website. You may need to create a Google account and copy your website to a server.
- Resize the video if does not fit, changing the width attributes value;
https://www.w3schools.com/tags/tag_iframe.asp;
https://developers.google.com/maps/documentation/embed/guide;
https://support.google.com/youtube/answer/171780?hl=en;
https://developers.facebook.com/docs/plugins.
