admin - 21-03-09 | Facebook connect API permet concrètement d’utiliser son compte Facebook pour se connecter sur d’autres sites internet que ce dernier. Par exemple sur les blogs pour laisser un commentaire il est nécessaire de créer un compte pour publier un commentaire, depuis quelques semaines il est possible de poster en se loggant avec les même identifiants que sur Facebook.
Facebook a récemment lancé un nouveau plugin «Facebook Connect » pour les blogs WordPress, le plug-in fonctionne très bien si vous utilisez le thème par défaut qui vient avec wordpress, mais si vous utilisez un aute theme de wp, il ne fonctionnera surement pas correctement.
Ce week-end, j’ai passé de des heures à essayer de faire marcher le facebook plugin sur le blog de mon http://www.sokomaroc.com, j’ai essayé le plugin par Facebook, et le plugin de sociable, mais rien d’utile, alors je simplement décidé de prendre le long chemin et de faire tout le travail moi-même, et ca a marché, de sorte que je voudrais partager mon expérience avec vous, voila les etapes :
1. Créer une application sur Facebook:Connectez-vous à Facebook et ajoutez Facebook Developers Application
2. Cliquez sur Créer une application, saisissez un nom et acceptez les termes ….
3. Sur la page suivante,
4. Entrez l’URL de base de votre site web dans le “Canevas Callback champ URL. Par exemple http://www.exemple.com.
5. Copiez la «clé API», vous en aurez besoin plus tard.
6. Enregistrer les modifications
7. Click on “créer modèles d’actualités” et Choisissez l’ application que vous venezde de créer
8. On the next page
9. Sous le «Modèle d’une ligne » copier-coller {*actor*} a commente sur {*blog*} sujet {*post*}.
10. Maintenant, cliquez sur ignorer (et ignorer toutes les erreur) jusqu’à ce qu’à la dernière page, puis cliquez sur “Enregistrer le lot de modèles”
11. Copiez « Bundle ID », parce que nous aurons besoin plus tard aussi.
Maintenant vous avez enregistré et configuré (presque) votre Application sur Facebook, il est temps de configurer votre blog. Créez un fichier à la racine de votre domaine et appeler le “xd_receiver.htm”, puis copiez le code suivant en cela:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js” type=”text/javascript”></script>
</body>
</html>
12. Ajouter le “fb” XML namespace au fichier header.php dans votre thème. Pour moi voila le resultat :
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” <?php language_attributes(); ?>>
13. Ajoutez une référence à jQuery (où que ce soit avant l’appel à “wp_head ()” dans votre fichier header.php)
<? php wp_enqueue_script ( “jQuery”);?>
Ensuite, vous modifier comments.php, dans le theme par défaut, le fichier est appelé comments.php et se trouve dans wp-contentthemesdefaultcomments.php, mais pour moi, comme si j’utilise un thèmes personnalisé c’ete “comment2.php” et il se trouvais wp-contentthemesPersoThemeincludecomments2.php.
Trouvez la partie où l’utilisateur doit entrer son nom / email / URL et changer la par:<div id=”comment-user-details”>
<fb:login-button length=”long” onlogin=”update_user_details();”></fb:login-button>
<p style=”clear:left;”><strong>Or enter your details below:</strong></p>
<p><label for=”name”>Name <?php if ($req) echo “(required)”; ?></label><br />
<input type=”text” name=”author” id=”name” value=”<?php echo $comment_author; ?>” size=”50″ tabindex=”1″ /></p>
<p><label for=”email”>Email Address <?php if ($req) echo “(required)”; ?></label><br />
<input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”50″ tabindex=”2″ /></p>
<p><label for=”url”>Website</label><br />
<input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”50″ tabindex=”3″ /></p>
</div>
14. Juste au-dessus de ce bloc, il faut trouver le début de la balise <form> pour poster un commentaire, et ajoutez l’attribut “onsubmit” de sorte qu’il ressemble à ceci:
<form action = “<? get_option php echo ( ‘siteurl’);?> / wp-comments-post.php” method = “post” id = “commentform” onsubmit = “update_form_values ();”>
L’important, c’est que tout est enveloppé dans un DIV ou SPAN avec id=”comment-user-details” puis évidemment le <fb:login-button>. Maintenant au plus bas du fichier de commentaires comments.php ou bien comments2.php, ajoutez ce code:
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<style type=”text/css”>
#fb-user { border: 1px dotted #C0C0C0; padding: 5px; display: block; height: 48px; }
#fb-msg { float:left; }
.fb_profile_pic_rendered { margin-right: 5px; }
a.FB_Link img { float: left; }
</style>
<script type=”text/javascript”>
var fb_connect_user = false;
function update_user_details() {
fb_connect_user = true;
// Show their FB details
if (!jQuery(‘#fb-user’).length) {
jQuery(‘#comment-user-details’).hide().after(“<span id=’fb-user’>” +
“<fb:profile-pic uid=’loggedinuser’ facebook-logo=’true’></fb:profile-pic>” +
“<span id=’fb-msg’><strong>Hi <fb:name uid=’loggedinuser’ useyou=’false’></fb:name>!</strong><br />You are logged in with your Facebook account. ” +
“<a href=’#’ onclick=’FB.Connect.logoutAndRedirect(“<?php the_permalink() ?>”); return false;’>Logout</a>” +
“</span></span>”);
}// Refresh the DOM
FB.XFBML.Host.parseDomTree();
}function update_form_values() {
if (fb_connect_user) {
profile = jQuery(‘#fb-user’).find(‘.FB_ElementReady .FB_Link’)[1]['href'];
user_id = profile.substring(profile.indexOf(‘?id=’)+4);
jQuery(‘#url’).val(profile); // FB profile URL
jQuery(‘#email’).val(user_id+’@facebook.com’); // Can’t get a real one from FB unfortunately. This saves their user id @facebook.com
jQuery(‘#fb-user’).find(‘.FB_ElementReady .FB_Link’).each(function(i){ if (i==1) { jQuery(‘#name’).val(jQuery(this).text()); } }); // Gets their name from the DOM
setCookie(‘fb_connect’, ‘yes’);
}
}function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ “=” +escape(value)+((expiredays==null) ? “” : “;expires=”+exdate.toGMTString());
}function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + “=”);
if (c_start!=-1) {
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(“;”,c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}return “”;
}FB.init(“YOUR-FACEBOOK-API-KEY”, “/xd_receiver.htm”);
FB.Connect.ifUserConnected(update_user_details);
if (getCookie(‘fb_connect’) == ‘yes’) {
setCookie(‘fb_connect’, null);
FB.Connect.showFeedDialog(YOUR-TEMPLATE-BUNDLE-ID, {‘blog’:'<a href=”<?php bloginfo(‘home’) ?>”><?php addslashes(bloginfo(‘name’)) ?></a>’, ‘post’:'<a href=”<?php the_permalink() ?>”><?php addslashes(the_title()) ?></a>’}, null, null, null, FB.RequireConnect.promptConnect);
}
</script>
IMPORTANT:
Retournez maintenant et remplacer ” YOUR-FACEBOOK-API-KEY ” et ” YOUR-TEMPLATE-BUNDLE-ID ” avec les valeurs appropriées que vous avez obtenu au début.
Enregistrer tout et de le transférer vers votre blog.
Hoorray !!!! vous devriez maintenant voir un boutton de Facebook Connect dans la section commentaire de votre blog (vous devez vous déconnecter de WordPress pour le voir), et lorsque vous cliquez dessus, vous devez vous connecter sure Facebook, puis poster un commentaire.
ENJOY !!!!!
nice article about facebook dude.don
oui… c