Blog de Jordi Mir :Votre Fan page FaceBook en iframe

Votre Fan page FaceBook en iframe

Fév

Dans l’article précédent nous avons vu comment faire une fan page en FBML. Mais FaceBook a changé d’avis sur le FBML et ce langage développé par FaceBook va certainement disparaitre.
Si vous avez une page en FBML cette page va continuer à fonctionner. Mais à partir du 11 Mars vous ne pourrez plus utiliser l’application Static FBML.
FaceBook propose donc maintenant les iframes.

Comment faire une Fan Page en iframe :

1- Tout d’abord nous allons créer une application FaceBook. Pas de panique c’est trés simple.

Il suffit d’aller sur la page : http://www.facebook.com/developers/createapp.php

Donner un nom à votre application par exemple totopage , cliquer sur « agree » (acceptation FaceBook) et créer

Donner les informations dans FaceBook Integration

Canvas Page : j’ai mis jordimirpage

Canvas URL : mon adresse du blog http://jordimir.com/ (avec / à la fin)

Tab Name: j’ai donné comme nom de mon onglet Hello Friends

Cliquer sur Iframe

Tab URL : mettre l’adresse de votre page HTML ou php qui donnera le code pour moi : jordimirpage.php

Save. Et puis c’est tout!

Vous avez ainsi une application en iframe que vous pourrez ajouter à toutes vos pages.

Aller sur la page de l’application qui est de la forme http://www.facebook.com/apps/application.php?id=votre-id-application et cliquer « Add to my Page » et choisisser

Le code de la page Iframe:

Oui me direz-vous c’est bien de savoir faire une application en iframe mais que mettre dans ma page application. Et bien voici comment j’ai fait.

Si vous êtes un fidèle lecteur et donc que vous avez lu l’article précédent, vous savez que je suis partisan d’une landing page avec des onglets!
Pour cela c’est simple un petit code javascript en JQuery pour la navigation:

Sur l’onglet 1 (tab 1) un texte de bienvenue
Sur l’onglet 2 (tab2) Un lecteur RSS de ce Blog
Sur l’onglet 3 (tab3) Le mirphone Si vous reprenez cet iframe merci de mettre un lien sur votre blog vers http://mirpod.com
Su l’onglet 4 (tab4) Une page contact. Vous pouvez utiliser JotForm pour avoir le code par exemple

Ma page FaceBook

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<style>
.awesome, .awesome:visited {
	background: #222 url(http://jordimir.com/wp-content/themes/jordimir/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	.awesome:hover							{ background-color: #111; color: #fff; }
	.awesome:active							{ top: 1px; }
	.small.awesome, .small.awesome:visited 			{ font-size: 11px; padding: ; }
	.awesome, .awesome:visited,
	.medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }
	
	.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
	.green.awesome:hover						{ background-color: #749a02; }
	.blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
	.blue.awesome:hover							{ background-color: #007d9a; }
	.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
	.red.awesome:hover							{ background-color: #872300; }
	.magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
	.magenta.awesome:hover							{ background-color: #630030; }
	.orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
	.orange.awesome:hover							{ background-color: #d45500; }
	.yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
	.yellow.awesome:hover							{ background-color: #fc9200; }
</style>
<script type="text/javascript">
    $(document).ready(function(){



$('a#tab1').click(function(){
$('#nav1').show('slow');
$('#nav2').hide('slow');
$('#nav3').hide('slow');
$('#nav4').hide('slow');
});

$('a#tab2').click(function(){
$('#nav2').show('slow');
$('#nav1').hide('slow');
$('#nav3').hide('slow');
$('#nav4').hide('slow');
});
$('a#tab3').click(function(){
$('#nav3').show('slow');
$('#nav2').hide('slow');
$('#nav1').hide('slow');
$('#nav4').hide('slow');
});
$('a#tab4').click(function(){
$('#nav4').show('slow');
$('#nav2').hide('slow');
$('#nav1').hide('slow');
$('#nav3').hide('slow');
});

});
  </script>
  <script type="text/javascript">
function popUp_mirphone(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, 'Player iPhone', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=450,height=750');");
}
</script>

<img src="http://jordimir.com/wp-content/themes/jordimir/images/fond-jordimir.jpg" /><br />
<a class="large blue awesome" href="#" id="tab1">Home</a>
<a class="large blue awesome" href="#" id="tab2">Blog</a>
<a class="large blue awesome" href="#" id="tab3">mirPhone</a>
<a class="large blue awesome" href="#" id="tab4">Contact</a>

<!-- Content to display when user clicks on the Home tab -->
<div id="nav1"><p><h2>Bienvenue sur la page FaceBook du Blog de Jordi Mir</h2></p><br /><p>Nouvelles technologies et Web2.0</p>
<a href="http://jordimir.com">Le Blog de Jordi Mir</a>
<br />
<ul>
<li>Blog : les actualités du Web2</li>
<li>mirPhone: Podcasts, radios, videos, webtv</li>
<li>Contact: pour me contacter</li>
</ul>
</div>
<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
<!-- Start iframe CODE -->
<iframe width="520" height="500" frameborder="0" src="http://mirpod.com/spip.php?page=iphone_site_fb&id_syndic=4575"></iframe>
<!-- End iframe CODE -->

</div>
<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
<iframe width="520" height="750" frameborder="0" src="http://mirpod.com/mirphone"></iframe>
</div>
<!-- Content to display when user clicks on the About tab -->
<div id="nav4" style="display: none;">
Contact
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<html>

<head>

</head>

<body>

<style>

.awesome, .awesome:visited {

background: #222 url(http://jordimir.com/wp-content/themes/jordimir/images/alert-overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

position: relative;

cursor: pointer;

}

.awesome:hover { background-color: #111; color: #fff; }

.awesome:active { top: 1px; }

.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }

.awesome, .awesome:visited,

.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }

.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited { background-color: #91bd09; }

.green.awesome:hover { background-color: #749a02; }

.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }

.blue.awesome:hover { background-color: #007d9a; }

.red.awesome, .red.awesome:visited { background-color: #e33100; }

.red.awesome:hover { background-color: #872300; }

.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }

.magenta.awesome:hover { background-color: #630030; }

.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }

.orange.awesome:hover { background-color: #d45500; }

.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }

.yellow.awesome:hover { background-color: #fc9200; }

</style>

$(document).ready(function(){

$('a#tab1').click(function(){

$('#nav1').show('slow');

$('#nav2').hide('slow');

$('#nav3').hide('slow');

$('#nav4').hide('slow');

});

$('a#tab2').click(function(){

$('#nav2').show('slow');

$('#nav1').hide('slow');

$('#nav3').hide('slow');

$('#nav4').hide('slow');

});

$('a#tab3').click(function(){

$('#nav3').show('slow');

$('#nav2').hide('slow');

$('#nav1').hide('slow');

$('#nav4').hide('slow');

});

$('a#tab4').click(function(){

$('#nav4').show('slow');

$('#nav2').hide('slow');

$('#nav1').hide('slow');

$('#nav3').hide('slow');

});

</script>

function popUp_mirphone(URL) {

day = new Date();

id = day.getTime();

eval("page" + id + " = window.open(URL, 'Player iPhone', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=450,height=750');");

}

</script>

<a class="large blue awesome" href="#" id="tab3">mirPhone</a>

<a class="large blue awesome" href="#" id="tab4">Contact</a>

<div id="nav1"><p><h2>Bienvenue sur la page FaceBook du Blog de Jordi Mir</h2></p><br /><p>Nouvelles technologies et Web2.0</p>

<a href="http://jordimir.com">Le Blog de Jordi Mir</a>

<br />

<ul>

<li>Blog : les actualités du Web2</li>

<li>mirPhone: Podcasts, radios, videos, webtv</li>

<li>Contact: pour me contacter</li>

</ul>

</div>

</div>

</div>

Contact

</div>

</body>

</html>

Tags: Facebook Inc, Jordi Mir

Si vous avez apprécié cet article, s’il vous plait, prenez le temps de laisser un commentaire
ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.

2 Réponses pour “Votre Fan page FaceBook en iframe”

koji dit :

28 février 2011 à 17:58

J’ai trouvé une solution pour ajouter une iframe sans être développeur Facebook!!!!
C’est super puissant!
http://www.facebook.com/iframe.apps
pascal dit :

20 mai 2011 à 12:03

Bonjour… j’ai bien le fraime qui s’affiche… mais y a t’il moyen de recevoir en paremetre ou vie du javascript de savoir si le visiteur a deja cliquer su j’aime

Blog de Jordi Mir :

Plus qu'un Blog

Votre Fan page FaceBook en iframe

2 Réponses pour “Votre Fan page FaceBook en iframe”

Laisser un Message

Recent Comments

Categories

Archives

LinksBlogoliste

Meta

Follow me on google+