ParkFans Logo

How to Embed Almost Anything into a Post

02/13/15 at 02:35pm in How to Embed Almost Anything into a Post (Latest Edit: 08/13/15 at 09:32pm by Zachary.)
Post: #1
*
This list is currently incomplete and will be updated regularly. Check back soon for more.


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


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]


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]


From Flickr:

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]




How to Embed
GIFs


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.


" />

Image
How to Embed
Videos
ImageFrom YouTube:

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

" />
Code:
[video=youtube]YouTubeURL[/video]
ImageFrom 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]
Image

Image
How to Embed
Status Updates
ImageFrom 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]
ImageFrom 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]
Image

Image
How to Embed
Maps
ImageFrom 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!5e​1!3m2!1sen!2sus!4v1423884881355" width="800" height="600" frameborder="0" style="border:0">
Image
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!5e​1!3m2!1sen!2sus!4v1423884881355
Image
" />
Code:
[gmaps=GoogleEmbededMapURL]
Image

Find Me: Twitter | Facebook | Google+
Contact Me: Private Message | Email

Our biggest foe is our inclination towards complacency and willingness to settle for mediocrity.
Thanks given by:  chickenking, netdvn, mjm1ahoney3, Nicole, Applesauce, Connor, Party Rocker, MAZ, Peter R., Thomas, Matthew, Luke, Joe, GeoUSA, Unagi
Offline
Quote
Post: #2
*


Attached File(s) Thumbnail(s)
   

Google+ | Facebook | Instagram | Twitter
Thanks given by:  Nicole, Zachary
Offline
Quote
02/13/15 at 05:55pm in How to Embed Almost Anything into a Post (Latest Edit: 02/13/15 at 05:56pm by Joe.)
Post: #3
*
https://www.google.com/search?q=thanks&espv=2&biw=1366&bih=667&tbm=isch&imgil=G805umo8AppL0M%253A%253BT_3bmB2wfpf2QM%253Bhttps%25253A%25252F%25252Fdigge​rfortruth.wordpress.com%25252F2015%25252F01%25252F29%25252Fmany-thanks%25252F&source=iu&pf=m&fir=G805umo8AppL0M%253A%252CT_3bmB2wfpf2QM%252C_&usg=__X0CJUMp1p0yhjZiJ4p6luIjvZHI%3D&ved=0CD0Qyjc&ei=qXLeVL6HJMaoNruugrgH#imgdii=_&imgrc=G805umo8AppL0M%253A%3BT_3bmB2wfpf2QM%3Bhttp%253A%252F%252Fsquamishfoodbank​.com%252Fwp-content%252Fuploads%252F2015%252F01%252FThank-you-picture-jan-2015.png%3Bhttps%253A%252F%252Fdiggerfortruth.wordpress.com%2525F2015%252F01%252​F29%252Fmany-thanks%252F%3B565%3B586

Find Busch Dominion:
BuschDominion.com | Instagram | Twitter | Facebook | YouTube
Offline
Quote
Post: #4
*
^Best part is that the thanks button is off screen.

BGW Rec is BACK!
http://forum.parkfans.net/thread-3109-po...#pid113411
Thanks given by:  Nicole, Matthew, Joe, Zachary
Offline
Quote
Post: #5
*
Image
Thanks given by:  Nicole
Offline
Quote
02/14/15 at 12:18am in How to Embed Almost Anything into a Post (Latest Edit: 02/14/15 at 12:33am by Zachary.)
Post: #6
*
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:






Find Me: Twitter | Facebook | Google+
Contact Me: Private Message | Email

Our biggest foe is our inclination towards complacency and willingness to settle for mediocrity.
Thanks given by:  Nicole, Luke
Offline
Quote
Post: #7
*
BBW, Copyright 2015 Google.

WHAT SORCERY IS THIS!?
Thanks given by:  Nicole, Brandon
Offline
Quote
02/14/15 at 09:33am in How to Embed Almost Anything into a Post (Latest Edit: 02/14/15 at 09:34am by Joe.)
Post: #8
*
This might not be the place, but I'd recommend a page listing other formatting codes. I've noticed users who have expressed desire to know the [spoiler] and [spoiler=custom text] tags, as well as the [quote=Joe] function.

It doesn't need to be nearly as formal as this page, but I think it might help.

Find Busch Dominion:
BuschDominion.com | Instagram | Twitter | Facebook | YouTube
Thanks given by:  Nicole, Luke, GeoUSA, Zachary
Offline
Quote
Post: #9
*
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...

"Wit has some truth in it; wisecracking is simply calisthenics with words." -- Dorothy Parker
Thanks given by:  Zachary, Joe, netdvn
Offline
Quote
02/14/15 at 12:12pm in How to Embed Almost Anything into a Post (Latest Edit: 02/14/15 at 12:14pm by Party Rocker.)
Post: #10
*
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.
Offline
Quote
Post: #11
*
Maybe if people treated posts with more respect and bothered to put thought into them...

Google+ | Facebook | Instagram | Twitter
Offline
Quote
04/15/15 at 10:37pm in How to Embed Almost Anything into a Post (Latest Edit: 04/15/15 at 10:39pm by Zachary.)
Post: #12
*
The first post has been updated with an explanation on how to embed Flickr sets! The new information can be found, here.

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


Find Me: Twitter | Facebook | Google+
Contact Me: Private Message | Email

Our biggest foe is our inclination towards complacency and willingness to settle for mediocrity.
Thanks given by:  Nicole, Applesauce, Matthew, GeoUSA
Offline
Quote
Post: #13
*
People use Flickr?

Google+ | Facebook | Instagram | Twitter
Thanks given by:  Luke
Offline
Quote
Post: #14
*
Don't know. Embeds look great though. Tongue

Find Me: Twitter | Facebook | Google+
Contact Me: Private Message | Email

Our biggest foe is our inclination towards complacency and willingness to settle for mediocrity.
Thanks given by:  Applesauce
Offline
Quote
Post: #15
*
I have photobucket!

Numquam ponenda est pluralitas sine necessitate! - William of Occam
I'm serious now, who here wants my job? - NASA Director James Webb
Thanks given by:  Applesauce
Offline
Quote

User(s) browsing this thread: 1 Guest(s)

Contact Us | ParkFans Network | Return to Top | Lite (Archive) Mode | RSS Syndication | |
Powered By MyBB, © 2002-2017 MyBB Group.