I recently helped a colleague add the Twitter buttons and the Facebook Like buttons to their Domino blog. I'm sharing the instructions here so other people can leverage it.
- With your Notes client, open your blog database (e.g. edbrill.nsf)
- Go to Advanced
- Go to HTML Templates -> Item Templates -> Default Item
- Look for
<div class="entrybody">
<p><$DXItemContent$></p>
- In between those lines add the following code ( make sure you update the two URLs ):
<div style="float: right; width: 60px;">
<div style="margin: 0;" >
<a href="http://twitter.com/share"class="twitter-share-button"
data-url="http://www.edbrill.com/ebrill/edbrill.nsf/dx/<$DXDocumentLink$>"
data-text="<$DXSubject$>"
data-count="vertical"
data-via="edbrill"
data-related="marybethraven">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div>
<div style="padding: 3px;">
<iframe frameborder="0" scrolling="no"src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fedbrill.com%2Febrill%2Fedbrill.nsf%2Fdx%2F<$DXDocumentLink$>&layout=box_count&show_faces=true&width=60&action=like&font=arial&colorscheme=light&height=65"
style="border: medium none;
overflow: hidden;
width: 60px;
height: 65px;"
allowtransparency="true"></iframe>
</div>
</div>
- Save
- Go to HTML Templates - Page Templates - Document
- Again, look for:
<div class="entrybody">
<p><$DXItemContent$></p>
- In between those lines add the following code (this is to make buttons appear on individual pages and again make sure to update the URL's below) :
<div style="float: right; width: 60px;">
<div style="margin: 0;" >
<a href="http://twitter.com/share"class="twitter-share-button"
data-url="http://www.edbrill.com/ebrill/edbrill.nsf/dx/<$DXDocumentLink$>"
data-text="<$DXSubject$>"
data-count="vertical"
data-via="edbrill"
data-related="marybethraven">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div>
<div style="padding: 3px;">
<iframe frameborder="0" scrolling="no"src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fedbrill.com%2Febrill%2Fedbrill.nsf%2Fdx%2F<$DXDocumentLink$>&layout=box_count&show_faces=true&width=60&action=like&font=arial&colorscheme=light&height=65"
style="border: medium none;
overflow: hidden;
width: 60px;
height: 65px;"
allowtransparency="true"></iframe>
</div>
</div>
- Save
- Go to HTML Templates - Block Templates - HTMLTop
- Look for this line:
<title><$DXTitle$></title>
- Replace it with this line (this is so that when you use the FB like button it display better.. It also helps with Google Search Engine Optimization):
<title><$DXTitle$> - <$DXSubject$></title>
- In that same file, look for <body>
- Immediately, after that line, add this:
<script language="javascript">
var toCompare = "<$DXTitle$> - ";
toCompare += "<";
toCompare += "$";
toCompare += "D";
toCompare += "X";
toCompare += "S";
toCompare += "u";
toCompare += "b";
toCompare += "j";
toCompare += "e";
toCompare += "c";
toCompare += "t";
toCompare += "$";
toCompare += ">";
if (document.title == toCompare) {
document.title = "<$DXTitle$>";
}
</script>
- Save
Enjoy!