How to Embed Almost Anything into a Post

Login or Register to Hide This Ad

Zachary

𝓡oyal 𝓜ango 𝓒réme Frappuccino Survivor
Administrator
Sep 23, 2009
12,543
31,423
113
Newport News, VA
twitter.com
<div class="blue_alert" style="margin-top:0px;">
This list is currently incomplete and will be updated regularly. Check back soon for more.
</div>


Now seems like a good time to write up a long-overdue guide on how to utilize the numerous embed codes Gavin and I have built for inserting content from external sources into posts on the site. If you have any questions about any of the codes below, let me know.

—————————————


How to Embed
Images


<div style="padding: 15px; border: 1px solid #d8d8d8; background: #f8f8f8;">From a URL:

If you've uploaded the image you wish to embed to a 3rd party service (Imgur is recommended), you'll need to get the URL for the file you uploaded- not the page your image is located on, but the actual location of the file itself. This address should end in something like .jpeg, .jpg, .png, .bmp, etc. Simply replace "PictureURL" with that adress in the code below:

Code:
[img]PictureURL[/img]
</div>


<div style="padding: 15px; border: 1px solid #d8d8d8; background: #f8f8f8;">From Instagram:

Copy the URL of the image's page on Instagram that you wish to embed. Replacing "InstagramPostURL" with the address of the image's page, use the code below:

Code:
[instagram=InstagramPostURL]
</div>


<div style="padding: 15px; border: 1px solid #d8d8d8; background: #f8f8f8;"><a name="Flickr">From Flickr:</a>

First you'll want to upload the images you wish to post to a dedicated Flickr image set. After that is complete, go to the newly created set's page. The URL should look something like this:

Code:
https://www.flickr.com/photos/parkfans/sets/72157630410800106/
Copy the string of numbers between the final slashes (in the example above, "72157630410800106") and paste them into the code below where you see "SetID"

Code:
[flickrset=SetID]
</div>

—————————————


How to Embed
GIFs


<div style="padding: 15px; border: 1px solid #d8d8d8; background: #f8f8f8;">From a URL:

Embedding an animated GIF works the same as embedding an image. Simply post the GIF URL (should end in .gif) inside the IMG tags as displayed below.

Code:
[img]PictureURL[/img]
Unfortunately, this description of the process is often deceptively simple. Many GIFs these days are hosted on sites like Giphy. Finding the actual GIF URLs for images hosted on such sites can often be difficult. Typically you should be looking for a link in the embedding area of the GIF's page that ends in .gif. In the case of Giphy, the image URL can be found under the advanced tab and is labeled as the "GIF Download" URL.
If anyone is having trouble finding the direct GIF link for a certain service, ask in this thread and I'll try to give instruction on how it can be hunted down.
</div>


" />
—————————————

How to Embed
Videos
From YouTube:

Copy the URL of the YouTube video and paste it into the code below in place of "YouTubeURL":

" />
Code:
[video=youtube]YouTubeURL[/video]
From Vine:

Go to the page for the Vine you wish to embed (the URL should include "/v/" followed by a string of letters and numbers). Paste that address into the code below in place of "VineURL":

" />
Code:
[vine=VineURL]

—————————————

How to Embed
Status Updates
From Facebook:

Go to the post page for the status update you wish to embed (the URL will likely have "/post/" in it). Replace "FacebookPostURL" in the code below with the address of the Facebook post.

" />
Code:
[facebook=FacebookPostURL]
From Twitter:

Go to the page for the tweet you wish to embed (the URL should include "/status/" in it). Replace "TweetURL" in the code below with the address of the status update you wish to embed.

" />
Code:
[tweet=TweetURL]

—————————————

How to Embed
Maps
From Google Maps:

In Google Maps, navigate to the area you'd like to embed. Click the gear icon in the lower right corner and select "Share or Embed Map." From there, go to the "Embed Map" tab and copy the embed code given. Paste the code into the editor and then delete everything except the URL after src=. For example, if the generated embed code was the following...

" />
Code:
iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1904.5626983346492!2d-76.64536294837178!3d37.23658138937554!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sus!4v1423884881355" width="800" height="600" frameborder="0" style="border:0"></iframe>

Code:
https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1904.5626983346492!2d-76.64536294837178!3d37.23658138937554!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sus!4v1423884881355

" />
Code:
[gmaps=GoogleEmbededMapURL]
 

Zachary

𝓡oyal 𝓜ango 𝓒réme Frappuccino Survivor
Administrator
Sep 23, 2009
12,543
31,423
113
Newport News, VA
twitter.com
In addition to updating the formatting of the opening posts, I also just added instructions for embedding Google Maps views and Vine posts to the list. Since these are two of the lesser-used embeds, here are some demos for you:

[gmaps=https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d3470.6591012269214!2d-76.6448876!3d37.2341297!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sus!4v1423887589862]

[gmaps=https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1423887512175!6m8!1m7!1sBJ6FOOMgk1XM5A4z46EwhA!2m2!1d37.232908!2d-76.644924!3f164.5182831543022!4f17.495440333732347!5f0.7820865974627469]

[vine=https://vine.co/v/MLWtFutMUlm]
 
  • Like
Reactions: Luke and Nicole

Nicole

Administrator
Jul 22, 2013
9,043
23,261
113
Arlington, VA
That sounds like a fantastic idea, Joe.

That said, I want everyone to know that this post took Zachary literally hours to build. He was hand coding for a very long time. It might a while before he wants to devote an afternoon and evening to a single post again...
 
Dec 23, 2011
7,176
5,067
113
These posts can get complicated quickly and it sucks when you make a typo and have to go back and try to find what went wrong.
 

Zachary

𝓡oyal 𝓜ango 𝓒réme Frappuccino Survivor
Administrator
Sep 23, 2009
12,543
31,423
113
Newport News, VA
twitter.com
The first post has been updated with an explanation on how to embed Flickr sets! The new information can be found, <a href="http://forum.parkfans.net/thread-3850.html#Flickr" target="_self">here</a>.

And, to keep with the trend I've set previously, here's an example:

[flickrset=72157630410400714]
 
Login or Register to Hide This Ad