dotnet-kicks.de Button auf eigenen Seiten einbinden
Statt eure Artikel einzeln bei dotnet-kicks.de einzustellen könnt ihr den "kick-it"-Button
auch auf eurer Seite direkt einbinden. Die Anzahl der aktuellen Kicks wird automatisch
in der Grafik angezeigt und die Farbe kannst du ebenfalls beliebig anpassen, damit
sich der Button auch nahtlos in dein Design einfügen kann. Nachfolgend haben wir
für einige CMS und Blog-Systeme sowie für die manuelle Einbindung per JavaScript
Beispiele bereitgestellt.
Solltest du weitere Plug-Ins kennen die hier noch nicht
aufgeführt sind, so melde dich einfach bei uns. Die Kontaktinformationen findest
du im Impressum.
Für die BlogEngine.NET gibt es zwei verschiedene Erweiterungen, je nachdem ob du
den „Kick-It“-Button bei jedem Artikel anzeigen möchtest oder nur bei bestimmten.
Alle Artikel
Entpacke die im Zip-Archiv enthaltene CS-Datei in das Verzeichnis „\App_Code\Extensions\“
deiner BlogEngine.NET Installation. Im Administrations-Bereich steht anschließend
bei den Erweiterungen ein Dialog zum Anpassen einiger Optionen zur Verfügung. Der
eigentliche Button wird in einem div-Tag mit der Klasse „dnkde“ dargestellt. Ein
optional über die Einstellungen hinzuzufügender Titel wird in einem div-Tag mit
der Klasse „dnkde-description“ angezeigt. Beide Klassen können über eigene CSS-Angaben
nach Belieben angepasst werden.
Nur bestimmte Artikel
Entpacke die im Zip-Archiv enthaltene CS-Datei in das Verzeichnis „\App_Code\Extensions\“
deiner BlogEngine.NET Installation. In dem Artikel, in dem nun der „Kick-It“-Button
erscheinen soll schreibt man nun einfach „[kick]“. Beim Speichern des Beitrags wird
diese Zeichenfolge automatisch durch den entsprechenden Quellcode ersetzt und kann
dann ggf. noch manuell angepasst werden.
Das Einfügen des „Kick-It“-Buttons erfolgt hier direkt im gewünschten Theme. Öffnet
also die Datei „httpdocs/themes/<name_des_themes>/itemTemplate.blogtemplate“ und
fügt an der gewünschten Stelle den folgenden Link ein:
<a href="http://dotnet-kicks.de/kick/?url=<%PermalinkUrl%>">
<img src="http://dotnet-kicks.de/Services/Images/KickItImageGenerator.ashx?url=<%PermalinkUrl%>" border="0" alt="Kick it on dotnet-kicks.de" />
</a>
Das kann beispielsweise direkt vor dem p-Tag mit der Klasse „postmetadata“ erfolgen.
Auch für Wordpress gibt es zwei verschiedene Erweiterungen, je nachdem ob du den
„Kick-It“-Button bei jedem Artikel anzeigen möchtest oder nur bei bestimmten.
Alle Artikel
Entpacke die im Zip-Archiv enthaltene PHP-Datei in das „\wp-content\plugins\“-Verzeichnis
deiner Wordpress Installation und aktiviere das Plugin im Admin-Bereich. Anschließend
wird der „Kick-It“-Button automatisch zu allen Artikeln automatisch hinzugefügt.
Nur bestimmte Artikel
Entpacke die im Zip-Archiv enthaltene PHP-Datei in das „\wp-content\plugins\“-Verzeichnis
deiner Wordpress Installation und aktiviere im Admin-Bereich das Plugin mit dem
Namen „.NET-Kicks DE Plugin“. Anschließend wird in deinen Artikeln die Zeichenfolge
„[kick]“ beim Anzeigen durch den dazugehörigen Link ersetzt.
Manuelle Methode
Wenn ihr den „Kick It“-Button selbst in euer Template einbinden wollt, so könnt
ihr hierfür auch einfach den folgenden Quellcode verwenden:
<a href="http://dotnet-kicks.de/kick/?title=<?php echo urlencode(the_title()); ?>&url=<?php echo urlencode(get_permalink()); ?>">
<img src="http://dotnet-kicks.de/Services/Images/KickItImageGenerator.ashx?url=<?php echo enchode(get_permalink()); ?>" border="0" alt="Kick It auf dotnet-kicks.de" />
</a>
Meldet euch bei eurem Blog an und klickt auf „Anpassen“ um die Konfigurationsoberfläche
aufzurufen. Hier klickt ihr auf die Reiterkarte „Layout“ und wählt in dem Menü „HTML
bearbeiten“ aus. Setzt dabei den Haken in der Checkbox „Vorlagen zum Erweitern von
Widgets“ und sucht im HTML-Code nach „“. Der Tag müsste sich etwa
in der Mitte des Fensters befinden. Fügt anschließend direkt nach diesem Tag den
folgenden HTML-Code ein:
<p>
<a expr:href='"http://dotnet-kicks.de/submit/?url=" + data:post.url + "&title=" + data:post.title' expr:id='data:widget.instanceId + "_kickit"' >
<img border="0" alt='Kick It on dotnet-kicks.de' expr:src='"http://dotnet-kicks.de/Services/Images/KickItImageGenerator.ashx?url=" + data:post.url'/>
</a>
</p>
Entpackt die im Zip-Archiv zu findende DLL-Datei in das Plug-In Verzeichnis des
Windows Live Writers, beispielsweise „c:\programme\windows live\writer\plugins\“.
Nach dem Starten des WLW wählt ihr im Dropdown-Feld rechts oben „Blogeinstellungen
bearbeiten“ und aktiviert unter dem Reiter „Plug-Ins“ den Haken bei „DotNetKicks
DE“. Diesen Schritt wiederholt ihr für alle Blogs, in denen der Button angezeigt
werden soll. In der Vorschau eures Artikels ist der Button nun am Ende des Beitrags
zu sehen und beim Veröffentlichen auf dem Blog wird der notwendige Quellcode automatisch
hinzugefügt. In den Plug-In Eigenschaften unter „Extras – Optionen – Plug-Ins“ finden
sich Einstellmöglichkeiten für die gewünschten Farben des Buttons inkl. eines Farbauswahl-Dialogs.
Soll der Button bei einzelnen Artikeln nicht eingefügt werden so könnt ihr das Plug-In
kurzzeitig für das entsprechende Blog deaktivieren.
Um den „Kick-It“-Button in seinen von Feedburner ausgelieferten RSS-Feed zu integrieren
verwendet ihr am besten die FeedFlare-Funktion. Hierfür meldet ihr euch bei FeedBurner
an, wählt den entsprechenden RSS-Feed aus und klickt auf die Reiterkarte „Optimize“.
Auf der linken Seite findet ihr nun die Option „FeedFlare“ und tragt in das Eingabefeld
neben dem Button „Add New Flare“ die folgende URL ein:
http://dotnet-kicks.de/Static/XML/Kickitflare.xml
Nachdem ihr unseren „Flare“ hinzugefügt habt findet ihr in der
Liste den neuen Eintrag „Kick It“. Macht hier einen Haken vor und klickt ganz unten
auf den Button „Activate“ bzw. „Save“.
Um den „Kick It“-Button auf eurer Webseite darzustellen werden unter anderem der
Titel der Seite und ein so genannter „Permalink“ benötigt, also ein Link auf die
entsprechende Seite welcher sich nicht mehr ändern sollte (also beispielsweise nicht
auf eine Seite mit aktuellen Themen verlinken sondern einen Deeplink auf den Artikel
bsp. Im Archiv verwenden). Im folgenden Code-Beispiel wird davon ausgegangen, dass
ihr eine Methode GetPermalink() mit dem Rückgabewert vom Typ „string“ habt und eine
Methode GetTitle(), welche ebenfalls den Typ „string“ zurückgibt. Letzteres ist
optional, so dass die Methode GetTitle() auch „string.Empty“ zurückgeben kann, in
dem Fall wird die Benennung des Artikels dem ersten kickenden Besucher überlassen.
Entpacke das im Zip Archiv enthaltene Control KickIt.ascx und kopiere es in den Controls-Ordner seines Skins.
Das Control muss dort eintragen werden, wo man es anzeigen lassen möchte (üblicherweise Day.ascx undViewPost.ascx). Zuerst muss das UserControl registriert werden, dann kann es verwendet werden.
<%@ Register TagPrefix="awn" TagName="KickItDe" Src="KickItDe.ascx" %>
<!-- und nun an die Stelle wo es angezeigt werden soll -->
<awn:KickItDe runat="server"/>
Jetzt wird auf jeder geänderten Seite der dotnet-Kicks.de Button angezeigt.
Dieses Control wurde freundlicherweise von Albert Weinert zur Verfügung gestellt.
Für eine dynamische Einbindung in andere Webseiten, für die es kein Plug-In
gibt, könnt ihr auch immer die Javascript-Variante verwenden. Fügt hierfür einfach
den folgenden Quellcode an die entsprechende Stelle auf eurer Webseite ein. Als
zu kickende URI wird die aktuell in der Browser-Adresszeile befindliche URL verwendet.
Dafür ist allerdings auch keine serverseitige Script- oder Programmiersprache notwendig.
<div id="dnkContainer">
</div>
<script type="text/javascript">
var insertLocation = document.getElementById('dnkContainer');
var encodedTitle = encodeURI(document.title).replace('#', '%23');
if (insertLocation) {
var currentPageUrl = document.URL + "&title=" + encodedTitle;
var dotnetkicksLink = document.createElement('a');
dotnetkicksLink.href = 'http://dotnet-kicks.de/kick/?url=' + currentPageUrl;
var dotnetkicksImg = document.createElement('IMG');
dotnetkicksImg.src = 'http://dotnet-kicks.de/Services/Images/KickItImageGenerator.ashx?url=' + currentPageUrl;
dotnetkicksImg.border = 0;
dotnetkicksLink.appendChild(dotnetkicksImg);
insertLocation.appendChild(dotnetkicksLink);
}
</script>