Instagram

Instagram is a non-Williams service that hosts photos and videos for sharing on the web.

Automatic embedding

WordPress can automatically embed Instagram images and videos in your page/post- all you have to do is put the correct Instagram URL on a line by itself.

Getting an Instagram URL

1. Find your image on Instagram.

Home: If you are logged in, and on your “Home” screen (http://instagram.com/), click the “…” button at the bottom right of the picture (orange arrow below), and select “View Photo Page” (green arrow below).

instagram-home

Users & hashtags: If you are viewing a collection of images grouped by user or hashtag, click on the thumbnail of an image, which will launch the photo page in a lightbox popup window, or open the photo page in a new tab.

2. Once you’re at the photo page, copy the URL in the location bar of your browser, outlined in red below. The URL will consist of https://instagram/p/  followed by a group of characters, optionally followed by /?taken-by=username.

instagram-share

3. You will need to make the following changes to the URL before it will work correctly:

  • change https:// to http://
  • remove /?taken-by=username from the end, if present
https://instagram.com/p/1Ir4wOOlaR/?taken-by=williamscollege

becomes

http://instagram.com/p/1Ir4wOOlaR/

Overview

WordPress allows you to automatically embed video, audio and other content from most popular media hosting sites simply by placing a URL on a line by itself in a page or post.

Full list of supported sites

Getting the URL

Finding the URL to paste into WordPress is a bit different for each media hosting site. In most cases, you’ll be looking for a share icon that looks something like one of these:

shareicons

More specific instructions for finding the correct URLs, and demos of the embedded content, can be found on these pages:

Inserting the URL

This example uses a YouTube video, but the process is the same for all automatically embedded media: simply paste the URL on a line by itself, as shown in the “correct” example below.

embed1

Preview

If you are editing your page/post in visual mode (orange arrow, below), you will see a preview of your movie (or other type of content) where you placed the URL.

Embedded content toolbar

Click on the preview of your embedded content to reveal a toolbar, outlined in red below. To edit the embedded content’s URL, click the pencil. To delete the content, click X.

embed2

  • This is useful if you don't want to clutter your page with videos, or if you have a gallery of screenshots you want to link to the corresponding videos. Important: Be sure you use the 'embed' version of the URL.

    • For a text-only link, use the text editor (rather than the visual editor) and add the following to the link HTML: data-featherlight="iframe"

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" data-featherlight="iframe">Youtube</a>

    Youtube

    • For an image link, add the following to the link html (make sure there is only one 'class' attribute or the link will break): class="type-video" 

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" class="type-video"><img class="alignnone size-thumbnail wp-image-4447" src="https://admission.dev.williams.edu/files/Zach-Babat-150x150.png" alt="" width="150" height="150"></a>

Note: as of 4/2015, no previews displayed for Instagram in the visual editor, but the content displays correctly when viewing the finished page.


Demo

Here's what an embedded Instagram image looks like:

 

The campaign is coming! #WeekendforWilliams #WilliamsCollege

A post shared by Williams College (@williamscollege) on