:::: 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? 🙂

 


One Comment

  • Murray |

    Hi there

    Do you have time to brush your dog’s teeth every day?

    Let your dog clean his own teeth with our dog dental care brushing stick. Made of eco-friendly natural rubber, this toothbrush is sturdy. The soft design is safe for your dogs‘ gums and helps to clean their teeth and protect them from oral diseases and dental decay.

    Act Now And Receive A Special Discount!

    Click here: https://dogcare.center

    Best regards,

    Murray