Search This Blog

Sunday, June 12, 2016

Spruce up your website or blogs using embed codes

A nice way to add some extras to your website or blog is by embedding additional elements using embed codes. With embed codes, you can spruce up your website with everything from videos and Tweets to pdfs and interactive widgets from 3rd party sites!

"But what if my website builder already has an insert button for some of these things? Why should I bother with the embed code?"

Well, knowing a little bit of code gives you a little bit more control over the elements in your website. For example, if I had used the "insert video" option to insert the videos below, Blogger automatically sizes my video frame for me. But if I know a little bit of HTML, I can edit the the size of my video using HTML code to do so!

So go ahead, play around with the HTML a little bit! You don't have to be an expert in order to tweak a few things and make your website or blog look just the way you like!

(Want to learn just enough HTML to be dangerous? Take a few lessons on KhanAcademy or Codecademy!)


Embed a Video from YouTube

  • Find the video that you want to embed
  • Click on the share button beneath the video
  • Click on "embed" and copy the embed code
  • In HTML editing mode on your website or blog, paste the embed code where you want the video to show up
  • Adjust the size of the video frame as needed
  • Go back into compose mode, save and preview your site

My embedded video from YouTube:

Embed Tweets

  • Copy the embed code from the Tweet via Twitter.com
  • In HTML editing mode on your website or blog, paste the embed code where you want the Tweet to show up
  • Go back into compose mode, save and preview your site

My embedded Tweet:

Embed PDFs 

I use Google Sites, which does not have it's own widget for previewing pdfs on a website. Thus, using HTML is imperative if you want to embed a pdf on your website.
  • Make sure the .pdf file is saved in your Google Drive or elsewhere on the web and is shared publicly on the web
  • Copy the http:// address or share link for the .pdf
  • Return to HTML editing mode on your website or blog, click where you want to post a preview of the .pdf file and type the code below in blue
  • Insert the .pdf's web link or share link in quotes where it says share link
  • If using a share link from Google Drive, delete the end of the share link up to the last forward backslash; type "preview" after the backslash
<iframe src="share link/preview or web link" width = "480" height = "640"></iframe>
  • Preview your website and you should see your .pdf file posted in an iframe on your site/blog

Embed GIFs 

When you open a .gif on giphy.com, the first share option is "embed". To embed a .gif on your site/blog...
  • Copy the embed code
  • In HTML editing mode on your website or blog, paste the embed code in the place that you want the gif to appear on your site
  • Adjust the size as desired by changing the values in parentheses after "width=" or "height=" 
  • You can also adjust your gif's code to include a frame by changing the frame value from "0" to a number (the frame below is a value of 5 pixels)
  • Preview your site and you should see your gif!

    Embed interactive widgets from 3rd part sites

    This is one of my favorite uses for embed codes! Sites like Thinglink, Versal, Blendspace, and others allow you to use embed codes to actually embed an interactive lesson onto a webpage or blog.

    • Follow the same steps used for embedding Tweets or GIFs, using the embed code provided for the lesson that you want to share (usually found under the "share" option for that lesson or interactive)
    • Adjust the height, width, and border of your iframe as desired
    • Check the scrolling option in your code (want viewers to be able to scroll through the lesson... make sure scrolling=yes
    • Save and preview your site. You'll end up with an embedded lesson in an iframe, like the one I've shared below!




    No comments:

    Post a Comment