<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>leonard-rodriguez.com</title>
	<atom:link href="http://www.leonard-rodriguez.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.leonard-rodriguez.com</link>
	<description>Le site de Léonard Rodriguez</description>
	<lastBuildDate>Fri, 17 Feb 2012 00:56:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Site Multilingue: domaines, répertoires ou sous-domaines?</title>
		<link>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/referencement-multilingue-1157</link>
		<comments>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/referencement-multilingue-1157#comments</comments>
		<pubDate>Mon, 23 Jan 2012 23:51:00 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Référencement naturel - SEO]]></category>
		<category><![CDATA[Search marketing - SEM]]></category>
		<category><![CDATA[domaines]]></category>
		<category><![CDATA[facteurs SEO]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Link popularity]]></category>
		<category><![CDATA[référencement naturel]]></category>
		<category><![CDATA[répertoires]]></category>
		<category><![CDATA[Search egine marketing]]></category>
		<category><![CDATA[Search engine optimization]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[site multilingue]]></category>
		<category><![CDATA[sous-domaines]]></category>
		<category><![CDATA[URL]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=1157</guid>
		<description><![CDATA[Il est possible d&#8217;organiser son site multilingue de plusieurs façons mais cela dépendra de son budget, de son historique, de sa réputation en ligne, et de ses ressources Web. Voyons ce qu&#8217;il est possible de faire dans le détail&#8230;]]></description>
			<content:encoded><![CDATA[<p>Il est possible d&#8217;organiser son site multilingue de plusieurs façons mais cela dépendra de son budget, de son historique, de sa réputation en ligne, et de ses ressources Web. Voyons ce qu&#8217;il est possible de faire dans le détail&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/referencement-multilingue-1157/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tutoriel iMacros et Exemples de macros</title>
		<link>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/tutoriel-imacros-1126</link>
		<comments>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/tutoriel-imacros-1126#comments</comments>
		<pubDate>Thu, 15 Dec 2011 09:02:19 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Référencement naturel - SEO]]></category>
		<category><![CDATA[Search marketing - SEM]]></category>
		<category><![CDATA[BH]]></category>
		<category><![CDATA[black hat]]></category>
		<category><![CDATA[imacros]]></category>
		<category><![CDATA[macros]]></category>
		<category><![CDATA[référencement naturel]]></category>
		<category><![CDATA[Search egine marketing]]></category>
		<category><![CDATA[Search engine optimization]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[SM]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Wordpress post]]></category>
		<category><![CDATA[WP]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=1126</guid>
		<description><![CDATA[Je n&#8217;écris pas cet article pour te copier-coller toutes les macros que j&#8217;ai mis des jours/semaines à créer mais plutot pour te sensibiliser sur les potentialités d&#8217;iMacros&#8230;]]></description>
			<content:encoded><![CDATA[<p>Je n&#8217;écris pas cet article pour te copier-coller toutes les macros que j&#8217;ai mis des jours/semaines à créer mais plutot pour te sensibiliser sur les potentialités d&#8217;iMacros&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/tutoriel-imacros-1126/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Content Spinning: comment faire et quels logiciels utiliser?</title>
		<link>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/content-spinning-generer-des-variantes-dun-texte-et-quels-logiciels-utiliser-1082</link>
		<comments>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/content-spinning-generer-des-variantes-dun-texte-et-quels-logiciels-utiliser-1082#comments</comments>
		<pubDate>Thu, 01 Dec 2011 18:32:08 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Référencement naturel - SEO]]></category>
		<category><![CDATA[Search marketing - SEM]]></category>
		<category><![CDATA[bh seo]]></category>
		<category><![CDATA[black hat]]></category>
		<category><![CDATA[content spinner]]></category>
		<category><![CDATA[content spinning]]></category>
		<category><![CDATA[facteurs SEO]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[référencement naturel]]></category>
		<category><![CDATA[Search egine marketing]]></category>
		<category><![CDATA[Search engine optimization]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[spinning]]></category>
		<category><![CDATA[synonymizer]]></category>
		<category><![CDATA[thebestspinner]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=1082</guid>
		<description><![CDATA[Le content spinning en SEO est une technique qui consiste à créer du contenu mécaniquement en substituant des mots grace aux expressions simples du languages PHP.]]></description>
			<content:encoded><![CDATA[<p>Le content spinning en SEO est une technique qui consiste à créer du contenu mécaniquement en substituant des mots grace aux expressions simples du languages PHP.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/content-spinning-generer-des-variantes-dun-texte-et-quels-logiciels-utiliser-1082/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Comment ajouter le bouton Like de Facebook sur WordPress?</title>
		<link>http://www.leonard-rodriguez.com/blog/social-media/comment-ajouter-le-bouton-like-de-facebook-sur-wordpress-1013</link>
		<comments>http://www.leonard-rodriguez.com/blog/social-media/comment-ajouter-le-bouton-like-de-facebook-sur-wordpress-1013#comments</comments>
		<pubDate>Tue, 01 Nov 2011 19:03:43 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=1013</guid>
		<description><![CDATA[Que vous ayez une page Facebook ou non, le bouton &#171;&#160;like&#160;&#187; de Facebook peut être un vrai générateur de trafic si vous l&#8217;utilisez bien.]]></description>
			<content:encoded><![CDATA[<p>Que vous ayez une page Facebook ou non, le bouton &laquo;&nbsp;like&nbsp;&raquo; de Facebook peut être un vrai générateur de trafic si vous l&#8217;utilisez bien. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/social-media/comment-ajouter-le-bouton-like-de-facebook-sur-wordpress-1013/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Comment intégrer Facebook Open Graph dans WordPress?</title>
		<link>http://www.leonard-rodriguez.com/blog/social-media/comment-integrer-le-protocole-facebook-open-graph-dans-votre-theme-wordpress-1022</link>
		<comments>http://www.leonard-rodriguez.com/blog/social-media/comment-integrer-le-protocole-facebook-open-graph-dans-votre-theme-wordpress-1022#comments</comments>
		<pubDate>Mon, 31 Oct 2011 18:21:01 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Bouton J'aime]]></category>
		<category><![CDATA[Facebook Open Graph]]></category>
		<category><![CDATA[Like]]></category>
		<category><![CDATA[SMO]]></category>
		<category><![CDATA[Tags]]></category>
		<category><![CDATA[URL]]></category>
		<category><![CDATA[Wordpress post]]></category>
		<category><![CDATA[WP]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=1022</guid>
		<description><![CDATA[L’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description.]]></description>
			<content:encoded><![CDATA[<p>L’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/social-media/comment-integrer-le-protocole-facebook-open-graph-dans-votre-theme-wordpress-1022/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>The Passion Project: l&#8217;initiative Facebook de Novoceram</title>
		<link>http://www.leonard-rodriguez.com/blog/social-media/jeu-facebook-de-novoceram-865</link>
		<comments>http://www.leonard-rodriguez.com/blog/social-media/jeu-facebook-de-novoceram-865#comments</comments>
		<pubDate>Fri, 23 Sep 2011 20:36:00 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[landing page facebook]]></category>
		<category><![CDATA[landing tab]]></category>
		<category><![CDATA[onglets Facebook]]></category>
		<category><![CDATA[page fan]]></category>
		<category><![CDATA[SM]]></category>
		<category><![CDATA[SMM]]></category>
		<category><![CDATA[SMO]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/?p=865</guid>
		<description><![CDATA[Cette année chez Novoceram les mots d’ordre étaient: internet, facebook et agents secrets&#8230; Novoceram a décidé de débarquer sur les réseaux sociaux!]]></description>
			<content:encoded><![CDATA[<p>Cette année chez Novoceram  les mots d’ordre étaient: internet, facebook et agents secrets&#8230; Novoceram a décidé de débarquer sur les réseaux sociaux!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/social-media/jeu-facebook-de-novoceram-865/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Comment cacher/afficher du contenu réservé à vos fans Facebook?</title>
		<link>http://www.leonard-rodriguez.com/blog/social-media/contenu-reserve-fans-page-facebook-668</link>
		<comments>http://www.leonard-rodriguez.com/blog/social-media/contenu-reserve-fans-page-facebook-668#comments</comments>
		<pubDate>Fri, 17 Jun 2011 01:22:03 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[landing page facebook]]></category>
		<category><![CDATA[landing tab]]></category>
		<category><![CDATA[onglets Facebook]]></category>
		<category><![CDATA[SMM]]></category>
		<category><![CDATA[SMO]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/web-marketing/?p=668</guid>
		<description><![CDATA[<strong>Le concept:</strong> Devenir Fan d'une Page pour accéder à du contenu exclusif".
<strong>Le but:</strong> Convaincre l’utilisateur de Cliquer sur J'aime pour obtenir plus de Fans…]]></description>
			<content:encoded><![CDATA[<p>Comme promis à la fin de mon article qui vous expliquait &laquo;&nbsp;<a href="http://www.leonard-rodriguez.com/social-media/creer-tab-page-fan-facebook-487" target="_blank"><strong>comment créer un nouvel onglet Facebook sur votre Page Fan</strong></a>&nbsp;&raquo; que je vous invite à lire si vous l&#8217;avez raté <img src='http://www.leonard-rodriguez.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> . Je vais passer à l&#8217;étape suivante et vous indiquerai <strong>comment cacher et afficher du contenu spécial,</strong> ou encore,<strong> comment créer des pages réservées seulement aux fans</strong>&#8230;</p>
<div align="center">
<img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/06/jaime.jpg" alt="Comment réserver du contenu à vos fans sur vos onglets Facebook?" title="Comment réserver du contenu à vos fans sur vos onglets Facebook?" width="531" style="border:0;" height="134" class="aligncenter size-full wp-image-671" /></div>
<p>Voici les points que nous développerons ici:<br />
<a href="#facebook1">1) Pourquoi cacher du contenu aux &laquo;&nbsp;non fans&nbsp;&raquo; et pourquoi créer des pages réservées aux fans?</a><br />
<a href="#facebook2">2) Qu&#8217;est-ce que sont les fonctions <code>signed_request</code> et <code>$data</code> ?</a><br />
<a href="#facebook3">3) Créer la condition de visibilité pour cacher le contenu aux non fans et l&#8217;afficher aux fans.</a></p>
<h2><a name="facebook2"></a>1) Pourquoi créer des pages avec du contenu réservé aux fans?</h2>
<p>
Le concept est simple: &quot;tu deviens Fan de ma page et tu auras accès à du contenu en avant première, du contenu exclusif, des offres spéciales ou encore des codes de réduction&quot;&#8230; Quelque soit l&#8217;argument, le but ici est de<strong> convaincre l&#8217;utilisateur de cliquer sur <img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/06/j-aime1.jpg" alt="j&#039;aime" title="j-aime" width="55" height="20" class="aligncenter size-full wp-image-683" style="border:0;" /> pour obtenir plus de fans</strong>&#8230;<br />
<br />
<h2><a name="facebook2"></a>2) Qu&#8217;est-ce que sont les fonctions <code>signed_request</code> et <code>$data</code> ??</h2>
<p>
Nous avons vu précédemment <a href="http://www.leonard-rodriguez.com/social-media/creer-tab-page-fan-facebook-487" target="_blank"> comment inclure une page HTML ou PHP dans un nouvel onglet IFRAME de votre Page Fan</a>. Lorsque Facebook charge votre page, il communique des données codées via POST une variable appelée <strong><code>signed_request</code></strong>. Elle est utilis&eacute;e pour partager des informations entre Facebook et des applications (comme les onglets de votre Page Fan par exemple).</p>
<p>Essayons de comprendre et de décoder cette variable afin d&#8217;obtenir <strong>un objet JSON avec toutes les données dont nous avons besoin. </strong><i>(Pour ceux qui ne savent pas, le JSON ou &laquo;&nbsp;JavaScript Object Notation&nbsp;&raquo; est un format de données qui permet l&#8217;échange entre le navigateur et le serveur. Le rendu est semblable &agrave; un tableau associatif en JavaScript.</i>)</p>
<p>Voici la fonction que <a href="http://developers.facebook.com/docs/authentication/signed_request/" target="_blank">Facebook nous met à disposition</a> pour décoder les données:</p>
<div class="pre11">
<div style="font-family: monospace;"><span style="color: #006600;">function</span> parse_signed_request<span style="color: #000099;">(</span><span style="color: #000000;">$signed_request</span>, <span style="color: #000000;">$secret</span><span style="color: #000099;">)</span> <span style="color: #000099;">{</span><br />
&nbsp; <span style="color: #0000ff;">list</span><span style="color: #000099;">(</span><span style="color: #000000;">$encoded_sig</span>, <span style="color: #000000;">$payload</span><span style="color: #000099;">)</span> = <span style="color: #0000ff;">explode</span><span style="color: #000099;">(</span><span style="color: #cc0000;">&#8216;.&#8217;</span>, <span style="color: #000000;">$signed_request</span>, <span style="color: #ff0000;">2</span><span style="color: #000099;">)</span>; </p>
<p>&nbsp; <span style="color: #ff9900;">// decode the data</span><br />
&nbsp; <span style="color: #000000;">$sig</span> = base64_url_decode<span style="color: #000099;">(</span><span style="color: #000000;">$encoded_sig</span><span style="color: #000099;">)</span>;<br />
&nbsp; <span style="color: #000000;">$data</span> = json_decode<span style="color: #000099;">(</span>base64_url_decode<span style="color: #000099;">(</span><span style="color: #000000;">$payload</span><span style="color: #000099;">)</span>, <span style="color: #006600;">true</span><span style="color: #000099;">)</span>;</p>
<p>&nbsp; <span style="color: #006600;">if</span> <span style="color: #000099;">(</span><span style="color: #0000ff;">strtoupper</span><span style="color: #000099;">(</span><span style="color: #000000;">$data</span><span style="color: #000099;">[</span><span style="color: #cc0000;">'algorithm'</span><span style="color: #000099;">]</span><span style="color: #000099;">)</span> !== <span style="color: #cc0000;">&#8216;HMAC-SHA256&#8242;</span><span style="color: #000099;">)</span> <span style="color: #000099;">{</span><br />
&nbsp; &nbsp; <span style="color: #0000ff;">error_log</span><span style="color: #000099;">(</span><span style="color: #cc0000;">&#8216;Unknown algorithm. Expected HMAC-SHA256&#8242;</span><span style="color: #000099;">)</span>;<br />
&nbsp; &nbsp; <span style="color: #006600;">return</span> <span style="color: #006600;">null</span>;<br />
&nbsp; <span style="color: #000099;">}</span></p>
<p>&nbsp; <span style="color: #ff9900;">// check sig</span><br />
&nbsp; <span style="color: #000000;">$expected_sig</span> = hash_hmac<span style="color: #000099;">(</span><span style="color: #cc0000;">&#8216;sha256&#8242;</span>, <span style="color: #000000;">$payload</span>, <span style="color: #000000;">$secret</span>, <span style="color: #000000;">$raw</span> = <span style="color: #006600;">true</span><span style="color: #000099;">)</span>;<br />
&nbsp; <span style="color: #006600;">if</span> <span style="color: #000099;">(</span><span style="color: #000000;">$sig</span> !== <span style="color: #000000;">$expected_sig</span><span style="color: #000099;">)</span> <span style="color: #000099;">{</span><br />
&nbsp; &nbsp; <span style="color: #0000ff;">error_log</span><span style="color: #000099;">(</span><span style="color: #cc0000;">&#8216;Bad Signed JSON signature!&#8217;</span><span style="color: #000099;">)</span>;<br />
&nbsp; &nbsp; <span style="color: #006600;">return</span> <span style="color: #006600;">null</span>;<br />
&nbsp; <span style="color: #000099;">}</span></p>
<p>&nbsp; <span style="color: #006600;">return</span> <span style="color: #000000;">$data</span>;<br />
<span style="color: #000099;">}</span></p>
<p><span style="color: #006600;">function</span> base64_url_decode<span style="color: #000099;">(</span><span style="color: #000000;">$input</span><span style="color: #000099;">)</span> <span style="color: #000099;">{</span><br />
&nbsp; <span style="color: #006600;">return</span> <span style="color: #0000ff;">base64_decode</span><span style="color: #000099;">(</span><span style="color: #0000ff;">strtr</span><span style="color: #000099;">(</span><span style="color: #000000;">$input</span>, <span style="color: #cc0000;">&#8216;-_&#8217;</span>, <span style="color: #cc0000;">&#8216;+/&#8217;</span><span style="color: #000099;">)</span><span style="color: #000099;">)</span>;<br />
<span style="color: #000099;">}</span></div>
</div>
<p>
Décoder les données devient plus simple:</p>
<div class="pre11">
<div style="font-family: monospace;"><span style="color: #000000;">$data</span> = parse_signed_request<span style="color: #000099;">(</span><span style="color: #000000;">$_REQUEST</span><span style="color: #000099;">[</span><span style="color: #cc0000;">'signed_request'</span><span style="color: #000099;">]</span>, <span style="color: #cc0000;">&#8216;INSEREZ ICI VOTRE APP SECRET&#8217;</span><span style="color: #000099;">)</span>;</div>
</div>
<p>Pour que cela soit clair pour tout le monde, essayons de r&eacute;capituler sous forme de tableau ce que g&eacute;n&egrave;re la fontion <code>$data</code>:</p>
<div class="pre11">array<br />
<span style="color: #000099;">(</span><br />
&nbsp; &nbsp; <span style="color: #000099;">[</span>algorithm<span style="color: #000099;">]</span> =&gt; HMAC-SHA256<br />
&nbsp; &nbsp; <span style="color: #000099;">[</span>issued_at<span style="color: #000099;">]</span> =&gt; <span style="color: #ff0000;">1234567890</span><br />
&nbsp; &nbsp; <span style="color: #000099;">[</span>page<span style="color: #000099;">]</span> =&gt; <span style="color: #0000ff;">Array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">(</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>id<span style="color: #000099;">]</span> =&gt; <span style="color: #ff0000;">12345678910</span> <span style="color: #ff9900;">// l&#8217;ID de la page sur laquelle est install&eacute;e l&#8217;Onglet</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>liked<span style="color: #000099;">]</span> =&gt; <span style="color: #ff0000;">1</span> <span style="color: #ff9900;">// Boolean qui nous indique si l&#8217;utilisateur est fan de la Page</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>admin<span style="color: #000099;">]</span> =&gt; <span style="color: #ff0000;">1</span><span style="color: #ff9900;">// Boolean qui nous indique si l&#8217;utilisateur est administrateur de la Page</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">)</span><br />
&nbsp; &nbsp; <span style="color: #000099;">[</span>user<span style="color: #000099;">]</span> =&gt; <span style="color: #0000ff;">Array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">(</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>country<span style="color: #000099;">]</span> =&gt; fr<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>locale<span style="color: #000099;">]</span> =&gt; fr_FR <span style="color: #ff9900;">// La langue de l&#8217;utilisateur</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span>age<span style="color: #000099;">]</span> =&gt; <span style="color: #0000ff;">Array</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">(</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">[</span><span style="color: #0000ff;">min</span><span style="color: #000099;">]</span> =&gt; <span style="color: #ff0000;">19</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000099;">)</span><br />
<span style="color: #000099;">)</span>
</div>
<p>Comme vous pouvez le voir dans les commentaires en jaune ci-dessus, le fait que l&#8217;utilisateur soit fan n&#8217;est pas la seule information que l&#8217;on r&eacute;cup&egrave;re&#8230; Nous pourrons <strong>cr&eacute;er des conditions de visibilit&eacute; </strong>selon:</p>
<ul>
<li><strong>l&#8217;Onglet</strong> sur lequel se trouve la personne</li>
<li>le <strong>statut </strong>de l&#8217;utilisateur (administrateur ou simple visiteur,</li>
<li>la <strong>langue </strong>utilis&eacute;e sur Facebook</li>
</ul>
<p>
<h2><a name="facebook3"></a>3) Cr&eacute;er la condition de visibilit&eacute; pour afficher un contenu aux non fans et un autre aux fans.</h2>
<p>
Dans cet exemple, nous allons cr&eacute;&eacute; un onglet &laquo;&nbsp;Menu du Jour&nbsp;&raquo; sur la page Fan du<a href="http://www.ableiges-golf.com/le-restaurant-golf-ableiges/" target="_blank"> restaurant d&#8217;un golf de la région parisienne</a> que je vous recommande si vous aimez manger, vous détendre et jouer au golf <img src='http://www.leonard-rodriguez.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' />  Bref, sur cet onglet, les fans et seulement les fans pourront voir ce qu&#8217;il y a dans le menu du jour.</p>
<p>Les personnes qui attériront sur l&#8217;onglet verront l&#8217;image du menu flout&eacute;e alors que les fans visualiseront directement le menu mis à jour quotidiennement que j&#8217;afficherai gr&acirc;ce à un iframe.</p>
<p><strong>Voici comment &eacute;crire votre condition</strong>:</p>
<div class="pre11">
<div style="font-family: monospace;" class="php"><span style="color: #006600;">if</span><span style="color: #000099;">(</span>!<span style="color: #000000;">$data</span><span style="color: #000099;">[</span><span style="color: #cc0000;">'page'</span><span style="color: #000099;">]</span><span style="color: #000099;">[</span><span style="color: #cc0000;">'liked'</span><span style="color: #000099;">]</span><span style="color: #000099;">)</span><span style="color: #000099;">{</span><br />
&nbsp; &nbsp; <span style="color: #ff9900;">// contenu pour les NON FAN</span><br />
<span style="color: #000099;">}</span><span style="color: #006600;">else</span><span style="color: #000099;">{</span><br />
&nbsp; &nbsp; <span style="color: #ff9900;">// contenu pour les FANS</span><br />
<span style="color: #000099;">}</span></div>
</div>
<p>
Passons à la pratique:<br />
Vous pouvez voir<strong> <a href="http://www.facebook.com/pages/Golf-Club-dAbleiges/239600417453?sk=app_182264698466552" target="_blank">l&#8217;onglet de l&#8217;exemple ici</a></strong> et voici <strong>le code de ma page en php</strong>:<br />
<!--code de la page--></p>
<div class="pre11">
<p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
  &lt;head&gt;<br />
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
  &lt;title&gt;Menu du Jour Fan Page&lt;/title&gt;<br />
  &lt;meta name=&quot;ROBOTS&quot; content=&quot;NOINDEX,NOFOLLOW&quot;&gt;<br />
  &lt;/head&gt;</p>
<p>&lt;body&gt;<br />
  &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;<br />
  &lt;script src=&quot;http://connect.facebook.net/fr_FR/all.js&quot;&gt;&lt;/script&gt;<br />
  &lt;script&gt;<br />
  FB.init({<br />
  appId  : &#8216;<span style="color:#F00">VOTRE APP ID&#8217;</span>,<br />
  status : true, // check login status<br />
  cookie : true, // enable cookies to allow the server to access the session<br />
  xfbml  : true  // parse XFBML<br />
  });<br />
  &lt;/script&gt;<br />
  &lt;?php<br />
  function parse_signed_request($signed_request, $secret) {<br />
  list($encoded_sig, $payload) = explode(&#8216;.&#8217;, $signed_request, 2);</p>
<p> // decode the data<br />
  $sig = base64_url_decode($encoded_sig);<br />
  $data = json_decode(base64_url_decode($payload), true);</p>
<p> if (strtoupper($data['algorithm']) !== &#8216;HMAC-SHA256&#8242; ) {<br />
  error_log(&#8216;Unknown algorithm. Expected HMAC-SHA256&#8242; );<br />
  return null;<br />
  }</p>
<p> // check sig<br />
  $expected_sig = hash_hmac(&#8216;sha256&#8242; , $payload, $secret, $raw = true);<br />
  if ($sig !== $expected_sig) {<br />
  error_log(&#8216;Bad Signed JSON signature!&#8217;);<br />
  return null;<br />
  }</p>
<p> return $data;<br />
  }</p>
<p>function base64_url_decode($input) {<br />
  return base64_decode(strtr($input, &#8216;-_&#8217;, &#8216;+/&#8217;));<br />
  }</p>
<p>$data = parse_signed_request($_REQUEST['signed_request'], &#8216;<span style="color:#F00">VOTRE CLEF SECRETE</span>&#8216;);</p>
<p>?&gt;</p>
<p>&lt;?php<br />
  if(!$data['page']['liked']){<br />
  <span style="color:#ff9900">EXEMPLE DE TEXTE // contenu pour les NON FAN</span><br />
  }else{<br />
  <span style="color:#ff9900">EXEMPLE DE TEXTE // contenu pour les FANS</span><br />
  }<br />
  ?&gt;</p>
<p>&lt;/body&gt;<br />
  &lt;/html&gt;</p>
</div>
<p>Voici le résultat obtenu dans ce cas là:</p>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/06/conditions.jpg" alt="" title="conditions" width="650" height="336" class="aligncenter size-full wp-image-851" /></div>
<p>
J&#8217;espère avoir été assez clair pour ce <strong>tutoriel Facebook</strong> plus technique que marketing mais utile si vous utilisez ce canal!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/social-media/contenu-reserve-fans-page-facebook-668/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>Comment créer un email, une newsletter en HTML?</title>
		<link>http://www.leonard-rodriguez.com/blog/emailing/comment-creer-un-email-une-newsletter-en-html-551</link>
		<comments>http://www.leonard-rodriguez.com/blog/emailing/comment-creer-un-email-une-newsletter-en-html-551#comments</comments>
		<pubDate>Thu, 19 May 2011 21:35:11 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[E-mailing]]></category>
		<category><![CDATA[clients de messagerie]]></category>
		<category><![CDATA[email marketing]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[newsletters]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/web-marketing/?p=551</guid>
		<description><![CDATA[Si vous venez de lire un tuto sur l’HTML5 et le CSS3, oubliez et reprenez vos livres d’HTML3 de 97… L’email c’est pas si simple et c'est old school!]]></description>
			<content:encoded><![CDATA[<p>Réaction d&#8217;un web-designer lambda avant de créer son premier email: &laquo;&nbsp;Pwahaha! Laisse moi 5 minutes que j&#8217;te code ça rapidos!&nbsp;&raquo;&#8230; Mais 3 div, 1 float left et 10px de margin plus tard, il commencera à comprendre que&#8230; <b>créer un email n&#8217;est pas si simple!</b></p>
<p>Voici les thèmes que je traiterai:<br />
<a href="#email1">1) Les Styles CSS</a><br />
<a href="#email2">2) Les Paragraphes et les Liens</a><br />
<a href="#email3">3) Les TABLES</a><br />
<a href="#email4">4) Les IMAGES</a><br />
<a href="#email5">5) Tester, tester et tester!</a></p>
<p>Si vous venez de lire un tuto sur l&#8217;HTML5 et le CSS3, oubliez tout et reprenez vos livres d&#8217;HTML3 de 1997&#8230; Comme je le disais il y a exactement un an jour pour jour, <a href="http://www.leonard-rodriguez.com/emailing/optimiser-le-code-html-dun-e-mail-27">l&#8217;email c&#8217;est old school</a>!</p>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/05/oldschool.jpg" alt="L'e-mail c'est Old School!" title="L'e-mail c'est Old School!" width="530" height="143" class="alignnone size-full wp-image-552" /></div>
<p>
Prêts pour la séquence Nostalgie? Proust avait sa madeleine, nous on a nos tables et nos styles inline&#8230; D&#8217;ailleurs créer des e-mails propres et compatibles sur tous les clients de messagerie, c&#8217;est un peu comme préparer un bon petit plat traditionnel, n&#8217;est-ce pas <a href="http://www.mercotte.fr/" target="_blank">Mercotte</a> <img src='http://www.leonard-rodriguez.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> :</p>
<ul>
<li>des ingrédients peu nombreux, simples et authentiques</li>
<li>un peu d&#8217;HTML et de CSS à l&#8217;ancienne</li>
<li>goûter, goûter et goûter avant de servir.</li>
</ul>
<p>Après <a href="http://www.leonard-rodriguez.com/search-marketing/seo-search-marketing/liste-complete-des-facteurs-en-referencement-naturel-seo-384">la recette du SEO</a>, c&#8217;était la recette de l&#8217;email! Mais passons aux choses <del datetime="2011-05-16T20:48:40+00:00">pénibles</del> sérieuses et laissons le tablier et les gourmandises aux experts&#8230;<a name="email1"></a><br />
<h2>1) Les Styles CSS</h2>
<p>Tout d&#8217;abord, je vous conseille de jeter un coup d&#8217;œil au formidable tableau récapitulatif (de Campaign Monitor) des styles supportés par chaque client de messagerie:
<div align="center"><a href="http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf" target="_blank"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/05/cssguide.jpg" alt="campaign monitor css guide" title="campaign monitor css guide" width="530" height="143" class="alignnone size-full wp-image-560" /></a></div>
<p>Certains clients de messagerie ignorent l&#8217;&lt;head&gt; et les feuilles de styles externes (Gmail par exemple) donc:</p>
<ul>
<li>
<strong>Ne pas utiliser de styles dans la partie &lt;head&gt;</strong>, quelques webmails la coupent. Commencer donc à coder après le tag <strong>&lt;body&gt;</strong>.</li>
<li>
Utiliser des <strong>CSS INLINE</strong> (des outils tels que <a href="http://premailer.dialect.ca/">Premailer</a> existent pour vous aider à traduire vos styles externes en styles inline.)
</li>
<li>Ne pas utiliser de CSS &laquo;&nbsp;shorthand&nbsp;&raquo; mais favoriser les styles &laquo;&nbsp;<strong>longhand</strong>&nbsp;&raquo; (voir exemple ci-dessous).</li>
</ul>
<div class="pre"><span class="code"><span style="color:#C00;">A éviter:</span><br />&lt;p style=&quot;font:bold Arial, Helvetica, sans-serif 12px&quot;&gt;blabla&#8230; &lt;/p&gt;<br />
<span style="color:#060;">A privilégier:</span><br />&lt;p style=&quot;font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;&quot;&gt;blabla&#8230; &lt;/p&gt;</span></div>
<p> <a name="email2"></a><br />
<h2>2) Les Paragraphes et les Liens</h2>
<p>Le tag <strong>&lt;p&gt;</strong> est supporté par tous les clients de messagerie donc vous pouvez l&#8217;utiliser mais personnellement je préfère écrire le code le plus neutre possible&#8230; C&#8217;est pourquoi je vous conseille d&#8217;utiliser des <strong>&lt;span&gt;</strong> et non des &lt;p&gt;. Si vous souhaitez une précision optimale, gérez <strong>la hauteur de ligne </strong>dans votre &lt;td&gt;:</p>
<div class="pre"><span class="code">  &lt;td width=&quot;350&quot; style=&quot;font-weight:bold; font-size:12px; line-height:16px; font-family: arial;&quot;&gt;blabla&#8230;&lt;/td&gt;</span></div>
<p>Pour que<strong> vos liens</strong> se visualisent bien <strong>sur tous les clients de messagerie</strong> vous allez devoir écrire une première fois vos styles dans le tag<strong> &lt;a&gt;</strong>, puis une deuxième fois dans un tag <strong>&lt;span&gt;</strong> à l&#8217;interieur du tag &lt;a&gt;::</p>
<div class="pre"><span class="code"> &lt;a href=&quot;http://www.tonsite.fr/&quot; style=&quot;color:#cccccc&quot;&gt;&lt;span style=&quot;color:#cccccc&quot;&gt;blabla stylé <img src='http://www.leonard-rodriguez.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> &lt;/span&gt;&lt;/a&gt;<br />
</span></div>
<p><a name="email3"></a><br />
<h2>3) Les TABLES</h2>
<p>Des clients tels que Gmail, Outlook 00/07, Lotus ne supportent pas les float, les margin, les padding… Je vous déconseille d&#8217;utiliser des &lt;div&gt; mais plut&ocirc;t des &lt;table&gt;&#8230; et surtout de suivre ces conseils utiles:
<ul>
<li>Créer une <strong>&lt;table&gt; </strong>&laquo;&nbsp;conteneur&nbsp;&raquo; de 100% de largeur</li>
<li>Définir la couleur de fond dans le &lt;td&gt; avec &laquo;&nbsp;<strong>bgcolor</strong>&nbsp;&raquo; et non style=&nbsp;&raquo;background-color&nbsp;&raquo;…</li>
<li>Définir la <strong>Largeur dans chaque &lt;td&gt;</strong> (et non dans la &lt;table&gt;)</li>
<li>Ne pas utiliser le padding pour chaque &lt;td&gt; mais <strong>cellpadding </strong>pour chaque &lt;table&gt;</li>
<li>Utiliser <strong>plusieurs &lt;td&gt; </strong>et éviter d&#8217;utiliser padding/margin pour créer des espaces aux extrémités de votre &lt;td&gt;.</li>
<li>Ne pas spécifier l&#8217;unité en PX dans le &lt;td&gt; (width=&nbsp;&raquo;95&#8243;)</li>
<li>Il est préférable d&#8217;<strong>imbriquer vos Tables</strong> jusqu&#8217;à 5 niveaux maximum.</li>
<li><strong>Colspan</strong> est supporté par de nombreux clients de messagerie, mais malheureusement <strong>Rowspan </strong> ne l&#8217;est pas. Si par exemple, vous souhaitez insérer une image de 250px de hauteur et à sa droite une image ou une marge de 50px au dessus d&#8217;un texte de 200px de haut, vous pouvez créer une &lt;table&gt; dans votre second &lt;td&gt; avec 2 &lt;tr&gt; dont une image ou un spacer de 50px dans votre premier &lt;tr&gt;&lt;td&gt;.</li>
</ul>
<p>Exemple de structure:</p>
<div class="pre"><span class="code">&lt;table&gt;&lt;tr&gt;&lt;td&gt;1ère colonne&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;table&gt;&lt;tr&gt;&lt;td&gt;2ème colonne ligne 1/2&lt;/td&gt;&lt;/tr&gt;<br />
&lt;tr&gt;&lt;td&gt;3ème colonne ligne 2/2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;&lt;/table&gt;<br />
</span></div>
<p><a name="email4"></a><br />
<h2>4) Les IMAGES</h2>
<p>Par défaut, les images sont bloquées, il est donc essentiel d&#8217;essayer d&#8217;avoir <strong>une répartition texte/image équilibrée</strong> et essayez toujours de placer le <strong>&laquo;&nbsp;call to action&nbsp;&raquo; en version textuelle</strong> dans les premiers 250/350px de la hauteur.</p>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/05/block.jpg" alt="email image display block" title="email image display block" width="530" height="143" class="aligncenter size-full wp-image-600" /></div>
<ul>
<li>Éviter les images &laquo;&nbsp;spacer&nbsp;&raquo; servant uniquement à créer des espaces. </li>
<li>Insérer les <strong>dimensions exactes </strong>des images.</li>
<li>Ne pas oublier de renseigner l&#8217;attribut <strong>ALT.</strong></li>
<li>Éviter les images<strong> gif/png transparentes</strong>.</li>
<li>Éviter les <strong>background-image</strong>, outlook07 et lotus notes ne les supportent pas&#8230;</li>
<li><strong>Ne pas utiliser les float</strong> mais utiliser l&#8217;alignement&#8230; align=&nbsp;&raquo;right&nbsp;&raquo;&#8230;</li>
<li>Ne pas oublier de préciser <strong>DISPLAY:BLOCK; </strong>pour ne pas avoir des traits de séparation blancs sur gmail et hotmail comme sur l&#8217;image ci-dessus&#8230;</li>
</ul>
<p>Exemple:
<div class="pre"><span class="code">&lt;img src=&quot;image.jpg&quot; align=&quot;top&quot; style=&quot;display:block;&quot; alt=&quot;Image&quot;&gt;<br />
</span></div>
<p><a name="email5"></a><br />
<h2>5) Tester, tester et tester!</h2>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/05/tests.jpg" alt="Tester son email" title="Tester son email" width="530" height="143" class="alignnone size-full wp-image-559" /></div>
<p>Pour être sûre que votre email se visualise correctement sur tous les clients de poste, il n&#8217;y a qu&#8217;une seule solution: <strong>TESTER!</strong></p>
<p>Si vous avez la possibilité de connaître les clients de messagerie utilisés par vos utilisateurs, optimisez votre e-mail sur les clients utilisés, si en revanche vous n&#8217;en avez pas la moindre idée, adaptez vous à votre cible&#8230;<br />Si votre cible est B2C, contrôlez bien vos e-mails <strong>sur les différents webmails</strong> (gmail, hotmail, orange…), si votre cible est B2B, vérifiez <strong>les différents software</strong> (Outlook, Thunderbird, Eudora, Lotus Notes, AOL), et pour finir n&#8217;oubliez pas <strong>les clients mobiles</strong> (Blackberry, Android, iPhone&#8230;).<br />Si vous n&#8217;avez pas d&#8217; &laquo;&nbsp;email tester&nbsp;&raquo; comme <a href="http://litmus.com/" target="_blank">Litmus </a>ou  <a href="http://www.emailonacid.com/" target="_blank">EmailonAcid</a> vous permettant de réaliser ces tests automatiquement, patience et courage!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/emailing/comment-creer-un-email-une-newsletter-en-html-551/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Comment créer un Onglet (ou Tab) sur sa Page Fan Facebook?</title>
		<link>http://www.leonard-rodriguez.com/blog/social-media/creer-tab-page-fan-facebook-487</link>
		<comments>http://www.leonard-rodriguez.com/blog/social-media/creer-tab-page-fan-facebook-487#comments</comments>
		<pubDate>Fri, 15 Apr 2011 21:35:04 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[iframe]]></category>
		<category><![CDATA[landing page facebook]]></category>
		<category><![CDATA[landing tab]]></category>
		<category><![CDATA[onglets Facebook]]></category>
		<category><![CDATA[page fan]]></category>
		<category><![CDATA[tab]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/web-marketing/?p=487</guid>
		<description><![CDATA[Aujourd’hui nous apprendrons à créer un Onglet via IFRAME et l’ajouter à sa Page Fan. Sachant que le language FBML et les « box » sont morts depuis mi mars, il est difficile de trouver de bons tutos utiles en ligne…]]></description>
			<content:encoded><![CDATA[<p>Début Avril j&#8217;ai changé de boulot, je travaille aujourd&#8217;hui chez <a href="http://www.novoceram.fr">Novoceram</a> en tant que « responsable développement web ». Bien évidemment ma première mission est liée à un monde qui ne m&#8217;est pas &laquo;&nbsp;encore&nbsp;&raquo; très familier: <img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/1298926584_facebook.png" alt="facebook" title="facebook" width="16" height="16" class="alignnone size-full wp-image-522" /> <strong>Facebook </strong>(ça serait trop facile et démotivant de bosser sur ce que je connais déjà bien pour montrer ce que je vaux <img src='http://www.leonard-rodriguez.com/wp-includes/images/smilies/icon_rolleyes.gif' alt=':roll:' class='wp-smiley' />  )&#8230; </p>
<p>Sachant que le<strong> language FBML et les « box » sont morts depuis mi mars</strong>, il est difficile de trouver de bons tutos utiles en ligne… C&#8217;est pourquoi j&#8217;aimerais partager avec vous mes débuts sur Facebook au sujet de la création d&#8217;onglets (de Tabs), d&#8217;applications Facebook etc.</p>
<h2><strong>Comment créer un Onglet (ou Tab) via IFRAME et l&#8217;ajouter à sa Page Fan?</strong></h2>
<h3>1) Créer votre page HTML</h3>
<p>Les nouveaux Onglets sont de simples pages HTML (ou n&#8217;importe quel autre langage qui vous génère du code HTML) que vous hébergerez sur vos servers.</p>
<p>Au niveau du layout, je préfère rester dans la simplicité et créer des pages comme des emails, avec des « <strong>tables</strong>» mais n&#8217;hésitez pas à utiliser du <strong>javascript</strong>, des <strong>vidéos</strong>, du <strong>jquery</strong>, des <strong>Google Maps</strong>, du <strong>Flash</strong>, les <strong>boutons &laquo;&nbsp;I Like&nbsp;&raquo; de Facebook</strong> et tout autre <a href="http://developers.facebook.com/docs/plugins/"><strong>Social Plugins</strong></a>… N&#8217;hésitez pas à ajoutez <strong>un code de tracking</strong> (Google Analytics ou autre) à votre page! Allez c&#8217;est parti, ouvrez votre éditeur HTML préféré et au boulot: </p>
<div align="center">
<img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/html.jpg" alt="page html" title="page html" width="560" height="328" class="alignleft size-full wp-image-488" /></div>
<p>
Comme nous le verrons par la suite, nous indiquerons à Facebook l&#8217;URL de la page que nous avons créé et que nous voulons insérer dans un <strong>Onglet </strong>grâce à un simple <strong>IFRAME</strong>.</p>
<h3>2) Créez l&#8217;application</h3>
<p>Nous allons créer une application ad hoc qui nous permettra d&#8217;y insérer l&#8217;Onglet (ou Tab) sur la Page Fan&#8230;</p>
<ul>
<li>Aller sur la page <a href="http://www.facebook.com/developers/">developers de Facebook</a></li>
<li>Cliquez sur &laquo;&nbsp;Set Up New App&nbsp;&raquo; en haut à droite</li>
<li>Insérez le nom de l&#8217;application, acceptez et continuez</li>
<li>Le premier onglet &laquo;&nbsp;Basic information&nbsp;&raquo; est très important car il déterminera le <strong>nom du Tab </strong>et<strong> l&#8217;icone</strong> dans votre menu.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/applinew.jpg" alt="Application name and icon" title="applinew" width="560" height="134" class="alignleft size-full wp-image-497" /></div>
<p></li>
<li>Cliquez sur l&#8217;onglet &laquo;&nbsp;<strong>Website</strong>&nbsp;&raquo; à gauche</li>
<li>Insérez dans &laquo;&nbsp;Site URL&nbsp;&raquo; <strong>l&#8217;adresse du site</strong> sur lequel vous avez chargé la page.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/website.jpg" alt="adresse du site" title="website" width="560" height="110" class="alignleft size-full wp-image-501" /></div>
</li>
<li>Cliquez sur l&#8217;onglet &laquo;&nbsp;<strong>Facebook Integration</strong>&nbsp;&raquo; à gauche.</li>
<li>Insérez la &laquo;&nbsp;<strong>Canvas URL</strong>&laquo;&nbsp;: de nouveau l&#8217;URL principale de votre site.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/Canvas.jpg" alt="url canva" title="Canvas" width="560" height="88" class="alignleft size-full wp-image-502" /></div>
</li>
<li>Toujours sur l&#8217;onglet &laquo;&nbsp;Canvas URL&nbsp;&raquo;, insérez <strong>le nom du Tab</strong> dans &laquo;&nbsp;Tab Name&nbsp;&raquo;. C&#8217;est le nom qui sera visualisé dans le menu de votre Page Fan.</li>
<li>Insérez <strong>l&#8217;URL de la page</strong> que vous avez réalisée et qui sera visualisée sur l&#8217;IFRAME.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/Tabname.jpg" alt="tab name, tab url" title="Tabname" width="560" height="79" class="alignleft size-full wp-image-503" /></div>
</li>
<li><strong>Sauvegardez </strong>vos modifications!</li>
</ul>
<h3>3) Ajoutez l&#8217;onglet à la Page Fan</h3>
<p>Après avoir sauvegardé, vous serez redirigé vers la page récapitulative. Cliquez sur &laquo;&nbsp;<strong>Application Profile Page</strong>&laquo;&nbsp;.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/app-profile-page.jpg" alt="application profile page" title="app-profile-page" width="560" height="213" class="alignleft size-full wp-image-507" /></div>
<p>Sur la page de l&#8217;application, cliquez sur &laquo;&nbsp;<strong>Add to my Page</strong>&nbsp;&raquo; en bas à gauche. Choisissez la Page sur laquelle vous voulez intégrer l&#8217;onglet et cliquez sur &laquo;&nbsp;<strong>Add to Page</strong>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/add-page.jpg" alt="Ajoutez le Tab à la Page Fan" title="add-page" width="560" height="410" class="alignleft size-full wp-image-509" /></div>
<h3>4) Configurer l&#8217;Onglet comme Landing Tab</h3>
<p>Vous souhaitez <strong>faire arriver les &laquo;&nbsp;non fans&nbsp;&raquo; sur votre Onglet personnalisé</strong>? RIen de plus simple:</p>
<ul>
<li>Allez sur la Page Fan.</li>
<li>Cliquez sur &laquo;&nbsp;<strong>Edit Page</strong>&nbsp;&raquo; en haut à droite.</li>
<li>Cliquez sur l&#8217;onglet à gauche &laquo;&nbsp;<strong>Manage permissions</strong>&laquo;&nbsp;, puis sélectionner le &laquo;&nbsp;Landing Tab&nbsp;&raquo; au niveau de la ligne &quot;<strong>Default Landing Tab</strong>&quot;.
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/ordre.jpg" alt="Landing Tab" title="ordre" width="560" height="283" class="alignleft size-full wp-image-510" /></div>
</li>
<li>Puis sauvegardez!</li>
</ul>
<p>Tous les utilisateurs Facebook &laquo;&nbsp;non fans&nbsp;&raquo; atterriront sur votre Tab personnalisé! </p>
<p>Pour visualiser le Tab que nous avons créé ensemble, veuillez vous rendre sur <a href="http://www.facebook.com/FootballSession">la Page Fan de Football-Session.com</a> ou voir le screenshot ci-dessous pour les<del datetime="2011-04-15T18:31:45+00:00"> anti-footeux</del> flemmards:
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2011/04/Landing-Tab-FS.jpg" alt="Landing Tab FOotball Session" title="Landing-Tab-FS" width="560" height="619" class="alignleft size-full wp-image-514" /></div>
<p>Bravo et à bientôt pour de nouveaux tutos!</p>
<p>Ne loupez pas l&#8217;article &laquo;&nbsp;<a href="http://www.leonard-rodriguez.com/social-media/contenu-reserve-fans-page-facebook-668" target="_blank" rel="nofollow"><strong> comment cacher/afficher du contenu spécial et comment créer des pages réservées seulement aux fans!</strong></a>&laquo;&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/social-media/creer-tab-page-fan-facebook-487/feed</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>SEM=SEO+SEA+SMO… Arrêtons les confusions!</title>
		<link>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/definition-sem-seo-sea-smo-search-engine-marketing-421</link>
		<comments>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/definition-sem-seo-sea-smo-search-engine-marketing-421#comments</comments>
		<pubDate>Wed, 01 Dec 2010 22:22:06 +0000</pubDate>
		<dc:creator>Leonard</dc:creator>
				<category><![CDATA[Référencement naturel - SEO]]></category>
		<category><![CDATA[Référencement payant - SEA]]></category>
		<category><![CDATA[Search marketing - SEM]]></category>
		<category><![CDATA[Liens sponsorisés - SEA]]></category>
		<category><![CDATA[SEA]]></category>
		<category><![CDATA[Search]]></category>
		<category><![CDATA[Search egine marketing]]></category>
		<category><![CDATA[Search engine advertising]]></category>
		<category><![CDATA[Search engine optimization]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[SM]]></category>
		<category><![CDATA[SMM]]></category>
		<category><![CDATA[SMO]]></category>

		<guid isPermaLink="false">http://www.leonard-rodriguez.com/web-marketing/?p=421</guid>
		<description><![CDATA[SEM cela veut dire Search Engine Marketing non? Le référencement naturel n’est pas une activité marketing? Et pourquoi on devrait le mettre à part? SEM=SEO+SEA+SMO, tous d'accord?]]></description>
			<content:encoded><![CDATA[<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2010/12/Blackboard_SEM1.jpg" alt="SEO+SEA+SMO+SEM" title="SEO+SEA+SMO+SEM" width="403" height="282" class="aligncenter size-full wp-image-442" /></div>
<p>Je commencerai ce post par <del datetime="2010-12-01T21:51:28+00:00">la goutte qui a fait d&eacute;border le vase&nbsp;</del>l&rsquo;anecdote qui m&rsquo;a poussé à l&rsquo;&eacute;crire : il y a quelques semaines une  coll&egrave;gue (que je salue si elle se reconnait et à qui je ne reproche absolument  rien) m&rsquo;a communiqu&eacute; rapidement via t&eacute;l&eacute;phone qu&rsquo;un de nos gros comptes pour qui nous g&eacute;rons le canal &quot;&nbsp;e-mail marketing&nbsp;&quot;  avait besoin d&rsquo;une <strong>analyse SEM</strong> urgente et qu&rsquo;il avait un budget de plus d&rsquo;une centaine de milliers d&rsquo;euros.<br />
J&rsquo;ai donc r&eacute;alis&eacute; une &eacute;tude compl&egrave;te au niveau <strong>SEO </strong>et <strong>SEA </strong>pour le client avant de l&rsquo;envoyer à ma coll&egrave;gue qui &eacute;tait surprise de voir la pr&eacute;sentation divis&eacute;e en deux parties&nbsp;: 1) SEO 2) SEA… Elle s&rsquo;attendait à voir  l&rsquo;&eacute;tude concentr&eacute;e sur une analyse SEA puisque pour elle et malheureusement  pour beaucoup d&rsquo;autres, SEM = SEA… Aujourd&rsquo;hui encore elle me demande comment  va la campagne SEM alors que l&rsquo;on travaille uniquement sur Adwords pour ce client&nbsp;!</p>
<p>Je me sens donc presque oblig&eacute; d&rsquo;&eacute;crire un article pour  mettre un peu d&rsquo;ordre dans le monde <strong>des acronymes à 3 lettres du search-marketing</strong>&nbsp;! </p>
<p><u>Commen&ccedil;ons par la base et d&eacute;finissons  les diff&eacute;rents acronymes:</u></p>
<ul>
<li><strong>SEO (search engine optimization)</strong>: en fran&ccedil;ais r&eacute;f&eacute;rencement naturel, ref nat, r&eacute;f&eacute;rencement organique ou gratuit est l&rsquo;activit&eacute; li&eacute;e au positionnement de votre site dans les moteurs de recherche.</li>
<li><strong>SEA (search engine advertising ou encore PPC, CPC):</strong> ne pas confondre liens sponsorisés (achat d&#8217;espace et de mots clefs sur les moteurs de recherche comme sur Google Adwords) et r&eacute;f&eacute;rencement payant (services payants pour s&#8217;inscrire dans des annuaires, des moteurs, des comparateurs).<br />
  Le SEA consiste à positionner son site dans les moteurs de recherche en contrepartie d&rsquo;un paiement.</li>
<li><strong>SMO (social media optimization)</strong>: en fran&ccedil;ais optimisation sur les r&eacute;seaux sociaux. Cela consiste à donner plus di visibilit&eacute; à un site à partir des r&eacute;seaux sociaux tels que Facebook, Twitter, Youtube, Dailymotion, Digg&#8230; A ne pas confondre avec <strong>le SMM</strong> qui est le travail relationnel entre l&rsquo;entreprise et sa communaut&eacute; sur les r&eacute;seaux sociaux.</li>
<li><strong>SEM (SM, search engine marketing ou search marketing)</strong>: en fran&ccedil;ais r&eacute;f&eacute;rencement ou &laquo;&nbsp;search&nbsp;&raquo;. Cela d&eacute;signe l&rsquo;ensemble des activit&eacute;s li&eacute;es au r&eacute;f&eacute;rencement de votre site sur les SERPs.<br />Donc pour r&eacute;sumer <strong>SEM=SEO+SEA+SMO</strong>.
</li>
</ul>
<p><u>Pourquoi ce coup de gueule?</u></p>
<p>J&rsquo;ai de plus en plus l&rsquo;impression que beaucoup de  monde utilise l&rsquo;acronyme <strong>SEM</strong> à toutes les sauces pour dire tout et n&rsquo;importe  quoi et que plus le temps passe plus le ph&eacute;nom&egrave;ne se r&eacute;pand&#8230; <br />Combien de fois ai-je entendu dire: &laquo;&nbsp;nous faisons du SEO et du SEM&nbsp;&raquo; ou alors &laquo;&nbsp;nous souhaitons faire une campagne SEM Adwords&nbsp;&raquo;&#8230;</p>
<p>  Je tiens cependant à rassurer ma coll&egrave;gue (<a href="#anecdote">voir anecdote</a>), ce n&#8217;est pas forc&eacute;ment sa faute&#8230; Tapez  par exemple sur votre moteur favori &ldquo;<strong>d&eacute;finition SEM</strong>&rdquo;. Wikipedia tr&egrave;s bien plac&eacute; nous donne une d&eacute;finition ne mentionnant même pas une seule fois le SEO:</p>
<div align="center"><img src="http://www.leonard-rodriguez.com/wp-content/uploads/2010/12/Wikipedia.jpg" alt="Définition SEM Wikipedia" title="Définition SEM Wikipedia" width="549" height="101" class="alignleft size-full wp-image-424" /></div>
<p><u>Mais ai-je raison? Tout ce beau monde me met le doute à force de r&eacute;p&eacute;ter ces &#038;$%#!</u><br />
Soyons rationnels, dans <strong>SEM</strong> il y a <strong>Marketing</strong> non? Je vous demande donc (rétoriquement) si le r&eacute;f&eacute;rencement naturel n&rsquo;est pas une activit&eacute; marketing? Et pourquoi on devrait le mettre à part?</p>
<p><strong>SEM=SEO+SEA+SMO</strong>, nous sommes tous d&#8217;accord maintenant?<br />
Les pointillistes me diront que mon &eacute;quation est incompl&egrave;te et que l&rsquo;on pourrait ajouter à la formule le r&eacute;f&eacute;rencement local, les vid&eacute;os, les images, les produits qui peuvent être affich&eacute;s sur <strong>la SERP</strong>&#8230; J&rsquo;ai envie de dire oui mais&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.leonard-rodriguez.com/blog/search-marketing/seo-search-marketing/definition-sem-seo-sea-smo-search-engine-marketing-421/feed</wfw:commentRss>
		<slash:comments>64</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: www.leonard-rodriguez.com @ 2012-02-26 04:59:44 -->
