Instagram is a non-Williams service that hosts photos and videos for sharing on the web.
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).
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.
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
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.
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:
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.
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.
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>
- 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.
Here's what an embedded Instagram image looks like:
Join us tomorrow at 9 p.m. ET for a Twitter chat for admitted students. To participate, use and follow #Williams2019. Admitted students are invited to ask questions about life at Williams—from academics, to weather, to food, to extracurricular activities, to anything else you're wondering about. Members of the Williams community—current students, alumni, faculty, staff, and parents—come on by to share your Williams experiences and extend a welcome to our future Ephs!