BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template

BP304 Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template John Vaughan & Sean Burgess

Who are we?
John Vaughan is a Notes/Domino developer
Helped develop the blog template when it was a non-IBM open source project, including rich text to HTML conversion and search.
Is an IBM Lotus Certified Applications Developer and works for URS Corp. in Tampa, FL.
Likes to blog and write poetry. He’s currently writing a novel.
Sean Burgess is a Notes/Domino developer and administrator
Has been working with Notes since V3 in 1994 and has been modifying and extending the blog template on his own site for over 3 years.
Is a Certified Lotus Developer and Administrator and works for General Dynamics Information Technology in Fairfax, Va.
Is an avid gardener, cook, and father of 4 sons.

Agenda
Quick start – get up and running quickly using the default template
Application architecture – a look behind the scenes at the nuts and bolts
Demonstration – Learn how to radically change the look and feel by viewing a live example: Tattoo Well, Inc.
Embrace and Extend – power up your blog with Web 2.0 technologies

Origins of the Template
DominoBlog was created by Steve Castledine in December 2002
Originally created as a simple blogging tool for Domino, but evolved into a complete content management solution
It was designed to be a tool which could be configured to the nth degree by an end user without the need to change any of the underlying Notes design. Therefore, people could create web sites using their own WYSIWYG tools and if an underlying change was made in the design it wouldn't affect their changes.
The way the application provides this functionality is by using Templates and Tags.
Steve was just married at the beginning of January.

Quick start
If you have a 7.02 or greater Domino server installed, the template is on the server.
Steps to create a database based on the blog template:
Create a new database on the 7.02 (or greater) server
Click “Show advanced templates”
Choose “IBM Blog”

Quick start
Example screenshot:

Quick start
When the database first opens, a dialog box appears.
Fill out the Site title, description, and the server information.
The server information will already be filled out if you are creating the database on the server. If you create the copy locally instead of on the server then you will have to fill out the server information.
Fill in the user information for the blogger in the Personal Details section.

Quick start
If at any time you need to modify the information in the first dialog box, you can run the Set Basic Details wizard from the blog’s Content view. You can also edit the basic details in the Configuration document.
You can go to the browser and enter in the URL shown in the Basic Details dialog box. The blog is already up and running.

Quick start
Create a blog entry
Go to Content, Recent.
Click the New Content button.
Create a blog entry.
Enter a Subject and type something in the Rich Text field.
Change the status from “Draft” to “Published”.
Click Save & Close.
Refresh the browser to see the blog entry.

Quick start
Import an image
Go to Resources, Images.
Click Import Image Files.
Choose an image from your hard drive.
Click Cancel, since you have not set up any Image Categories.
Enter an Image Category if you wish in the next dialog, or choose Cancel.
Go back to your blog entry and put it in Edit mode.
Put the cursor into the Rich Text field at the place you want to insert the image.
Choose the image from the dialog box. The image tag is automatically created for you in the rich text field.
Click on Save & Close and refresh the browser.

Quick start
Create a Content Category
Go to Configuration, Content Categories.
Click “Create Category”.
Enter in a category in the Category Name field.
Click Save & Close.
Go to Content, Recent.
Open the blog entry document you just created.
Click Edit.
Click the Categories/Tags tab.
Click the Primary Categories field and choose the Category you just created.
Click Save & Close

Quick start
Refresh the browser. Note that the category does not appear under Categories in the left navigation.
Go back to the Notes client and run the Rebuild Site Indexes wizard.
Refresh the browser and look under Categories.

Quick start
You can use Cascading Style Sheets (CSS) to control the display of fonts, colors and the positioning of elements in the layout.
CSS is used in the template to manage the look and feel of the application, just like any other web page.
CSS can either be edited in the database or imported from external files.
Open the CSS document:
Go to Resources, Stylesheets (CSS).
Open the “global.css” document.
If you know how to write CSS, you can manage much of the look and feel of the site from here.
The global.css document is commented and broken down into sections. To change the look and feel of various parts of the application, look for the comments for that section.
Comments in CSS files look like this:
/* everything between these tags is a comment */

Quick start
Like CSS files, Javascript files can be either created directly on the form or imported from external files.
Create some Javascript
Go to Resources, Javascript
Click the “New Javascript” button.
Title it “myjavascript.js”
Write a your script in the field below the title. function hello() { alert ( 'hello world!'); }
Click Save & Close.

Quick start
Go to HTML Template, Block Templates.
Open the HTMLTop Template Block document.
Between the <head> tag and the next line, insert this HTML tag:
<script type="text/javascript" src="../dx/myjavascript.js"></script>
Click Save & Close.
Now you have a Javascript function that you can call out to from anywhere in the application.

Quick start
Put your Javascript to work
To create a simple example, we’ll just use the image we imported and used in the blog entry as a place to put a call to the Javascript function.
Open the blog entry and find the image tag. Insert an HREF tag around it, so that the image tag looks like this:
<a href="javascript:hello();"><img src="orange-girl.jpg" alt="orange-girl.jpg"/></a>
Click Save & Close.
Refresh the browser. Now you can click the image, and an alert box will pop up.
Note: For this example to work, “Allow HTML” must be checked in the Configuration document under the Site Settings, Content Creation tabs.

Quick start
Add a DX Tag into the layout
By default, the blog template will display the last five blog entries. One easy way for users to get to the older entries is to have a link after the last entry that says “Previous Blogs”. The <$DXNavForward$> DX Tag will give you that link. It’s complement is <$DXNavBack$>.
Open the HTML Templates, Page Templates.
Open the Home Page document.
Click the Edit button.
Type the following code after the DXContent tag: <$DXNavForward$>

Quick start
Refresh the browser.
Now you should see a link at the bottom of the page (above the footer), after the last blog entry. The link should say “Previous Blogs”.
Change the text in the tag
Go to Configuration, Configuration Document.
Open the Configuration Document
Go to Formatting, General, Navigation in the tabbed table.

Quick start
Change the value in the third field to “Previous Blog Entries”.
Save & Close and refresh the browser.
The link should now say “Previous Blog Entries” instead of “Previous Blogs”.

Hints for success
Make sure to Full Text Index the database on the server. Otherwise search will be very slow and inefficient on the server.
If you want to track statistics, make sure to configure a statistics database.
Technote: http://www-1.ibm.com/support/docview.wss?rs=463&context=SSKTMJ&context=SSKTWP&q1=blog&uid=swg21246924&loc=en_US&cs=utf-8&lang=en
Blog entry from Steve Castledine on statistics tracking: http://www.stevecastledine.com/sc.nsf/dx/06102006100458SCACNL.htm
For both comments and statistics tracking, default access must be Author.

Blog template architecture
The blog template is a web content management tool disguised as a blogging application. The application includes tools to manage HTML layout, dynamic content (i.e., blog entries), and other resources.
Key architectural constructs to understand include:
The Configuration document
DX Tags
HTML Templates
Block Templates
Page Templates
Item Templates

Configuration document
The Configuration document controls how the application’s dynamic content is rendered.
DX Tags work hand in hand with the Configuration document. In many cases, there is a direct relationship between a particular field or set of fields in the Configuration document and a particular DX Tag.
A list of DX Tags is available here: http://www.stevecastledine.com/dominoblog.nsf/dx/dxtags.htm?opendocument&comments
It also helps to understand web markup, because DX Tags produce markup (HTML, Javascript, CSS) in the Web user interface.

The DX Tag engine
The blog template contains a content rendering engine written in Lotusscript. This engine allows you to populate static HTML with dynamic content. The methodology is similar to ASP/JSP.
DX Tags work in a way that is analogous to JSP tags or ASP tags.
DX Tags are rendered on-the-fly by the code contained in a Script library called DXLiveContentEngine.

The DX Tag engine
Dynamic content is served up through tags called DX Tags.
Pseudo-code example:
<static HTML layout> <dynamic DX Tag> <static HTML layout>
Real code examples:
<div>  <$DXSearchForm$></div>
<div>  <$DXRecentSubjects$></div>
Code examples from the template (located in the LeftSideBar Template Block):
<div class="portlet-content"><div class="table-wrap"><$DXSearchForm$></div></div></div>
<div class="portlet-content"><div class="table-wrap"><ul><$DXRecentSubjects$></ul></div></div>

Template Blocks and Pages
Segments of markup including both HTML and DX Tags can be assembled into “Blocks”. The Blocks can be reused in “Pages”.
An example of a Block would be something you would reuse across the application, like a header or footer.
An example of a Page would be the blog’s homepage. The homepage could include several blocks, as well as HTML and DX Tags.

Below is a screenshot of a Block document. You can see that it has a title, “Banner”, and a “block” of HTML, mixed in with several DX Tags.

Here is a screenshot of a Page document titled “Home Page”. You can see that a DX Tag called “DXTemplateBlock” refers to the Block document titled “Banner”: <$DXTemplateBlock Name=“Banner”$>

From the previous example, you can see that you can assemble several Template Blocks together in a Page to create a layout.
This allows centralization of your markup code and keeps it easy to manage.

Item Templates
Item Templates are used for dynamic content usually appearing in a list or sequential format.
“Items” include blog entries and blog entry comments.
Item Templates are similar to Blocks as they both contain a mixture of HTML and DX Tags.
Example from the “Comment Item” Template document:
<div class="commentbody"><$DXCommentNumber$>) <strong><$DXCommentSubject$></strong></div><div class="commentauthor"><$DXCommentAuthor$><$DXCommentCreation$></div><div class="commenttext"><$DXCommentText$></div>

Putting it all together
Pages contain Blocks. Blocks contain Items.
Note: This is not a hard and fast rule, just a best practice to keep your code manageable. The point of the blog application’s approach is to make managing the site easy and flexible.
DX Tags can go on Pages, Blocks and Items.
DX Tags can often be customized in the Configuration document.

Example: Tattoo Well
Demo: Tattoo Well blog

Embrace and Extend with Web 2.0 Take your blog to the next level by integrating it with external tools

What you need to know before you start
Easy to add and just as easy to remove.
Third party integration should enhance your blog content, not be the focus of your blog.
Do you have an innie or an outtie?
Integration isn’t free!
K.I.S.S. and less is more.

The path to your blog is varied
What is it? Blog Stats Database (StdR7BlogStat)
What does it do? The Blog template allows you to record information on site usage. This involves switching the feature on in your blog database (Site Configuration Document) and setting up a secondary database to collect the information.
How do I integrate it?
Download the template from IBM http://www-1.ibm.com/support/docview.wss?rs=899&uid=swg21246924&loc=en_US&cs=UTF-8&lang=all
Setup statistics database and turn on statistic tracking
Display recent refers and search terms by using the <$DXGoogle$> and <$DXReferrers$> tags, respectively.
Customize the display of the lists by creating an agent and accessing it via AJAX

Enable Entry from anywhere
What is it? IBM Lotus Blog Template Web Client Interface
What does it do? Web browser interface that allows you to create and edit blog entries and upload resources.
Add <$DXAdmin$> tag to your Site template
Add <$DXEdit$> tag to your Document template
If your blog is hosted on a server that is not your own, get the administrator to create you an account that can log into the server.
You can modify the web interface by changing the Web Client template
Send in blog entries via email
Use a third party tool to connect to connect via published APIs

Chicklet Fever hits a high
What is it? A chicklet is a small icon used to indicate availability of a service or affiliation with a group or site.
What does it do? A chicklet enables you easily display what features, like RSS Feeds, are available on your site. It can also display your affiliation or support of another site or organization, like OpenNTF.org.
Download or create the chicklet you want to add to your site.
Add the image as a resource on your blog.
Add the necessary code to your template.
This is a good choice for using Template Blocks.

Make Feed Readers Accessible
What is it? Bloglines (http://www.bloglines.com/), Feedburner (http://www.feedburner.com/), Yahoo and Google Readers, and many more.
What does it do? RSS Feed Readers allow users to subscribe to news and information feeds from multiple sites.
Add links to your RSS feed for each Reader you want to support.
Publish your feed on Feedburner.
Add feeds for individual categories.
Publish the list of feeds that you read to your template.

Socialize with other like minded blogs
What is it? del.icio.us (http://del.icio.us/), Digg (http://digg.com/), reddit (http://www.reddit.com/), and many more.
What does it do? Social bookmarking is a web service that allows people to share Internet bookmarks and access those bookmarks from any computer.
Register on your favorite social bookmarking sites.
Add links to your entries to allow users to easily bookmark them at your favorite sites.
Add your list of bookmarks to your template.

Get your Google on
What is it? Google Adsense (https://www.google.com/adsense/), Google Custom Search (http://google.com/coop/cse/), and Google Analytics (http://www.google.com/analytics/)
What does it do?
Google Adsense for Content – a fast and easy way for website publishers of all sizes to display relevant, unobtrusive Google ads on their website's content pages and earn money.
Google Adsense for Search - a way for web site publishers to provide Google search to their site users and to earn money by displaying Google ads on the search results pages.
Google Custom Search – Harness the power of Google search to create a free Custom Search Engine that reflects your knowledge and interests. Specify the websites that you want searched - and integrate the search box and results into your own website.
Google Analytics - Google Analytics tells you everything you want to know about how your visitors found you and how they interact with your site.

Get your Google on
Google Adsense for Content
Sign up for Adsense account
Use the Adsense Setup wizard to determine which ads to display and the format of them
Add code to your template <script type="text/javascript"><!— google_ad_client = "pub-7145674392602552"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "E6F4FF"; google_color_bg = "E6F4FF"; google_color_link = "003D6B"; google_color_text = "333333"; google_color_url = "0066B3"; //--></script> <script type="text/javascript“ src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
View reports on a regular basis

Get your Google on
Google Adsense for Search
Sign up for Adsense account
Use the Adsense Setup wizard to determine the look and feel of the search box and results
Add code to your template

Get your Google on
Google Custom Search
Sign up for a Google Account
Create your own free search engine, or contribute to someone else's.
Add code to your template  <form id="searchbox_009202765687273617243:rqtgjk3xi2q" action="http://google.com/cse"> <input type="hidden" name="cx" value="009202765687273617243:rqtgjk3xi2q" /> <input name="q" type="text" size="40" /> <input type="submit" name="sa" value="Search" /> <input type="hidden" name="cof" value="FORID:1" /> </form> <script type="text/javascript" src="http://google.com/coop/cse/brand?form=searchbox_009202765687273617243%3Arqtgjk3xi2q"></script>

Get your Google on
Google Analytics
Sign up for Analytics account
Add tracking code to your template <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct="UA-xxxx-x"; urchinTracker(); </script>
Check the reports to see profiles of your visitors

Mark your territory on Plazes
What is it? Plazes (http://beta.plazes.com)
What does it do? The Plazer software, which is installed locally, looks for the hardware ID of your local network (MAC ID) and checks whether it is already in the database with an address, so we can plaze you at that location.
Create a Plazes account
Download and install Plazes software
Add Plazes Badge to your site

Track your comments with coComment
What is it? coComment (http://www.cocomment.com/)
What does it do? coComment keeps track of all the online conversations you're following in one convenient place, and informs you whenever something is added to a conversation. coComment also allows you to publish your conversations to your blog in a click or send them to your friends via email.
Add coComment JavaScript to comment form template <script type="text/javascript"> var blogTool = "DominoBlog"; var blogURL = "<$DXURL$>"; var blogTitle = "<$DXTitle$>"; var postURL = "<$DXURL$>dx/<$DXDocumentLink$>"; var postTitle = "<$DXSubject$>"; var commentTextFieldName = "textcomment"; var commentButtonName = "SubmitButton"; var commentAuthorLoggedIn = false; var commentFormName = "_DominoForm"; </script> <script id="cocomment-fetchlet" src="http://www.cocomment.com/js/enabler.js"></script>
Install coComment extension for Firefox
Share your coComments on your blog
Customize your latest comments, commentors, or keywords
Use JSON to completely control the look and feel of the comments

Tag your links with Technorati
What is it? Technorati (http://www.technorati.com/)
What does it do? Technorati allows you to search for blog entries based on keywords and displays blogs that have linked to your blog.
Sign up for an account on Technorati
Claim your blog address(es)
Ping Technorati when you update your blog, either manually (http://pingrati.net/ping/) or via configuration document
Add links to your template, favorite and who’s linked to this blog
Add microformat to your external links (rel=“tag”)

Previews of linked sites is a SNAP!
What is it? SNAP Preview Anywhere (http://www.snap.com/)
What does it do? Snap Preview Anywhere makes it easier for people to know where they're going when they click on a link. Your site becomes easy to navigate. And if the link doesn't go where they want, they'll know before they leave. Besides, Snap Preview Anywhere is cool!
Sign up for SNAP Preview Anywhere
Install the code in the <Head> section of your Page Templates <script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=4a727fa71fb49a4f4bee61e759e49a69&sb=0&domain=www.yourdomain.com/"></script>

Spread the word with Podcasts
What is it? A Podcast is a media file that is distributed by subscription over the Internetfor playback on mobile devices and personal computers. Taking Notes (http://www.takingnotespodcast.com/) Bruce Elgort and Julian Robichaux IdoNotes (http://www.idonotes.com/) Chris Miller IBM Shortcuts (http://www.ibm.com/shortcuts)
What does it do? Podcasts give you a new way to reach your audience and interact with them on a more personal level.
Create the podcast file (MP3)
Add it to the Shared Resources
Add new entry and fill out the Media tab
Syndicate it on iTunes

Show the world your pretty face via Flickr
What is it? Flickr (http://www.flickr.com/)
What does it do? Flickr, and it’s brethren, allow users to easily share photos with friends.
Sign up for an account on Flickr, part of Yahoo!
Upload the photos you want to share
Add photos to your blog entries
Add badge to your template
Add link to RSS feed to your template
Write your own custom photo sharing app using Flickr’s API

Connect to OpenNTF
What is it? OpenNTF (http://www.openntf.org/)
What does it do? OpenNTF is a site devoted to getting groups of individuals all over the world to collaborate on Lotus Notes/Domino applications and release them as open source.
Add OpenNTF plugin to your template. <script type="text/javascript">  </script> <script type="text/javascript" src="http://www.openntf.org/projects/pmt.nsf/openntfplugin.js"> </script>

Get your AIM on target
What is it? AIM Whimsicals (http://developer.aim.com/whimsicals)
What does it do? AIM Whimsicals are a fun and easy way to add AIM functionality to any web page. They let AIM users view their Buddy List, send and receive IMs, and view presence information - directly on the web page.
Sign up for an AIM account
Grab an API key
Add the code to your blog
Customize the UI to match your blog

Make your site sizzle with JS Frameworks
What is it? prototype (http://prototype.conio.net/), Dojo (http://dojotoolkit.org/), jQuery (http://jquery.com/), script.aculo.us (http://script.aculo.us/), Yahoo! User Interface Library (http://developer.yahoo.com/yui/) and many others.
What does it do? Javascript Frameworks allow web site developers to more easily write code to do complex UI and DOM operations with pre-built libraries and widgets.
Figure out which framework to use – NO SMALL TASK
Download the Javascript files and add them as Javascript Resources
Read the Documentation thoroughly

Other Third Party tools
GeeSee Chat (http://www.geesee.com/)
Meebo IM (http://www.meebome.com/)
Accuweather.com netWeather (http://netwx.accuweather.com/)
Amazon.com Associates (http://affiliate-program.amazon.com/gp/associates/join)
Google Maps (http://maps.google.com/)
Frappr Map (http://www.frappr.com/)
Vlocate (http://www.wefixit.de/services)
webPolls by Sparklit (http://webpoll.sparklit.com/)
YouTube (http://www.youtube.com/)

Additional resources
Steve Castledine regularly blogs about things you can do with the blogging template. You can go right to those posts with this link: http://www.stevecastledine.com/sc.nsf/archive?openview&title=Blog+Template&type=cat&cat=Blog+Template&sort=I
Lotus Support Knowledgebase – Search for “Domino Blog Template”

Additional resources
If you want to get more involved in the Lotus community, an excellent way is to blog! You will need to:
Choose a host for your blog. Companies that provide blog hosting for Domino include:
http://connectria.com/
http://prominic.net/
http://dominodeveloper.net/
Choose a blogging template
Follow Mike Rhodin and use the IBM Lotus Domino Blogging template! Only on the 7.0.2 Domino installation.
Go to http://openntf.org/ and get Blogsphere. And check out Declan Lynch’s “Teaching An Old Blog New Tricks” blog at http://www.blogsphere.net/. Declan is the creator of the Blogsphere template.
If your company is uses Quickplace, check out Qblog from SNAPPS at http://www.snapps.com/SNAWEB.NSF/0/44CD269257591E7B86257226006E6786
Let the community know that you are there!
Go to http://www.dominoblogs.com/ and register your site.
Make sure you stop by other blogs in the community and leave comments so that we can get to know you!
If you write it well, they will come. Find your voice and let it be heard.

Additional Resources
Feel free to contact us online if you have questions!
Sean’s blog: http://www.phigsaidwhat.com/
Sean’s email: phigmentb@phigsaidwhat.com
John’s blog: http://jonvon.net/
John’s email: jonvon@gmail.com

Other Sessions about Blogging
ID111 AfterBlogging: Who's Reading Your Blog, and Why? Speakers: Sandra Kogan, Steve Castledine SW 5-6 - Tuesday 4:15pm - 5:15pm
BOF507 OpenNTF - An Open Source Community Speaker: Bruce Elgort Y&B GH Salon VI - Tuesday 5:45pm - 6:45pm
BOF108 Web 2.0 and Social Bookmarking Speaker: Ted Stanton Y&B Asbury A - Thursday 7:00am - 8:00am
BOF508 The Lotus Software Blogging Community (Not Just Bloggers!) Speaker: Ed Brill SW Parrot - Thursday 7:00am - 8:00am

Q & A
Please step up to the microphone and ask us questions! Don’t be shy, we don’t bite much.

http://www.techgig.com	6
http://phigsaidwhat.com	5
http://homer.ilink.de	3
http://www.slideshare.net	3
http://10.150.200.102	1
http://115.112.206.131	1

BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template

by Sean Burgess on Jan 27, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 19

Statistics

BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template — Presentation Transcript