Nachdem heute Abend die fertige Version des Microsoft Internet Explorers 8 freigegeben wurde, ist es Zeit auch einen ersten eigenen Accelerator hierfür zu schreiben. Als Alternative zum Bookmarklet ist es hiermit nun ebenfalls bequem möglich einen beliebigen Artikel bei dotnet-kicks.de vorzuschlagen. Die Bedienung ist denkbar einfach: Nach der Installation des Accelerators markiert ihr auf der Seite, die ihr vorschlagen möchtet, eine beliebige Textpassage. Diese wird automatisch in die Eingabemaske von dotnet-kicks.de in das Feld für die Beschreibung eingetragen. Ebenso wird der Titel und die URL automatisch übernommen. Nach der Auswahl der passenden Kategorie und einem Klick auf “Artikel einstellen” ist euer Artikel auch schon auf dem Community-Portal gespeichert.

Um nun unseren IE8-Accelerator zu installieren geht ihr einfach in der Add-ons Gallery auf “.NET Kicks Germany” und klickt dort den Button an. Nach einer kurzen Rückfrage, ob ihr den Accelerator auch wirklich installieren wollt ist auch schon alles erledigt. Für alle die es interessiert hier der Quellcode des Accelerators zum Download verfügbar oder auch direkt zum Ansehen:

<?xml version="1.0" encoding="UTF-8" ?>
 <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://dotnet-kicks.de</homepageUrl>
  <display>
   <name>.NET Kicks Germany</name>
   <icon>http://dotnet-kicks.de/favicon.ico</icon>
  </display>
  <activity category="Share">
   <activityAction context="selection">
    <execute action="http://dotnet-kicks.de/submit/">
     <parameter name="url" value="{documentUrl}" type="text" />
     <parameter name="title" value="{documentTitle}" type="text" />
     <parameter name="description" value="{selection}" type="text" />
    </execute>
   </activityAction>
  </activity>
 </openServiceDescription>

Wer Hilfe bei der Erstellung seines eigenen Accelerators braucht kann sich einfach die “OpenService Format Specification for Accelerators - Version 0.8” anschauen.

One of the greatest blog engines based on .NET is BlogEngine.NET with a lot of advantages to it’s competitors. Unfortunately there aren’t as much themes and plugins available as for other engines like DasBlog or Wordpress. One famous plugin for Wordpress is Sociable, “which adds social media buttons to your posts, and does so easily, and beautifully”.  There are over 100 bookmarking services integrated and you can choose in your admin-interface which you want to show under your articles for your users.

I tried some of the available social bookmarking extensions for BlogEngine.NET but none had satisfied me. Sociable looks good but it’s written in PHP and only available for Wordpress. It’s rendering it’s output with two simple div’s and a unordered list with some simple stylesheets. I made a blank extension and started to implement this output for BE.NET. The most bulky part was the adoption of all those bookmark services. To make adding new services easier I made a struct with properties for:

• name of the service
• url for adding links with placeholders
• name of a service-specific css-class
• filename of the icon
• a unique identifier

So adding a entry e.g. for del.icio.us is as simple as this:

new SociableBEEntry(++i,
                    "del.icio.us",
                    "http://del.icio.us/post?url=PERMALINK&title=TITLE",
                    "delicious.png")

Currently all bookmarking services of Sociable are integrated plus “msdn Social”, the social bookmarking service from Microsoft for developers.

This is the first version of SociableBE (a combination of “Sociable” and “BE” for BlogEngine.NET) so there is no shiny web2.0 interface with drag & drop of the used services in the admin-panel like in the original plugin. My main focus was to afford a simple interface for choosing the bookmarking services you want to use, so there are two ListBoxes with a add- and remove-button. Two other buttons (plus and minus) are for re-ordering the enabled services. There are also two input fields for the tagline and the image-path. One flaw is the static path to “~/SociableBE/” for the admin-page, the css-file and the loading-animation. Best is when leaving the images in this folder, too, and don’t touch the Image-Path setting. ;-)

You have full control over the design editing the css-file. For most cases it should be ok. Currently the extension is rendering valid xhtml 1.0 transitional code. It’s not strict-valid because I’m using the target-attribute for the generated links. I will add a option to disable this behavior in my next release.

Do you have other suggestions you would like to see within this extension? Know a bookmarking-service yet missing? Just leave a comment or write me a short mail and I will schedule it perhaps for one of the coming updates. Any other great Wordpress plugins you would like to see adapted for the BlogEngine.NET? Give me a hint and if I can take advantage of it I will see what I can do. If you are using SociableBE on your blog I would appreciate a short notice via email, comment or twitter (@anheledir) – I’m a statistics-junkie and would love to see who is using it. :-)

Screenshots:

 
Mehr...

Seitzeichen ist ein neuer, deutschsprachiger Dienst der den Betreibern von Blogs und Webseiten dabei hilft eine möglichst umfangreiche Auswahl an Social Bookmarkdiensten für die User einzusetzen. Analog zum englischsprachigen AddThis wird hierbei eine kleine Grafik angezeigt, über die man die aktuelle Seite bzw. den aktuellen Artikel direkt an den gewünschten Dienst übermitteln kann, bsp. del.icio.us, Yahoo MyWeb oder Live Favoriten. Unterstützt werden neben 23 verschiedenen Bookmarkdiensten auch 11 Newsdienste wie bsp. Technorati, Slashdot und Yigg.

Zur Zeit muss man sich noch auf der Seite von Seitzeichen für einen Einladungscode anmelden. Allerdings hat es bei mir nur rund einen Tag gedauert, bis ich diesen zugeschickt bekam. Die Wartezeit ist also nicht allzugroß. Und da ich das Widget gerne unter jedes Posting hinzufügen wollte, blieb mir nur die Wahl es entweder manuell in das entsprechende Theme zu kopieren, oder aber mal schnell eine Extension für die BlogEngine.NET zu schreiben. Letztes hat sich als einfacher und schneller herausgestellt und vielleicht findet wer anders die Extension ja auch noch nützlich. :-)

Installation

• Eine neue Datei SeitzeichenWidget.cs erstellen und den unten stehenden Quellcode einfügen oder die beigefügte ZIP-Datei herunterladen und die enthaltene SeitzeichenWidget.cs entpacken.
• Die CS-Datei kopiert ihr danach in das Verzeichnis /App_Code/Extensions/ eurer Bloginstallation.
• Zuletzt müsst ihr das Widget noch konfigurieren: Geht in eurem Blog nach dem Login auf Extensions und beim SeitzeichenWidget auf Editieren. Bei Seitzeichen Source gebt ihr jetzt den vollständigen Pfad zur JavaScript-Datei ein, die ihr nach dem Generieren des Widgets bei Seitzeichen erhalten habt (bsp: http://w3.seitzeichen.de/w/5a/15/widget_5a15745f41e54311ec32fd625ea1f715.js)

Quellcode

using System;
using BlogEngine.Core;
using BlogEngine.Core.Web.Controls;

[Extension( "Add the Seitzeichen Bookmark-Widget to each post.", "1.0", "<a href=\"http://www.gordon-breuer.de\" target=\"_blank\">Gordon Breuer</a>" )]
public class SeitzeichenWidget {
  private static ExtensionSettings settings;
  private static Post post;

  public SeitzeichenWidget() {
    Post.Serving += new EventHandler<ServingEventArgs>( Post_Serving );
  }

  private void Post_Serving( object sender, ServingEventArgs e ) {
    post = (Post)sender;

    ExtensionSettings initialSettings = new ExtensionSettings( GetType().Name );
    initialSettings.Help =
        "<b>Seitzeichen Source</b>: The source of the javascript from the generated Bookmark-Widget";
    initialSettings.AddParameter( "js", "<b>Seitzeichen Source</b>" );
    initialSettings.AddValue( "js", @"http://w3.seitzeichen.de/w/5a/15/widget_***.js" );
    initialSettings.IsScalar = true;
    ExtensionManager.ImportSettings( initialSettings );
    settings = ExtensionManager.GetSettings( GetType().Name );

    string settingSeitzeichen = settings.GetSingleValue( "js" ).ToLower();
    e.Body += BuildHtml( post, settingSeitzeichen );
  }

  private string BuildHtml( Post post, string seitzeichen ) {
    return string.Format( "<br /><script type=\"text/javascript\">var szu=encodeURIComponent(\"{0}\"); var szt=encodeURIComponent(\"{1}\");</script><script type=\"text/javascript\" src=\"{2}\"></script>", post.AbsoluteLink.ToString(), post.Title.Replace("'", "`"), seitzeichen );
  }
}

Download

 SeitzeichenWidget.zip Compressed (zipped) Folder
0.9 KB SeitzeichenWidget.zip