Quickribbon
YAKA Créations : CV | YAKA | BETA | GALERIE | mini BLOG
API friendfeed + XHTML + CSS = un Microblog qu’il est bien ! | Le grand BETA !


Billet

API friendfeed + XHTML + CSS = un Microblog qu’il est bien !

Catégorie du billet : Beta Les Tags du billet : , , ,

J’ai développé hier soir une nouvelle version du microYAKA !

Pour cela, j’ai utiliser l’API Friendfeed, deux trois bricoles de CSS, mis le tout dans quelques DIV et voila le résultat ! (plus d’informations dans la suite de l’article)

1/ L’API Friendfeed

Friendfeed dispose d’une API facilement utilisable en PHP, pour voir la documentation, télécharger les script PHP qui va bien, rendez vous sur la page l’API.

Maintenant passons au code :

Code source :

//declarer un nouvel objet friendfeed
$friendfeed = new FriendFeed($friendfeed_login);

//declarer un objet feed dans lequel seront stockées les entrées de votre friendfeed
$feed = $friendfeed->fetch_user_feed($friendfeed_login,null,0,30);

//parcours l’objet $feed et l’affiche sous forme de liste imbriqués
$cpt=0;
foreach($feed->entries as $entry) {
if($cpt==0) {
echo ‘<ul class=”sansmarge”>’;
$mydate = str2Date($entry->published);
$cpt = $cpt+1;
echo ‘<li class=”date”>’,$mydate,’</li>’;
echo ‘<li><img src=”‘,$entry->service->iconUrl,’” /><a href=”‘,$entry->link,’”>’,str2Html($entry->title),’</a></li>’;
}
else {
if ($mydate != str2Date($entry->published)) {
echo ‘<ul class=”marge”>’;
$mydate = str2Date($entry->published);
$cpt = $cpt+1;
echo ‘<li class=”date”>’,$mydate,’</li>’;
echo ‘<li><img src=”‘,$entry->service->iconUrl,’” /><a href=”‘,$entry->link,’”>’,str2Html($entry->title),’</a></li>’;
}
else {
echo ‘<li><img src=”‘,$entry->service->iconUrl,’” /><a href=”‘,$entry->link,’”>’,str2Html($entry->title),’</a></li>’;
}
}
$mydate = str2Date($entry->published);
}
for ($i = 0 ; $i <= $cpt ; $i++) {
echo ‘</ul>’;
}

Celanous donnera des listes imbriqués les unes en dessous des autres et nous permettra en jouant avec notre CSS d’affiché cela sous la forme d’une frise horizontale.

2/ La CSS

Pour centrer horizontalement ma frise je la met dans une div appelée wrap, la partie gauche sera dans un div logo et la partie droite dans un div content, tout ceci s’organise comme suit :

Code source :

HTML :

<div id=”wrap”>
<div id=”logo”>
<-Contenu de la sidebar ->
</div>
<div id=”content”>
<!-Contenu friendfeed ->
</div>
</div>

CSS :

/*
Reset CSS
*/
* {margin : 0; padding : 0;}

body {font-size:62.5%; }
/*
Structure
*/
#wrap { position:absolute;padding:10px;left:50%;top:50%; height:650px; width:1102px; margin-top:-325px; margin-left:-551px;}
#logo { width:295px; height: 500px; position:relative; top:15px; left:0; float:left;}
#content {position:relative; z-index:auto; width:800px; height: 600px; font-size:1em; line-height:1.2em; left:10px; top:15px; padding-bottom:15px; display:block; overflow:hidden; overflow-x:auto; overflow-y:hidden; overflow: -moz-scrollbars-horizontal; }

On mélange le tout bien fort, on ajoute nos class qui vont bien dans la CSS pour personnaliser notre style, on choisit les couleurs, les images et hop en deux temps, trois mouvements, on se retrouve avec un micro blog !

N’hésiter pas à venir faire un tour sur le micro blog, et à m’ajouter à vos contacts sur les sites ou nous sommes inscris !

Article écrit le 21/08/2008 par Wanders51, Un seul commentaire 131 vues




Laisser un commentaire !

N'hésiter pas à commenter ce billet, vos réactions et commentaires sont autant important que le billet lui même !!!

XHTML: Vous pouvez utiliser ces tags ! <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>