Wednesday, October 27, 2010

How To Add Twitter and Facebook Like Buttons to a Domino Blog

View Comments

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.

  1. With your Notes client, open your blog database (e.g. edbrill.nsf)
  2. Go to Advanced
  3. Go to HTML Templates -> Item Templates -> Default Item
  4. Look for

    <div class="entrybody">
    
    <p><$DXItemContent$></p>
    

  5. 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$>&amp;layout=box_count&amp;show_faces=true&amp;width=60&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65"
    
    style="border: medium none;
    
    overflow: hidden;
    
    width: 60px;
    
    height: 65px;"
    
    allowtransparency="true"></iframe>
    </div>
    </div>

  6. Save
  7. Go to HTML Templates - Page Templates - Document
  8. Again, look for:

    <div class="entrybody">
    
    <p><$DXItemContent$></p>
    

  9. 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$>&amp;layout=box_count&amp;show_faces=true&amp;width=60&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65"
    
    style="border: medium none;
    
    overflow: hidden;
    
    width: 60px;
    
    height: 65px;"
    
    allowtransparency="true"></iframe>
    </div>
    </div>

  10. Save
  11. Go to HTML Templates - Block Templates - HTMLTop
  12. Look for this line:

    <title><$DXTitle$></title>
    

  13. 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>

  14. In that same file, look for <body>
  15. 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>

  16. Save

Enjoy!

blog comments powered by Disqus