How to Create “Add to Calendar” Links within a blog
I am hosting a live podcast in a few weeks (blog announcement upcoming) and I wanted to find a way to let people add the date and time to their calendars with just a simple click instead of having to enter the information themselves. After alot of searching, all the post seem to say you had to add the event calendar plugin and then it would be a new plugin to the wordpress page and things like that. Not exactly what I was looking for. I wanted something as simple as
Heres a reminder to read TheSolutionsArchitect.net when the podcast announcement comes out:
Seemed like a simple concept but not one I could find documented… So here you go.
If you notice there are separate icons for Outlook or for Google Calendar. Outlook requires a .ics file that can be imported in. This is a simple text file but you will see shortly an easy way to create it. Google uses their api and again they provide an easy way to create the appointment.
First the Outlook Appointment:
- Go to http://www.pratie.com/lab/icalendar/ and create your .ics file. You can also export it from Outlook, but the website is so easy… Save the .ics file to your computer
- Upload the file to place that you can access it publicly. Dropbox would work. Dropbox means a second click to download but it is a place to put it.
- Upload whatever graphic you want to use as your button. If you find other cool ones, or create them, please share them in the comments as the icons were not easy to find. Insert the graphic into your post wherever you want the button to be.
- Highlight the button in the visual editor and add a hyperlink to it. Insert the saved URL of the .ics file you uploaded earlier.(From Dropbox or other source)
Now the Google Appointment:
- Go to http://support.google.com/calendar/bin/answer.py?hl=en&answer=1186917#individual and create the HTML to be used for your appointment.
- You can choose to use one of their buttons. We can change the graphic soon
- In the visual editor click on where you want the Google Invite to go. The click on the HTML tab to switch to HTML editing.
- Copy the HTML from the google page into the editor. It should look something like this:
- <a href=”http://www.google.com/calendar/event?action=TEMPLATE&text=Read%20thesolutionsarchitect.net%20Announcement&dates=20120820T130000Z/20120820T133000Z&details=&location=www.thesolutionsarchitect.net&trp=true&sprop=&sprop=name:thesolutionsarchitect.net” target=”_blank”><img src=”//www.google.com/calendar/images/ext/gc_button1.gif” border=0></a>
- You will see a few spots that can be changed. The first is the graphic. If you would like another graphic, simply upload it to the gallery and again do not insert it into the post, but rather copy the URL. Change the section in the HTML that reads img src=”"//www.google.com/calendar/images/ext/gc_button1.gif” to be img src=”your copied URL”. The exact file name in your entry may be different if you chose a different graphic on the Google page.
You may also want to edit the HTML to make the two graphics the same size. This can be done by simply adding the following
This will go after the file name and before the closing “>”