Nils Kuhrt » webdesign http://www.mausheld.de Entrepeneur . Screendesigner & Usability Expert Sat, 10 Dec 2011 19:25:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Annoying.js: Das ideale Javascript um seine Besucher zu vergraulen http://www.mausheld.de/2011/05/annoying-js-das-ideale-javascript-um-seine-besucher-zu-vergraulen/ http://www.mausheld.de/2011/05/annoying-js-das-ideale-javascript-um-seine-besucher-zu-vergraulen/#comments Tue, 24 May 2011 14:42:16 +0000 Nils http://www.mausheld.de/?p=542 Kilian Valkhof hat alle fiesen Javascripte die einen z.B. daran hindern rechts zu klicken um Bilder zu kopieren zu einem Script gebündelt.

Also für alle die sich 0% Conversion Rate oder 100% genervte Besucher wünschen unbedingt zu empfehlen:

 

]]> http://www.mausheld.de/2011/05/annoying-js-das-ideale-javascript-um-seine-besucher-zu-vergraulen/feed/ 0 Facebook Willkommenseite mit Content für Fans und Nicht-Fans per iFrame http://www.mausheld.de/2011/05/facebook-willkommenseite-mit-content-fur-fans-und-nicht-fans-per-iframe/ http://www.mausheld.de/2011/05/facebook-willkommenseite-mit-content-fur-fans-und-nicht-fans-per-iframe/#comments Wed, 04 May 2011 22:09:31 +0000 Nils http://www.mausheld.de/?p=518 Nachdem Facebook die Möglichkeit entfernt hat neue FBML Tabs zu integrieren, hier die Möglichkeit dies per iFrame zu integrieren.

Dazu benötigt man im Grunde folgende Dateien auf dem eigenen Webspace:

  • index.php (Startdatei die je nach Fan-Zustand den richtigen Content lädt)
  • kein-fan.php (Der Content für Nicht-Fans)
  • fan.php (Der iFrame für Fans)
  • fancontent.php (Der Content des iFrames für Fans)
  • facebook.php (Die Facebook-PHP-Library)

Nun zur Vorgehensweise:

  1. Zur Facebook-Developer Appseite gehen
  2. Oben “zur Anwendung” klicken
  3. Button “+ Erstelle eine neue Anwendung” anklicken
  4. Einen Namen eingeben
  5. im nächsten Schritt den Sicherheitscode eingeben
  6. im “Facebook-Integration”-Reiter (an der linken Seite) folgende Einstellungen vornehmen:
    - Canvas URL ergänzen
    - Canvas URL auf index.php setzen (http://www.meineseite.de/facebook/)
    - Name des Reiters, z.B. “Willkommen”
  7. Oben dann noch die Anwendungs-ID und den Code kopieren, der wird in der php-Datei benötigt.
  8. Die Anwendung speichern
  9. rechts dann im Menü auf “Anwendungs-Profilseite” klicken
  10. unter dem Profilbild im Menü auf “Zu meiner Seite hinzufügen” klicken
  11. Fertig! Der Reiter taucht nun in der Seitenspalte auf.
  12. In den Seiteneinstellungen den neuen Reiter noch auf Standardreiter stellen, wenn gewünscht.

Nun zu den einzelnen Dateien: index.php

<?php
require ‘facebook.php’;
$app_id = “DEINE_APPLICATION_ID”;$app_secret = “DEIN_APPLICATION_CODE”;$facebook = new Facebook(array( ‘appId’ => $app_id, ‘secret’ => $app_secret, ‘cookie’ => true));
$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];$page_admin = $signed_request["page"]["admin"];$like_status = $signed_request["page"]["liked"];$country = $signed_request["user"]["country"];$locale = $signed_request["user"]["locale"];
// Content für Fansif ($like_status) {$a = file_get_contents(“fan.php”);echo ($a);} else {// Content für Nicht-Fans$a = file_get_contents(“kein-fan.php”);echo ($a);}
?>

kein-fan.php:

<!DOCTYPE html><html lang=”de”><head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no” /> <title>Jetzt Fan werden</title> <link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
<style type=”text/css”> overflow:auto;overflow-x:hidden; </style>
</head><body>
<img src=”willkommen.jpg” alt=”Jetzt Fan werden” border=”0″”><br>
</body></html>

fan.php:

<!DOCTYPE html><html lang=”de”><script src=”js/scripts.js” type=”text/javascript”></script>
<script type=’text/javascript’>window.fbAsyncInit = function() {FB.Canvas.setSize({ width: 520, height: 4500 });}// Do things that will sometimes call sizeChangeCallback()function sizeChangeCallback() {FB.Canvas.setSize({ width: 520, height: 4500 });}</script><head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no” /> <title>Hallo Fan!</title> <link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
<style type=”text/css”> overflow:auto; overflow-x:hidden; </style>
</head><body>
<iframe src =”http://www.meineseite.de/facebook/fancontent.php” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″ style=”background:#fff” align=”center” width=”512″ height=”4000″></iframe>
<div id=”fb-root”></div><script src=”http://connect.facebook.net/de_DE/all.js”></script><script>FB.init({appId : ‘APP_ID’,status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : true // parse XFBML});</script></body></html>

fancontent.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Flingern.net auf Facebook</title></head>
<body><img src=”willkommen-ok.jpg” width=”520″ height=”490″ alt=”Hallo auf Facebook” /></body></html>

facebook.php

Die Datei könnt ihr euch hier herunterladen

Das war es dann auch schon

 

]]> http://www.mausheld.de/2011/05/facebook-willkommenseite-mit-content-fur-fans-und-nicht-fans-per-iframe/feed/ 1 Gute WordPress Templates zum kleinen Preis http://www.mausheld.de/2011/04/viele-wordpress-templates/ http://www.mausheld.de/2011/04/viele-wordpress-templates/#comments Wed, 13 Apr 2011 14:13:10 +0000 Nils http://www.mausheld.de/?p=530 Heute habe ich bei einer Recherche nach WordPress Templates die Webseite von Elegant Themes entdeckt. Dort bekommt man nach Anmeldung (kosten für ein Jahr 39$) zurzeit 60 Themes.

Die Themes sind alle ziemlich komplex ausgearbeitet und warten mit schönen Javascript Effekten auf.

Man muss nur daran denken rechtzeitig zu kündigen wenn man nicht die Mitgliedschaft verlängert haben möchte.

]]> http://www.mausheld.de/2011/04/viele-wordpress-templates/feed/ 0 Facebook Willkommen-Seite http://www.mausheld.de/2011/01/facebook-willkommenseite-erstellen-unterschiedlicher-content-fur-fans-und-nicht-fans/ http://www.mausheld.de/2011/01/facebook-willkommenseite-erstellen-unterschiedlicher-content-fur-fans-und-nicht-fans/#comments Thu, 20 Jan 2011 22:00:28 +0000 Nils http://www.mausheld.de/?p=448 Update: Hier die Anleitung für die neuen Reiter per iFrame

Eine Facebook Seite kann ja echt jeder erstellen, etwas tricky wird es wenn man unterschiedlicher Content für Fans und Nicht-Fans darstellen möchte:

Für eine Gewinnspielaktion auf einer Facebook-Fanpage wollte ich gerne unterschiedlichen Conten einbinden, je nachdem ob die Beuscher Fans oder noch keine Fans sind. Die FBML-Developer Seite von Facebook gibt schon mal eine Übersicht über die einzelnen TAGs.

Folgendermaßen habe ich nun einen separaten Reiter auf der Seite mit unterschiedlichem Content erstellt:

  • Einen Reiter fügt man am einfachsten hinzu indem man oben in der Reiterleiste am Ende auf das “+” klickt, unten in das Eingabefeld dann “FBML” eingeben und ein “Static FBML” Element hinzufügen.
  • Um den Inhalt des Static FBML zu editieren muss man unterhalb des Profilbildes auf “Seite bearbeiten” klicken und dann auf den Punkt “Anwendungen”.
  • In der Anwendungsliste nun bei Static FBML auf “Zur Anwendung” klicken und das Bearbeiten-Fenster öffnet sich.
  • Oben im Titel den Namen für den Reiter eingeben, also z.B. “Gewinnspiel”
  • Im Feld “FBML” kommt dann der Code für die unterschiedlichen Inhalte rein:

Der FBML-Code

#fans {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#nicht-fans {
width:520px;
position:absolute; top:0; left:0;
}
</style><div id=”fans”>
<fb:visible-to-connection>
<img src=”LINK ZUM BILD” alt=”BILD DAS DIE FANS SEHEN”>
<fb:else>
<div id=”nicht-fans”>
<img src=”LINK ZUM BILD” alt=”BILD DAS ALLE NICHT-FANS SEHEN”>
</div>
</fb:else>
</fb:visible-to-connection>
</div>

Zur Erklärung: Es würde ausreichen nur den FBML Code einzufügen, nur steht dann der Fan-Content weiter unten auf der Seite. Der Nicht-Fan-Conten ist zwar ausgeblendet, drückt jedoch den Fan-Content nach unten. Durch die absolute Positionierung wird das verhindert.

Die beiden Bilder einfach auf euren Webspace hochladen und die URLs dann oben im IMG-TAG eintragen.

Wichtig: Die beiden Bilder (Fan und Nicht-Fan-Content) müssen die gleiche Höhe haben, bei mir wurde ansonsten von dem größeren Bild immer unten etwas bei der Darstellung abgeschnitten.

Testen könnt ihr das nur mit einem User der kein Admin für die Seite ist, Admins sehen immer beide Inhalte. Einfach dann mit einem anderen User auf “Gefällt mir nicht mehr” klicken und dann wieder auf “Gefällt mir”. So kann man beide Versionen sehen.

In den Seiten-Einstellungen sollte dann unter “Genehmigungen verwalten” noch eingestellt werden, das der Standard-Tab dann der neue Tab ist. So kommen die User auf die richtige Begrüßungsseite.

Hier die fertige Fanpage auf Facebook

]]> http://www.mausheld.de/2011/01/facebook-willkommenseite-erstellen-unterschiedlicher-content-fur-fans-und-nicht-fans/feed/ 0 Einfach gemacht: Favicon für das iPhone http://www.mausheld.de/2009/10/einfach-gemacht-favicon-fur-das-iphone/ http://www.mausheld.de/2009/10/einfach-gemacht-favicon-fur-das-iphone/#comments Fri, 30 Oct 2009 13:32:27 +0000 Nils http://www.mausheld.de/?p=181 apple-touch-iconiPhone Besitzer haben wahrscheinlich schon bemerkt, dass einige Webseite die auf dem Home-Screen gebookmarked werden schöne Icons haben, andere haben einen verkleinerten Screenshot.

Das iPhone sucht im Rootverzeichnis des Webservers nach der Datei “apple-touch-icon.png”, existiert diese wird das PNG als Favicon angezeigt.

So geht’s:

  1. Hier das Beispiel-PSD herunterladen und ein persönliches iPhone-Favicon erstellen.
  2. In der Datei sind zwei Ebenen die den Beschnitt und den Weichzeichnereffekt symbolisieren (später auf dem iPhone wird das icon ja z.B. abgerundete Ecken haben). Diese Ebenen einfach ausblenden und ein Foto oder Logo hinzufügen.
  3. Bitte daran denken etwas Abstand zum Rand zu lasse, das Icon wirkt sonst etwas gequetscht
  4. Jetzt die Datei mit “Für Web Speichern” als PNG speichern und auf den Webserver kopieren
]]> http://www.mausheld.de/2009/10/einfach-gemacht-favicon-fur-das-iphone/feed/ 0 Die Anfänge des Ecommerce Design http://www.mausheld.de/2009/10/die-anfange-des-ecommerce-design/ http://www.mausheld.de/2009/10/die-anfange-des-ecommerce-design/#comments Wed, 21 Oct 2009 18:38:33 +0000 Nils http://www.mausheld.de/?p=24 Sehr schöne Beispiele wie alles begann…

Overstock

olderstock

Walmart

oldwalmart

Amazon

oldazon

Weitere Beispiele in diesem Artikel auf Get Elastic

]]> http://www.mausheld.de/2009/10/die-anfange-des-ecommerce-design/feed/ 0