I'm sure those of you out there reading this blog also read a lot of
other blogs and have noticed over time the chickletization of blog
pages with little icons for all the different bookmarking services like
Del.icio.us and Digg, and on and on with the ever growing plethora of other services. I was starting to feel that the mojoPortal blog was a little behind the times in this respect. Then I noticed on TechCrunch, the use of the AddThis.com
widget. After looking into the integration I could see that it was
relatively low hanging fruit to implement a .NET control that makes it
easy to add the AddThis button.
Use of the .NET control in markup is like this:
<mp:AddThisButton ID="at1" runat="server"
AccountId=""
ButtonImageUrl="~/Data/SiteImages/addthisbookmarkbutton.gif"
Text="Share This Using Popular Bookmarking Services"
CustomBrand="mojoPortal"
CustomLogoUrl="http://www.mojoportal.com/Data/mojoportal_box_dropshadow.png"
CustomLogoBackgroundColor="e8e8e8"
CustomOptions=""
UrlToShare=""
TitleOfUrlToShare=""
/>
If you leave the UrlToShare and TitleofUrlToShare blank it
automatically uses the current page which makes it easy to add it to
the layout.master file of your mojoPortal skin so it appears on every
page.
In the blog we databind those properties to the title and url of the blog post.
If the account id is not set the control doesn't render.
Now we can just let AddThis.com keep track of the emerging services
and add them for us instead of having to add a new chicklet every time
some cool new service appears.
At the time of this post, this feature is only available from the mojoPortal source code repository, but it will be in the next release coming soon.
You can see the full source code for the control below, in case you want to use it in your own projects. By inheriting from the Hyperlink the implementation was very easy to do. Just wiring up a little javascript and encapsulating the customizable attributes into properties.
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Globalization;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace mojoPortal.Web.Controls
{
/// <summary>
/// Author: Joe Audette
/// Created: 2008-03-27
/// Last Modified: 2008-03-27
///
/// The use and distribution terms for this software are covered by the
/// Common Public License 1.0 (http://opensource.org/licenses/cpl.php)
/// which can be found in the file CPL.TXT at the root of this distribution.
/// By using this software in any fashion, you are agreeing to be bound by
/// the terms of this license.
///
/// You must not remove this notice, or any other, from this software.
///
///
/// See http://www.addthis.com
///
///
///
/// </summary>
public class AddThisButton : HyperLink
{
#region Private Properties
private string accountId = string.Empty;
private bool useMouseOverWidget = true;
private string customLogoUrl = string.Empty;
private string customLogoBackgroundColor = string.Empty;
private string customLogoColor = string.Empty;
private string customBrand = string.Empty;
private string customOptions = string.Empty;
private int customOffsetTop = -999;
private int customOffsetLeft = -999;
private string buttonImageUrl = "~/Data/SiteImages/addthissharebutton.gif";
private string protocol = "http";
private string urlToShare = string.Empty;
private string titleOfUrlToShare = string.Empty;
#endregion
#region Public Properties
/// <summary>
/// Your addthis.com username.
/// If this is not set the control will not render.
/// </summary>
public string AccountId
{
get { return accountId; }
set { accountId = value; }
}
/// <summary>
/// if true will show widget in the page
/// </summary>
public bool UseMouseOverWidget
{
get { return useMouseOverWidget; }
set { useMouseOverWidget = value; }
}
/// <summary>
/// The logo to display on the popup window (about 200x50 pixels).
/// The popup window is show when the user selects the 'More' choice
/// </summary>
public string CustomLogoUrl
{
get { return customLogoUrl; }
set { customLogoUrl = value; }
}
/// <summary>
/// The color to use as a background around the logo in the popup
/// </summary>
public string CustomLogoBackgroundColor
{
get { return customLogoBackgroundColor; }
set { customLogoBackgroundColor = value; }
}
/// <summary>
/// The color to use for the text next to the logo in the popup
/// </summary>
public string CustomLogoColor
{
get { return customLogoColor; }
set { customLogoColor = value; }
}
/// <summary>
/// The brand name to display in the drop-down (top right)
/// </summary>
public string CustomBrand
{
get { return customBrand; }
set { customBrand = value; }
}
/// <summary>
/// A comma-separated ordered list of options to include in the drop-down
/// Example: addthis_options = 'favorites, email, digg, delicious, more';
/// Currently supported options:
/// delicious, digg, email, favorites, facebook, fark, furl, google, live, myweb, myspace,
/// newsvine, reddit, slashdot, stumbleupon, technorati, twitter, more
/// (the default is currently 'favorites, digg, delicious, google, myspace, facebook,
/// reddit, newsvine,
/// live, more', in that order).
/// </summary>
public string CustomOptions
{
get { return customOptions; }
set { customOptions = value; }
}
/// <summary>
/// Vertical offset for the drop-down window widget (in pixels)
/// thiscontrol defaults to -999 which means unsepcified
/// this will result in the defaults from addthis.com
/// not sure what the defsault is
/// </summary>
public int CustomOffsetTop
{
get { return customOffsetTop; }
set { customOffsetTop = value; }
}
/// <summary>
/// Horizontal offset for the drop-down window widget (in pixels)
/// thiscontrol defaults to -999 which means unsepcified
/// this will result in the defaults from addthis.com
/// not sure what the defsault is
/// </summary>
public int CustomOffsetLeft
{
get { return customOffsetLeft; }
set { customOffsetLeft = value; }
}
public string ButtonImageUrl
{
get { return buttonImageUrl; }
set { buttonImageUrl = value; }
}
public string UrlToShare
{
get { return urlToShare; }
set { urlToShare = value; }
}
public string TitleOfUrlToShare
{
get { return titleOfUrlToShare; }
set { titleOfUrlToShare = value; }
}
#endregion
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (accountId.Length == 0)
{
this.Visible = false;
return;
}
if (Page.Request.IsSecureConnection)
protocol = "https";
SetupScripts();
this.ImageUrl = Page.ResolveUrl(buttonImageUrl);
this.NavigateUrl = "http://www.addthis.com/bookmark.php";
if (useMouseOverWidget)
SetupWidget();
else
SetupNormalLink();
}
private void SetupNormalLink()
{
StringBuilder onClickAttribute = new StringBuilder();
if (urlToShare.Length > 0)
{
onClickAttribute.Append("addthis_url = '" + urlToShare + "'; ");
}
else
{
onClickAttribute.Append("addthis_url = location.href; ");
}
if (titleOfUrlToShare.Length > 0)
{
onClickAttribute.Append("addthis_title ='" + titleOfUrlToShare + "'; ");
}
else
{
onClickAttribute.Append("addthis_title = document.title; ");
}
onClickAttribute.Append("return addthis_click(this); ");
this.Attributes.Add("onclick", onClickAttribute.ToString());
//this.Attributes.Add("onclick", "return addthis_click(this); ");
}
private void SetupWidget()
{
StringBuilder mouseOverAttribute = new StringBuilder();
mouseOverAttribute.Append("return addthis_open(this, '',");
if (urlToShare.Length > 0)
{
mouseOverAttribute.Append("'" + urlToShare + "', ");
}
else
{
mouseOverAttribute.Append("'[URL]', ");
}
if (titleOfUrlToShare.Length > 0)
{
mouseOverAttribute.Append("'" + titleOfUrlToShare + "' ");
}
else
{
mouseOverAttribute.Append("'[TITLE]' ");
}
mouseOverAttribute.Append("); ");
this.Attributes.Add("onmouseover", mouseOverAttribute.ToString());
this.Attributes.Add("onmouseout", "addthis_close()");
}
private void SetupScripts()
{
StringBuilder script = new StringBuilder();
script.Append("<script language=\"javascript\" type=\"text/javascript\"> ");
script.Append("\n<!-- \n");
script.Append("var addthis_pub = '" + accountId + "';");
if(customLogoUrl.Length > 0)
script.Append("var addthis_logo = '" + customLogoUrl + "';");
if (customLogoBackgroundColor.Length > 0)
script.Append("var addthis_logo_background = '" + customLogoBackgroundColor + "';");
if (customLogoColor.Length > 0)
script.Append("var addthis_logo_color = '" + customLogoColor + "';");
if (customBrand.Length > 0)
script.Append("var addthis_brand = '" + customBrand + "';");
if (customOptions.Length > 0)
script.Append("var addthis_options = '" + customOptions + "';");
if (customOffsetTop != -999)
script.Append("var addthis_offset_top = " + customOffsetTop.ToString(CultureInfo.InvariantCulture) + ";");
if (customOffsetLeft != -999)
script.Append("var addthis_offset_left = " + customOffsetLeft.ToString(CultureInfo.InvariantCulture) + ";");
script.Append("\n//--> ");
script.Append(" </script>");
Page.ClientScript.RegisterClientScriptBlock(
typeof(AddThisButton),
"addthisbutton",
script.ToString());
if(useMouseOverWidget)
Page.ClientScript.RegisterStartupScript(
typeof(AddThisButton),
"addthisbuttonsetup", "\n<script type=\"text/javascript\" src=\""
+ protocol + "://s7.addthis.com/js/152/addthis_widget.js"
+ "\" ></script>");
else
Page.ClientScript.RegisterStartupScript(
typeof(AddThisButton),
"addthisbuttonsetup", "\n<script type=\"text/javascript\" src=\""
+ protocol + "://s9.addthis.com/js/widget.php?v=10"
+ "\" ></script>");
}
}
}