{"id":2181,"date":"2012-04-18T22:33:32","date_gmt":"2012-04-18T21:33:32","guid":{"rendered":"http:\/\/flaven.fr\/?p=2181"},"modified":"2026-09-16T10:10:54","modified_gmt":"2026-09-16T08:10:54","slug":"facebook-open-graph-protocol-partage-reseau-social-les-bonnes-pratiques-pour-la-partage-social-sur-facebook","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/04\/facebook-open-graph-protocol-partage-reseau-social-les-bonnes-pratiques-pour-la-partage-social-sur-facebook\/","title":{"rendered":"Facebook, Open Graph protocol, Partage, R\u00e9seau social &#8211; Les bonnes pratiques pour le partage social sur Facebook"},"content":{"rendered":"<p><!--  Facebook, Open Graph protocol, Partage, R\u00e9seau social - Les bonnes pratiques pour le partage social sur Facebook  --><br \/>\n<!--  Facebook, meta, Open Graph protocol, plugin, HTML, Flash, HTML5, WordPress, Widget, Th\u00e8me, PHP, MySQL  --><br \/>\nUn site pour qu&#8217;il soit vu doit \u00eatre imp\u00e9rativement partag\u00e9 sur Facebook, on doit donc se plier \u00e0 certaines conditions pour passer au mieux sous les fourches caudines de Facebook car la marge de man\u0153uvre avec Facebook est \u00e9troite.<!--more--> Il serait ballot de se priver des 750 millions d&#8217;utilisateurs actifs de Facebook si vous souhaitez que les internautes visitant votre site puissent le partager comme bon leur semble et que l&#8217;affichage sur leur &#8220;wall&#8221; se fasse dans les meilleures conditions de pr\u00e9sentation pour votre site, en gros sous votre meilleur profil en quelque sorte.<\/p>\n<p>Les bonnes pratiques sur le partage Facebook s&#8217;appuie sur le protocole Open Graph. ce protocole permet de transformer toute page du web en objet riche int\u00e9gr\u00e9 dans le graph social. Au sein de l&#8217;eco-syst\u00e8me Facebook, il permet \u00e0 n&#8217;importe quelle page web d&#8217;avoir les m\u00eames fonctionnalit\u00e9s qu&#8217;une Page Officielle sur Facebook.com, sympa ? Non.<\/p>\n<p><H4>Voil\u00e0 \u00e0 quoi doit ressembler vos metas<\/H4><br \/>\nDans le cas pr\u00e9sent, le vice a m\u00eame \u00e9tait pouss\u00e9 jusqu&#8217;\u00e0 ajouter un player video afin que la vid\u00e9o se joue sur le &#8220;wall&#8221; lors du partage Facebook. Le syst\u00e8me est int\u00e9gralement g\u00e9r\u00e9 sous WordPress \u00e0 s&#8217;appuyant au maximum sur les capacit\u00e9s du CMS \u00e0 diss\u00e9miner les bonnes informations dans les la bonnes balises.<\/p>\n<p><b>Extrait du &#8220;header&#8221; du site www.treetslook.com<\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n\t&lt;!-- FACEBOOK SHARE METAS --&gt;\r\n\t       &lt;meta property=\"og:site_name\" content=\"http:\/\/www.treetslook.com\"\/&gt;\r\n\t       &lt;meta property=\"og:title\" content=\"Street style 059 Toni\" \/&gt;\r\n\t       &lt;meta property=\"og:url\" content=\"http:\/\/www.treetslook.com\/style\/looks\/street-style-059-toni\/\"\/&gt;\r\n\t       &lt;meta property=\"og:description\" content=\"Watch this look\" \/&gt;\r\n\t       &lt;meta property=\"og:image\" content=\"http:\/\/www.treetslook.com\/wp-content\/uploads\/2011\/07\/TL_Toni1.png\" \/&gt;\r\n\t       &lt;meta property=\"og:video\" content=\"http:\/\/www.treetslook.com\/wp-content\/plugins\/he3treetslook\/swf\/components\/facebook-player.swf?v=3460\" \/&gt;\r\n\t       &lt;meta property=\"og:video:width\" content=\"398\" \/&gt;\r\n\t       &lt;meta property=\"og:video:height\" content=\"243\" \/&gt;\r\n\t       &lt;meta property=\"og:video:type\" content=\"application\/x-shockwave-flash\" \/&gt;\r\n\t&lt;!-- FACEBOOK SHARE METAS (END)--&gt;\r\n<\/pre>\n<p><b>Connaitre son USER ID sur Facebook. L&#8217;exemple de 3wdoc.com<\/b><\/p>\n<pre lang=\"javascript\">\r\n\t\r\n\t{\r\n\t   \"id\": \"166802396694841\",\r\n\t   \"name\": \"3wdoc\",\r\n\t   \"picture\": \"http:\/\/profile.ak.fbcdn.net\/hprofile-ak-ash2\/174597_166802396694841_6643612_s.jpg\",\r\n\t   \"link\": \"http:\/\/www.facebook.com\/3wdoc\",\r\n\t   \"likes\": 358,\r\n\t   \"category\": \"Website\",\r\n\t   \"is_published\": true,\r\n\t   \"website\": \"http:\/\/3wdoc.com\/fr\/nhttp:\/\/3wdoc.com\/en\/nhttp:\/\/3wdoc.com\/es\/\",\r\n\t   \"username\": \"3wdoc\",\r\n\t   \"company_overview\": \"3WDOC is a webapplication specificaly designed by HECUBE to create and deliver interactive rich media content optimized in HTML5 to run across the web.\",\r\n\t   \"mission\": \"enable easy digital storytelling\",\r\n\t   \"products\": \"3WDOC Studio\",\r\n\t   \"about\": \"Easy web way to create digital &amp; interactive stories\",\r\n\t   \"location\": {\r\n\t      \"street\": \"23, villa Riberolle\",\r\n\t      \"city\": \"Paris\",\r\n\t      \"country\": \"France\",\r\n\t      \"zip\": \"75020\",\r\n\t      \"latitude\": 48.85823,\r\n\t      \"longitude\": 2.39654\r\n\t   },\r\n\t   \"phone\": \"33 (0)1 43 71 80 03\",\r\n\t   \"checkins\": 4,\r\n\t   \"talking_about_count\": 18\r\n\t}\r\n\t\r\n<\/pre>\n<p><i>Source: <a href=\"http:\/\/graph.facebook.com\/3wdoc\" target=\"_blank\">http:\/\/graph.facebook.com\/3wdoc<\/a><\/i><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>The Open Graph protocol (Anglais)<br \/>\n\t\t<a href=\"http:\/\/ogp.me\/\" target=\"_blank\">http:\/\/ogp.me\/<\/a><\/li>\n<li>Le Protocole Open Graph (Fran\u00e7ais)<br \/>\n\t\t\t<a href=\"http:\/\/www.opengraph.be\/\" target=\"_blank\">http:\/\/www.opengraph.be\/<\/a><\/li>\n<li>Utilisation des balises Open Graph Facebook dans un canvas HTML5 valide<br \/>\n\t\t\t<a href=\"http:\/\/devset.be\/223-utilisation-balises-open-graph-facebook-html5-validation\/\" target=\"_blank\">http:\/\/devset.be\/223-utilisation-balises-open-graph-facebook-html5-validation\/<\/a><\/li>\n<li>Open Graph<br \/>\n\t\t\t\t<a href=\"http:\/\/developers.facebook.com\/docs\/opengraph\/\" target=\"_blank\">http:\/\/developers.facebook.com\/docs\/opengraph\/<\/a><\/li>\n<li>Facebook Open Graph Meta in WordPress<br \/>\n\t\t\t\t\t<a href=\"http:\/\/wordpress.org\/extend\/plugins\/facebook-open-graph-meta-in-wordpress\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/facebook-open-graph-meta-in-wordpress\/<\/a><\/li>\n<li>How to Add Facebook Open Graph Meta Data in WordPress Themes<br \/>\n\t\t\t\t\t\t<a href=\"http:\/\/www.wpbeginner.com\/wp-themes\/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes\/\" target=\"_blank\">http:\/\/www.wpbeginner.com\/wp-themes\/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un site pour qu&#8217;il soit vu doit \u00eatre imp\u00e9rativement partag\u00e9 sur Facebook, on doit donc se plier \u00e0 certaines conditions pour passer au mieux sous&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/04\/facebook-open-graph-protocol-partage-reseau-social-les-bonnes-pratiques-pour-la-partage-social-sur-facebook\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Facebook, Open Graph protocol, Partage, R\u00e9seau social &#8211; Les bonnes pratiques pour le partage social sur Facebook<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Le partage social sur Facebook optimise la visibilit\u00e9 de votre site. Ma\u00eetrisez le protocole Open Graph pour des r\u00e9sultats optimaux.","bf_ai_og_title":"Partage social sur Facebook","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3454,3444,3445,3446,3447,3449,3451,3435,3452],"tags":[3510,53,256,303,2185,444,2211,445,20,106,126,189,2223],"class_list":["post-2181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-journalism-writing","category-programming-databases","category-seo-web-marketing","category-social-media-community","category-technology-trends","category-tutorials-how-to","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-canva","tag-facebook","tag-flash","tag-html","tag-html5","tag-meta","tag-mysql","tag-open-graph-protocol","tag-php","tag-plugin","tag-theme","tag-widget","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-zb","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/04\/facebook_share_values_b_n_g_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=2181"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2181\/revisions"}],"predecessor-version":[{"id":9398,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2181\/revisions\/9398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9397"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=2181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=2181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=2181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}