:::: MENU ::::

FBML: So füge ich ein Kontaktformular in meine Facebook-Fanpage ein

Dieses Tutorial ist veraltet!! FBML wird von Facebook nicht weiterentwickelt und zudem ist es seit  Oktober für alle Anwendungen SSL-Pflicht,
möchte man also eine komplett eigene App schreiben benötigt man einen SSLfähigen Webserver, daher empfehle ich auf FB Anwendungen wie „Static FBML Iframe“ zurückzugreifen um so das SSL Problem zu umgehen.


Mit Hilfe dieser App lässt sich dann eine Website als Iframe in die Facebookpage einbinden. So lässt sich das Formular dann komplett frei gestalten und man ist nicht von FB abhänig 🙂

Teil Eins der neuen Serie FBML – Facebook Markup Language – einer  Howto-Serie wie man seine Fanpage auf Facebook ( zum Beispiel für die eigene Firma, im Kundenauftrag, für den eigenen Blog ) ein wenig aufpeppen kann.

Diese Reihe setzt voraus das man bereits ein ganz klein wenig Erfahrungen mit Pages unter Facebook hat und  Erfahrung in Webprogrammierung, wer nicht weiß wie er eine Fanpage erstellt, dem lege ich Google ans Herzen 😉 Zunächst einmal müsst ihr die Anwendung „FBML“ zu euer Seite hinzufügen, dass geht über „Seite bearbeiten“ ->“Anwendungen“. Hier solltet ihr direkt FBML finden. Fügt die Anwendung zu euer Fanpage / den Reitern hinzu und geht dann auf „Zur Anwendung“.

Es öffnet sich eine Seite die wie folgt aussehen sollte:

Um nun ein Kontaktformular einzufügen verwendet ihr folgenden Code:

<script><!–
function submitAjaxForm() {
// declare a new FBJS AJAX object
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) { document.getElementById(‚ajaxMessage‘).setInnerFBML(data);
}
document.getElementById(‚ajaxMessage‘).setInnerXHTML(‚Daten werden verarbeitet, bitte warte einen Moment…‘);

var queryParams = {‚
Name‘ : document.getElementById(’name‘).getValue(),
‚email‘ : document.getElementById(‚email‘).getValue(),
‚msg‘ : document.getElementById(‚msg‘).getValue(),
‚Vorname‘ : document.getElementById(‚Vorname‘).getValue()
};
ajax.post(‚http://deinewebserver.de/fb_contact.php‘, queryParams);
return false;
}
//–></script>

<h1>Du hast eine Frage? </h1>
<form method=“post“ action=“http://deinewebserver.de/fb_contact.php“>
<table style=““>

<tr><td><p style=“margin:1px;“><label for=“Name“>Name:</label></p></td>
<td><p style=“margin:1px;“><input type=“text“ size=“14″ maxlength=“400″ name=“Name“ id=“Name“ /></td></tr>

<tr><td><p style=“margin:1px;“><label for=“Vorname“>Vorname:</label></p></td>
<td><p style=“margin:1px;“><input type=“text“ size=“14″ maxlength=“400″ name=“Vorname“ id=“Vorname“ /></td></tr>
<tr><td><p style=“margin:1px;“><label for=“email“> E-mail:</label></p></td>
<td><p style=“margin:1px;“><input type=“text“ size=“14″ maxlength=“400″ name=“email“ id=“email“ /></td></tr>

<tr><td><p style=“margin:1px;“><label for=“msg“>Deine Nachricht:</label></p></td>
<td><p style=“margin:1px;“><textarea name=“msg“ id=“msg“ cols=“40″ rows=“5″>
</textarea></td></tr>

<tr>
<td><p style=“margin:1px;“><button type=“submit“ onclick=“return submitAjaxForm();“>Abschicken</button></td></tr>
<tr><td colspan=“2″><p id=“ajaxMessage“></p></td>

</table>

</form>

Wie ihr das Formular gestaltet bleibt euch überlassen, dies ist nur ein einfaches Beispiel 🙂
Das Ajax / HTML Code sorgt dafür, dass die Anfrage an die Datei http://deinewebserver.de/fb_contact.php geschickt wird. In <p id=“ajaxMessage“></p> steht nach dem Abschicken die Antwort die das PHP-Script auswirft.

So ein PHP Script könnte wie folgt aussehen:

<?php

$to = "info@deinewebsite.de";
$vollername = $_POST["Name"]." ".$_POST["Vorname"];
$subject = $vollername." hat dir eine Nachricht uber Facebook geschickt"
$email = $_POST["email"]
$message = $_POST["msg"]." Emailadresse: ".$email;
if (mail($to, $subject, $message,
„From: $vollername <$email>“)) {
echo 'Nachricht erfolgreich verschickt' . "<br />\n";
}
else {
echo 'Ups, versuch es später noch einmal' . "<br />\n";
}
?>

Noch Fragen? 🙂

 


7 Comments

  • nadja |

    hi danke erstmal für das kontaktformular ….
    ich habe aber folgendes problem ich habe da wo deinewebserver.de steht meine internetadresse eingegeben sprich meinedomain.de/fb_contact.php … habe die php datei auch schon in mein root verzeichnis angelegt nur wenn ich dann bei facebook das formular ausfülle und abschicke kommt immer eine fehlermeldung

    was habe ich falsch gemacht?

  • mayo |

    facebook entfernt die -Blöcke, insofern funktioniert der ganze Haufen natürlich nicht

  • marcel |

    Fehler:
    „Die von dir angeforderte Seite konnte nicht gefunden werden.
    Du hast möglicherweise auf einen ungültigen Link geklickt oder die URL falsch eingegeben. Bei manchen Internetadressen wird zwischen Groß- und Kleinschreibung unterschieden.“

    haste ’ne Idee, Seite ist definitv vorhanden und läßt sich über die URL auch direkt aufrufen?

So, what do you think ?