Designpicks :: Designs, Tutorials & Webdevelopment » Scripts & Snippets http://www.designpicks.de Designpicks, deine Quelle für gute Webdesign und Entwicklungs- Tips & Tricks Sat, 26 Dec 2009 18:46:09 +0000 en hourly 1 http://wordpress.org/?v=3.0 Web 2.0 Vernetzung (oder wie ich mir doppelte Arbeit sparen kann) http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/ http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/#comments Sun, 30 Aug 2009 19:46:59 +0000 Designpicks http://www.designpicks.de/?p=712 netzwerkeSocial Media ist aktuell DAS Hype-Thema im Internet. Jeder hat schon mal von StudiVZ, Mister Wong, Xing, Flickr oder Twitter gehört oder ist dort schon aktiv. Es gibt immer mehr dieser Dienste und die Nutzerzahlen explodieren regelrecht. Auch ich nutze diese Plattformen, um Wissenswertes auszutauschen und mit Freunden, Kollegen und Bekannten zu kommunizieren.
Ein Grund für die steigende Popularität der Plattformen ist die sehr einfache Möglichkeit mit einer großen Gruppe von Menschen in Verbindung zu treten. Der Nutzer muss lediglich ein Profil anlegen und erhält dann eine eigene Seite im Netzwerk, welche er nach seinem persönlichen Gusto gestalten kann. Auf dieser Seite kann er anderen Nutzern das mitteilen, was er für mitteilungswürdig hält.

Manche Nutzer betreiben auch eine private Website im Internet. Die Attraktivität einer Website hängt, genauso wie das Profil in einem Netzwerk, von der Qualität der Inhalte ab. Die regelmäßige Pflege beider Seiten kann sehr aufwändig sein und viel Zeit kosten.

Wir wollen drei Möglichkeiten aufzeigen, wie man Inhalte von Social Media Diensten auf der eigenen Homepage einbinden kann. Allerdings empfehlen wir dies nur für versierte Internetuser, die sich mit der Erstellung von Webseiten und der Integration von Scripten gut auskennen.

twitterAuf der eigenen Website zwitschern
Tweets aus dem Microblogging-Dienst Twitter können mithilfe von Javascript an jeder beliebigen Stelle auf der eigenen Website eingebunden werden.
Hierfür benötigen Sie zwei Dateien aus dem Internet. Anschließend stehen Ihnen folgende Funktionen zur Verfügung:

  • Tweets werden schnell geladen und angezeigt
  • Darstellung von bis zu 100 Tweets auf einmal
  • Avatar kann eingeblendet werden
  • Tweets filtern nach Namen
  • Tweets filtern nach Suchbegriffen
  • Form des Tweets wird angezeigt (@ = Mentions)
  • URL’s werden automatisch verlinkt
  • Suchbegriffe mit einer Raute (#) werden automatisch zu der Kategorie verlinkt
  • Darstellung der Tweets mit CSS anpassbar

code

Und so wird es gemacht:

Das Javascript-Framework jQuery kann hier heruntergeladen werden. Diese Datei muss danach auf Ihren Webserver hochgeladen werden.
Die Datei jquery.tweet.js führt die eigentliche Funktion aus. Diese Datei erhalten Sie hier. Hierbei laden Sie ein ZIP-Archiv herunter, es enthält ein Verzeichnis mit mehreren Dateien. Laden Sie anschließend das gesamte Verzeichnis auf Ihren Webserver hoch.

1. Folgendes Script muss in den <head> Tag der HTML-Seite eingefügt werden:

<script language=”javascript” src=”HYPERLINK “http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js” type=”text/javascript”></script>

2. Diese Zeile muss ebenfalls im <head> vorhanden sein:

<script language=”javascript” src=”jquery.tweet.js” type=”text/javascript”></script>

3. Dieser Code muss auch im Bereich Ihrer Seite für Ihre Tweets integriert und angepasst werden. Die englischen auto_join_… Texte können Sie nach Bedarf „eindeutschen“. Testen Sie einfach, welche automatischen Texte für Ihre Seite am besten geeignet sind.

<script type=’text/javascript’>
$(document).ready(function(){
$(“.tweet”).tweet({
username: “eurowebgroup”, // Hier muss Ihr Accountname stehen, sonst werden auf Ihrer Seite die Tweets der eurowebgroup eingeblendet
avatar_size: 32, // die Größe des dargestellten Avatars
count: 3, // Wie viele Tweets sollen dargestellt werden?
join_text: “auto”, // Abstand zwischen Datum und Tweet, hier automatisch
auto_join_text_default: “we said,”, // Automatischer Text
auto_join_text_ed: “we”, // Automatischer Text
auto_join_text_ing: “we were”, // Automatischer Text
auto_join_text_reply: “we replied to”, // Automatischer Text
auto_join_text_url: “we were checking out”, // Automatischer Text
loading_text: “tweets werden geladen…” // Anzeige beim Laden der Tweets
});
});
</script>

3. Diese Zeile muss im <body> Tag der HTML-Seite stehen (hiermit werden die Tweets dargestellt):

<div class=”tweet”></div>

4. Die Stylesheets müssen noch im <head> Tag der HTML-Seite eingebunden werden:

<link href=”jquery.tweet.css” media=”all” rel=”stylesheet” type=”text/css”/>

Und schon sind die Tweets auf Ihrer Homepage!

buttonsLesezeichen mit anderen Nutzern tauschen
Mit Bookmarks kann man besuchte Webadressen speichern und jederzeit wieder abrufen. Wenn mehrere Internetuser Ihre Bookmarks untereinander austauschen, nennt sich dies Social Bookmarking. Um den Austausch von Bookmarks besser zu koordinieren, wurden sogenannte Social-Bookmark-Dienste (z.B. oneview.de oder delicious.com) ins Leben gerufen.
Hier findet ein User Links zu interessanten Websites, Nachrichten, Videos und Blogbeiträgen, die von anderen Usern empfohlen werden. Gerade für Blogbetreiber mit interessanten Texten ist dies sehr wichtig, um neue Leser auf ihre Seite zu lenken.
Um die Weitergabe von Links zur eigenen Site zu vereinfachen, können Betreiber einer Website oder eines Blogs kleine Symbole (Buttons) auf ihren Seiten einbinden. Klickt ein Besucher auf einen Button, wird der Link zur Seite automatisch im Social-Bookmarking-Dienst oder einem sozialen Netzwerk (z.B. Facebook) gespeichert. Der Besucher muss in diesem Dienst auch einen Account besitzen.
Wenn Sie diese Funktion auf Ihrer Homepage oder in Ihrem Blog anbieten wollen, gehen Sie folgendermaßen vor:

1. Besuchen Sie die Website http://www.social-bookmark-script.de. Stellen Sie mit einem Generator die Buttons zusammen, die Sie auf Ihren Seiten anbieten wollen (z.B. Facebook + Mister Wong + Delicious) und passen Sie die Optionen an.
2. Klicken Sie auf der Website auf “Script erstellen”
3. Fügen Sie den ausgegebenen HTML-Code auf Ihren Seiten an den entsprechenden Stellen ein.

Das war’s schon.

flickrFlickr
Einer der erfolgreichsten Web 2.0 Dienste im Internet ist Flickr, gerne auch als Photo Sharing Dienst bezeichnet. Hier können User Bilder einstellen und Bilder von anderen Usern kommentieren. Die Dateien können auch per E-Mail oder Handy auf die Flickr-Plattform hochgeladen werden. Betreiber von Blogs binden gerne Bilder von Flickr auf ihren Seiten ein, um Botschaften oder Thematiken ihrer Texte visuell besser darzustellen.

Das Einbinden von Flickr-Bildern auf der eigenen Homepage ist auch möglich. Die Bilder können u.a. nach Begriffen und Benutzernamen gefiltert werden. Sie müssen dafür einen Flickr-Account besitzen.

Und so geht’s:

1. Loggen Sie sich in Ihrem Flickr-Account ein.
2. Gehen Sie auf die Seite http://www.flickr.com/badge.gne
3. Wählen Sie den HTML-Modus
4. Bestimmen Sie, ob alle Fotos angezeigt werden sollen, oder filtern Sie nach öffentlichen Fotos, Fotos mit bestimmten Begriffen oder Fotos eines bestimmten Albums.
5. Legen Sie dann fest, ob das Account-Bild, zufällige Fotos oder die neuesten Bilder dargestellt werden sollen. Passen Sie die Größe der Bilder an.
6. Anschließend wird ein HTML-Code generiert, den Sie auf Ihrer Seite einbinden müssen.

<!– Start of Flickr Badge –>
<style type=”text/css”>
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id=”flickr_badge_uber_wrapper” cellpadding=”0″ cellspacing=”10″ border=”0″><tr><td><a href=”http://www.flickr.com” id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span style=”color:#ff1c92″>r</span></strong>.com</a><table cellpadding=”0″ cellspacing=”10″ border=”0″ id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=t&layout=v&source=user&user=DEINE FLICKR USER ID HIER“></script>
</table>
</td></tr></table>
<!– End of Flickr Badge –>

WICHTIG: Im Code muss bei “DEINE FLICKR USER ID HIER” die eigene Flickr-ID eingetragen werden!

7. Sie müssen für den Flickr-Badge eine eigene Sytlesheet-Datei anlegen. Kopieren Sie folgenden Code in die CSS-Datei:

#flickrPicContent {width:280px; padding:15px 0 0 0; background:#78B3A8}
#flickrPicContent {padding:0 20px 0 20px; font-size:13px; font-family:Georgia,”Times New Roman”,Times,serif; color:#FFF; font-style:italic}
#flickrPicContent a {color:#4A412C}
#flickrPicContent a:hover {color:#FF564A}
#flickr_badge_wrapper {width:261px; padding:0 19px 0 0; background:#78B3A8; overflow:hidden}
.flickr_badge_image {width: 65px; height: 70px; float: left; background:url(images/Backgrounds/flickrPicBg.jpg) left top no-repeat; padding:5px 0 0 22px; float: left;}
.flickr_badge_image img {width: 60px; height: 50px;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

Und schon sind die Flickr-Bilder auf Ihrer Seite.
Falls Sie Bilder von Flickr in einem WordPress-Blog einbinden wollen, verwenden Sie das Plugin Flickr Photo Album for WordPress.

Viel Spaß beim Ausprobieren!

Gastautor dieses Beitrags ist Duy Tran, Webdesigner bei der Euroweb Internet GmbH in Düsseldorf, dem Full-Service-Internetdienstleister für Deutschland und Österreich.
Zwitschern mit Duy und der Euroweb Group geht auch.

]]> http://www.designpicks.de/web-2-0-vernetzung-oder-wie-ich-mir-doppelte-arbeit-sparen-kann/feed/ 2 TextboxList 0.4: Eingabefelder im Facebook-Stil http://www.designpicks.de/textboxlist-eingabefelder-im-facebook-stil/ http://www.designpicks.de/textboxlist-eingabefelder-im-facebook-stil/#comments Tue, 02 Jun 2009 12:15:25 +0000 Kim http://www.designpicks.de/?p=619 textboxlist

Das auf Mootools-basierende Script TextboxList wurde heute in Version 0.4 releast. Das Tool ermöglicht eine Verbesserung des normalen Text-Eingabefelders.
Bei Eingabe von Text werden sofort Vorschläge angezeigt, die sich mit den Pfeiltasten und Enter hinzufügen lassen. Innerhalb der TextboxList kann man zwischen den Tags navigieren oder einzelne Tags löschen.
Das ganze erinnert sehr an Facebook-Eingabefelder, wie zum Beispiel der Facebook-Suche. Für kommerzielle Nutzung wird eine 20$-Lizenz benötigt. Guckt euch aber auf jeden Fall einmal die Demo an.

]]> http://www.designpicks.de/textboxlist-eingabefelder-im-facebook-stil/feed/ 2 FancyUpload in Version 3.0 veröffentlicht http://www.designpicks.de/fancyupload-in-version-30-veroffentlicht/ http://www.designpicks.de/fancyupload-in-version-30-veroffentlicht/#comments Mon, 25 May 2009 16:52:49 +0000 Kim http://www.designpicks.de/?p=582 Fancyupload

Der populäre Datei-Uploader FancyUpload wurde heute in Version 3.0 (stable) veröffentlicht. FancyUpload unterstützt “multiple file-selection”, der aktuelle Fortschritt wird hübsch animiert. Praktisch an diesem Uploader ist die hohe Flexibilität: Sämtliche Features lassen sich via HTML und CSS an die eigene Seite anpassen. FancyUpload basiert auf MooTools und ist kompatibel mit allen verbreiteten Browsern (inklusive IE6). Und das beste: Es ist kostenlos und ohne Einschränkungen verfügbar (MIT-Lizenz ).

]]> http://www.designpicks.de/fancyupload-in-version-30-veroffentlicht/feed/ 0 JavaScript-Notifications: jGrowl & Window.Growl http://www.designpicks.de/javascript-notifications-jgrowl-windowgrowl/ http://www.designpicks.de/javascript-notifications-jgrowl-windowgrowl/#comments Sat, 23 May 2009 14:32:35 +0000 Kim http://www.designpicks.de/?p=569 jGrowl in Aktion

Stan Lemon hat sein jQuery Plugin jGrowl auf Version 1.2.0 aktualisiert. Mit diesem kleinen JavaScript hat man die Möglichkeit dem Nutzer kleine Benachrichtigungen anzeigen zu lassen. Die Idee ist an das Benachrichtigungssystem Growl (Mac only) angelehnt. Auch das Design der kleinen semi-transparenten Blasen ähnelt dem Original sehr.

Jedoch nicht so sehr, wie Window.Growl. Im Unterschied zu jGrowl basiert dieses Script nicht auf jQuery sondern auf dem MooTools Framework. Es unterstützt außerdem Icons und den populären Bezel-Style.

]]> http://www.designpicks.de/javascript-notifications-jgrowl-windowgrowl/feed/ 0 Google Analytics mit Flash und Ajax Seiten nutzen. http://www.designpicks.de/google-analytics-mit-flash-und-ajax-seiten-nutzen/ http://www.designpicks.de/google-analytics-mit-flash-und-ajax-seiten-nutzen/#comments Wed, 29 Oct 2008 21:41:29 +0000 Aleks http://www.designpicks.de/?p=320

Oft werden die Page Impressions nicht korrekt gezählt, da durch den Ajax Request nicht direkt eine neue Seite geladen wird. Das selbe Problem tritt auch bei Flash Seiten auf.

Im WebResourcesDepot gibt es ein Posting in dem erklärt wird, wie man Google Analytics mit Flash und Ajax Seiten nutzten kann. Die Integration ist ziemlich einfach und lässt sich in ein paar Minuten erledigen.

Hier findet ihr das Posting “How To Track Ajax And Flash Pageviews In Google Analytics?“.

]]> http://www.designpicks.de/google-analytics-mit-flash-und-ajax-seiten-nutzen/feed/ 1