Posts Tagged embedding

Embedding Maps

Posted by on Thursday, 22 October, 2015

It might occasionally be helpful to include a map in your posts—say, if you’re having an event outside the library or writing about local history.  Here are three different ways that you can incorporate maps into what you’re doing.

Google Maps

Enter your location.  It can be a specific street address or something like “library near [name of city]”.  Once you have your map on the screen, click Share.  You’ll see a popup on your screen with two tabs, Share Link and Embed Map.  You’ll want to click Embed Map.  Now, choose the size of your map.  It’s probably defaulted to Medium, but you might want to opt for Small instead.  Once your size is selected, copy the code provided and go back to your WordPress blog.  You’ll need to click on the Text tab to open up the version of the post editor that will accept code (you’ll find Text right next to Visual at the top of the editor).  After you paste the code into this box, you can switch back over to Visual view.  Once you publish your post, you’ll get something like this:

Bing Maps

The process here is pretty similar.  Enter your address and, once you have your map on screen, click on Share.  The Share button for Bing is located at the top right of your screen.  Your code will be presented in the Embed in a Webpage field, but you can also make changes to the map by clicking Customize and Preview.  Once you have the map correctly sized and with the features you want, copy your code into the Text view of your WordPress post.  Once that’s done, switch back to Visual view to finish writing your post.  Your embedded map will look like this:

Bing includes a few links beneath their maps that might be helpful to your readers.  Google sometimes provides a link for driving directions with their maps, but not always.  If you prefer Google, but also want to make sure that your patrons can access driving directions, you can copy and paste the following code directly into the Text version of your editor:
<form action=”” method=”get” target=”_blank”>
Enter your starting address:
<input name=”saddr” type=”text” />
<input name=”daddr” type=”hidden” value=”Disney World, Orlando, Florida” />
<input type=”submit” value=”Submit” />
Just change the value on the line with input name “daddr” to your address (rather than Disney World).  You’ll end up with an embedded form for driving directions that looks and works like this:
Enter your starting address:

Embedding external content

Posted by on Tuesday, 2 September, 2014

WordPress logoYou may already know that you can easily embed external content from sites like YouTube and Flickr just by pasting the item’s URL on its own line. But did you know that you can also do this with sites like Instagram, Twitter, SlideShare and TED? No? Well now you do. And, if you’re interested in a complete list you can find it on the Embeds page in the WordPress Codex.

Embedding a Flickr Slideshow

Posted by on Monday, 13 June, 2011

Following-up on my post regarding the embedding of Flickr photos in your posts and pages here’s the post I’ve been promising for a while now on how to embed a slideshow using flickr.

Before you get started I highly recommend that you first write any textual content that will be part of your page or post. For example, let’s assume that my post is going to have some introductory text, then the slideshow, then some concluding text. I’m going to go ahead and write both those paragraphs and leave some space in between for the slideshow to be later placed. Trust me, this will make your life easier in the long run.

The key to getting this all to work is to first have a Flickr account (assumed) and to have all the photos you want as part of your slideshow in a single photo set. (You can create sets in a variety of ways one of which is via the organizr.)

Once you’ve got your photos organized into a set, open the set’s page and click the “Slideshow” link in the upper right. Once on the slideshow page, click the “Share” link in the upper right. Under “Grab the embed HTML” click the “Copy to clipbaord” button”.

Now comes the fun part. Go back to your page/post and find that space where you left room for you slideshow. Switch to the HTML view, make sure your cursor is in that space, and paste in the HTML code.

Now, here’s the kicker, if you switch back the the Visual editing mode, you will not see your slideshow. However, if you click WrodPress Preview button you will see the results. This is why I recommended you write your text first. In Visual editing mode it will be very easy to accidentally delete your slideshow.

Just don’t forget to Publish/Update your post/page once you’ve finished your editing.

Here’s my example slideshow to prove that it does work:

The bottom line: once you get the hang of it you’ll be able to avoid the potential problems. Just remember to put the slideshow in last, and then immediately publish and it should work as it should.

Embedding Flickr Images

Posted by on Wednesday, 8 June, 2011

With more new libraries in the wings working on their new sites some have been asking me questions about using flickr in combination with WordPress. While we are more than happy to host images on our servers, if you have a lot of them, Flickr might be the better way to go. So, here are some basic tips for how you can get your Flickr photos to appear on your posts and pages.

Let’s say you’ve got a photo in Flickr that you’d like to have appear in a blog post and when they click on it, they get to a larger version of the photo. That can be done with the following steps:

Get to the photo’s page in flickr and click on the right-most down-pointing triangle above the photo. (Screenshot right) In the area for “Grab the HTML/BBCode” you’ll see the HTML you’ll need to copy and paste into your site. Choose the appropriate side of the photo (small, medium, large, etc) before copying the code. Once you’ve got the code copied switch back over to your site, make sure you’re in HTML editing mode, place your cursor pretty much where you want the image to appear, and paste in the code. This will make your image appear in your post and when a user clicks on it, they’ll be sent to the image’s page in flickr.

At this point you can switch back to the Visual editing mode and move the photo by dragging it to the new location. If you’re trying to float the image to one side of the text or another, click on the image, then click on the picture icon that appears on top of the image (picture properties). In the new windows you’ll see the alignment options. Choose the appropriate one and click Update.

On that screen you can also change when the image links to for when a user clicks on it. For example, if this photo is part of a set, you can get the URL of the flickr set page and put that in the Link URL field (above). If you wanted to link to a slideshow of a set, click on the “Slideshow” link on a set’s page (next screenshot) and use that page’s URL as the link.