Including Google Maps in your Posts Using Apache Roller 4.0

Exclusive offer: get 50% off this eBook here
Apache Roller 4.0 – Beginner's Guide

Apache Roller 4.0 – Beginner's Guide — Save 50%

A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller

$26.99    $13.50
by | December 2009 | Beginner's Guides Content Management Java Open Source

This article by Alfonso Romero, teaches you how to take advantage of web services such as Google Maps, YouTube, and SlideShare and use Google Maps, YouTube, and SlideShare to embed maps, videos, and document presentations in your blog.

Google Maps, YouTube, and SlideShare

There are a lot of Internet and web services which you can use along with your blog to make your content more interesting for your viewers. With a good digital camera and video production software, you can make your own videos and presentations quickly and easily, and embed them in your posts with just a few clicks! For example, with Google Maps, you can add photos of your business to a custom map, and post it in your blog to attract customers. There are a lot of possibilities, and it all depends on your creativity!

Including Google Maps in your posts

Using Google Maps in your blog is a good way of promoting your business because you can show your visitors your exact location. Or you can blog about your favorite places and show them as if you were there, using your own photos.

Time for action – using Google Maps

There are a lot of things you can do with Google Maps, one of them is including maps of your favorite places in your blog, as we'll see in a moment:

  1. Open your web browser and go to Google Maps (http://maps.google.com). Type Eiffel Tower in the search textbox, and click on the Search Maps button or press Enter. Your web browser window will split in two areas, as shown in the following screenshot:
  2. Apache Roller 4.0 – Beginner's Guide

  3. Click on the Eiffel Tower link at the bottom-left part of the screen to see the Eiffel Tower's exact position in the map at the right panel: 
  4. Apache Roller 4.0 – Beginner's Guide

  5. Now click on the Satellite button to see a satellite image of the Eiffel Tower:     
  6. Apache Roller 4.0 – Beginner's Guide

  7. Drag the Eiffel Tower upwards using your mouse, to center it on the map area:
  8. Apachea Roller 4.0 – Beginner's Guide

  9. Click on the Zoom here link inside the Eiffel Tower caption to see a closer image:
  10. Apache Roller 4.0 – Beginner's Guide

  11. If you look closely at the previous screenshot, you'll notice three links above the map: Print, Send, and Link. Click on Link to open a small window:
  12. Apache Roller 4.0 – Beginner's Guide

  13. Right-click on the Paste HTML to embed in website field to select the HTML code, and then click on the Copy option from the pop-up menu:
  14. Apache Roller 4.0 – Beginner's Guide

  15. Open a new web browser window and log into your Roller weblog. In the New Entry page, type The Eiffel Tower inside the Title field, and Eiffel Tower Google Maps inside the Tags field. Then click on the Toggle HTML Source button in the Rich Text editor toolbar, type This is an Eiffel Tower satellite image, courtesy of Google Maps:<br> inside the Content Field, press Enter, and paste the code you copied from the Google Maps web page:
  16. Scroll down the New Entry page and click on the Post to Weblog button. Then click on the Permalink field's URL, to see your Google Maps image posted in your blog.
  17. Click on the Zoom here link once to see a close-up of the Eiffel Tower, as shown in the following screenshot:

What just happened?

Now you can add Google Maps functionality inside your blog! Isn't that great? You just need to copy and paste the HTML code that the Google Maps produce automatically for you. If you want a bigger or smaller map, you can click on the Customize and preview embedded map link to customize the HTML code that you're going to paste into your blog:

Apache Roller 4.0 – Beginner's Guide

Then you just copy the HTML code produced by Google Maps and paste it into your blog post:

Apache Roller 4.0 – Beginner's Guide

If you have a Google Maps account, you can create customized maps and show them to your visitors, add photos and videos of places you've visited, and even write reviews about your favorite restaurants and hotels.

Have a go hero – explore Google Maps

Now that you've seen how to embed Google Maps in your weblog, it would be a great idea to create your own Google Maps account, and start exploring all the things that you can do—inserting photos and videos about places you've visited in your own custom maps, adding reviews of restaurants and other businesses in your locality, and so on. You can explore other users' maps, too. Once you get the hang of it, you'll be traveling around the world and meeting new people from your own PC.

Including YouTube videos in your posts

YouTube is one of the most popular video sharing websites in the world. You can include your favorite videos in your blog, or make your own videos and show them to your visitors. However, before you start complaining that we have already seen how to insert videos on your weblog, let me tell you that the big difference between uploading a video to your own blog server and uploading a video to a YouTube server is bandwidth.

When someone plays back a video from your weblog, the blog server transfers the video data to your visitor's web browser, so that he/she can begin to see it, even before the video downloads completely. This is known as video streaming. Now, imagine you have 1,000 visitors, and each one of them is viewing the same video from your weblog! There would be a big amount of data flowing from your weblog to each visitor's web browser! That amount of data flowing from one PC to another is called bandwidth. You would need a very broad connection to be capable of transmitting your video to all those visitors.

That's where YouTube comes into play. They have lots of bandwidth available for you and the other millions of users who share videos daily! So, if you plan to include a lot of videos in your weblog, it would be a great idea to get a YouTube account and start uploading them. In the following exercise, I'll show you how to include a YouTube video in your post, without having to upload it to your weblog.

Apache Roller 4.0 – Beginner's Guide A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller
Published: December 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Time for action – including a YouTube video

  1. Open your web browser and go to YouTube (http://www.youtube.com). Type ibacsoftvirtualbox in the search textbox, and click on the Search button or press Enter. YouTube will show you the example video I uploaded:
  2. Click on the Using Linux Ubuntu with Sun VirtualBox link and you'll be taken to a web page where you can see the video, and also copy some HTML code to insert into your blog:
  3. Apache Roller 4.0 – Beginner's Guide

  4. Select the HTML code in the Embed field from the gray information box, right-click on it and select Copy from the pop-up menu.
  5. Open another web browser window and log into your Roller weblog. Use the following screenshot to create an example post and paste the code you copied from the video inside the Content field:
  6. Scroll down the page and click on the Post to Weblog button. Then, click on the Permalink URL to see your post in your weblog's front page:
  7. Apache Roller 4.0 – Beginner's Guide

  8. Click on the play button to confirm that it's the same video you posted before on your weblog.

What just happened?

Although you get the same result as uploading a video to your own weblog server, using YouTube is better because you won't be limited by your Internet connection speed. It's better to open a YouTube account and start uploading your own videos, and then copy the HTML code that YouTube generates automatically to embed them to your weblog posts. You'll even get more publicity for your videos, as YouTube will include them in their listings!

Like Google Maps, YouTube also has a Customize option, next to the Embed field:

Apachea Roller 4.0 – Beginner's Guide

With this option, you can change the color, size, and appearance of the YouTube container for your video. You can also uncheck the Include related videos option, to avoid showing related videos after your visitors have seen your video.

If you're serious about broadcasting a lot of videos in your weblog to visitors from the Internet, you can pay for a premium account on Screencast (http://www.screencast.com) or any other dedicated content sharing web page. However, if you're planning to postvideos on a blog server inside your company, without broadcasting them to the Internet, it's better to upload them to your blog server and take advantage of your high-speed LAN.

Have a go hero – explore YouTube

If you haven't created a YouTube account yet, what are you waiting for? Go on and start uploading videos, it's as easy as embedding them in your blog! YouTube takes care of all the conversion and rendering processes, so you only need to copy the HTML code and paste it in your post in order to embed your YouTube videos.

Now that you also have a Google Maps account, why don't you start embedding YouTube videos in your custom Google Maps? I'm pretty sure you'll find out how to do it! If you have any doubts or questions, remember I'm just an e-mail away!

Including SlideShare presentations in your posts

PowerPoint, OpenOffice, and PDF presentations are a very popular communication media nowadays. People use them to transmit their thoughts, ideas, and experiences to other people. For example, software developers use presentations to introduce their software products in conferences. Business managers use them to show new business objectives and marketing plans to their subordinates in meetings. You can use presentations with pictures and diagrams in your blog as well. Your visitors will be more attracted to your blog and what you have to say, trust me on that one.

Time for action – including a SlideShare presentation

You can make your own SlideShare presentations and include them in your weblog, or you can include presentations from other SlideShare users. Just be sure to ask them for permission first.

  1. Open your web browser and go to SlideShare (http://www.slideshare.net).The SlideShare front page will show up:
  2. Apache Roller 4.0 – Beginner's Guide

  3. Click on the Take a tour link to see the Why you should use SlideShare? presentation:
  4. Apache Roller 4.0 – Beginner's Guide

  5. Click on the embed button in the SlideShare control bar. The Embed tab will show up in the SlideShare presentation area, along with the HTML code needed to embed the presentation in your weblog. Click on the Copy button to copy the HTML code into the clipboard:
  6.  

     

  7. Open a new web browser window and log into Roller. The New Entry page will show up. Type Embedding SlideShare Presentations in the Title field, embedding slideshare presentations apache roller in the Tags field, and This post shows how to embed a SlideShare presentation into an Apache Roller weblog post: </br> into the Content field. Then press Enter and paste the code you copied in the previous step of this exercise. Your screen should look like the following screenshot:          
  8. Apache Roller 4.0 – Beginner's Guide

  9. Scroll down the page and click on the Post to Weblog button. Then click on the Permalink field URL to see the new post in your weblog's front page, with the SlideShare presentation embedded:
  10. Apache Roller 4.0 – Beginner's Guide

  11. Click on the SlideShare presentation's Play button, to verify that it works as expected. If you wish, you can log out from Roller and close your web browser.

What just happened?

In the last exercise, I showed you how to embed a SlideShare presentation in your post. You can use PowerPoint presentations, MS Word or OpenOffice documents, and PDF files. So, if you need to share a presentation or document with other people, you can use your Roller blog and SlideShare to get the job done.

Have a go hero – explore SlideShare

As with Google Maps and YouTube, it would be great if you create a SlideShare account and start adding your own content, to embed it in your blog and share it with all your visitors. If you are planning to use Roller to promote your business or to write about your activities at work, start planning on several presentations to begin with. Oh, and let me know if you have any questions or doubts about using SlideShare, okay?

Summary

In this article, you learned about all the different tools available on the Internet, which can help you build a very attractive weblog for your visitors.

Specifically, we covered:

  • How to use Google Maps, YouTube, and SlideShare to embed maps, videos, and document presentations in your blog

 

If you have read this article you may be interested to view :

Apache Roller 4.0 – Beginner's Guide A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller
Published: December 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Books From Packt

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Zend Framework 1.8 Web Application Development
Zend Framework 1.8 Web Application Development

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

ICEfaces 1.8: Next Generation Enterprise Web Development
ICEfaces 1.8: Next Generation Enterprise Web Development 

Spring Persistence with Hibernate
Spring Persistence with Hibernate 

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Microsoft Office Live Small Business: Beginner’s Guide
Microsoft Office Live Small Business: Beginner’s Guide

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software