{"id":1355,"date":"2020-07-21T11:49:15","date_gmt":"2020-07-21T11:49:15","guid":{"rendered":"https:\/\/elfsight.com\/fr\/?page_id=1355"},"modified":"2020-08-27T15:06:35","modified_gmt":"2020-08-27T15:06:35","slug":"examples","status":"publish","type":"page","link":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/","title":{"rendered":"Social Share Buttons &#8211; Examples"},"content":{"rendered":"\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 1: Boutons en ligne<\/h3><div class=\"application-examples-item-description\">L'affaire montre quatre boutons en forme de rectangle pour partager des informations dans les m\u00e9dias les plus populaires. Ils ont sauv\u00e9 les couleurs authentiques et montrent les noms et les symboles des m\u00e9dias. C'est un bon exemple de personnalisation pour les cas o\u00f9 vous souhaitez que vos boutons soient plac\u00e9s dans une zone de contenu, par exemple un article.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=5671d307-3ca2-43c1-b2bd-a859c1ba5bd8&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 2: Boutons flottants<\/h3><div class=\"application-examples-item-description\">C'est ainsi que vous cr\u00e9ez des boutons pratiques pour tous les utilisateurs - la disposition flottante leur permet de suivre le d\u00e9filement de haut en bas de la page et de toujours rester \u00e0 port\u00e9e de main. Aucune chance que les utilisateurs les rateront de la vue. Le design est minimaliste, de forme carr\u00e9e et uniquement les ic\u00f4nes des m\u00e9dias sur les boutons.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe application-examples-item-iframe-fixed-height\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=da298869-6bdd-43da-b7a8-dcf7da0cd036&padding=0px+40px+0\" width=\"100%\" height=\"300px\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div><div class=\"application-cta-create\">\n                    <div class=\"application-cta-create-bg\">\n                        <div class=\"application-cta-create-bg-left\"><\/div>\n\n                        <div class=\"application-cta-create-bg-right\">\n                            <img decoding=\"async\" src=\"https:\/\/elfsight.com\/fr\/wp-content\/themes\/elfsight\/frontend\/assets\/img\/application-cta-create.jpg\" alt=\"Commencez par cr\u00e9er votre widget\">\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"application-cta-create-content inner\">\n                        <div class=\"application-cta-create-content-inner\">\n                            <div class=\"application-cta-create-content-icon\">\n                                <svg viewBox=\"0 0 25 25\" width=\"100%\" height=\"100%\">\n                                    <use xlink:href=\"#icon-settings\"><\/use>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"application-cta-create-content-title\">Commencez par cr\u00e9er votre widget<\/div>\n\n                            <div class=\"application-cta-create-content-text\">Vite. Facile. Pas de codage.<\/div>\n\n                            <a class=\"application-cta-create-content-button button-48 button-has-right-icon button-black button\" href=\"\">\n                                <span class=\"button-label\">Cr\u00e9er un widget<\/span>\n\n                                <svg class=\"button-icon\">\n                                    <use xlink:href=\"#icon-arrow-link\"><\/use>\n                                <\/svg>\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 3: Boutons noirs<\/h3><div class=\"application-examples-item-description\">En utilisant les options de personnalisation, vous pouvez obtenir un look totalement unique du widget. Ces boutons ont \u00e9t\u00e9 con\u00e7us pour faire \u00e9cho au style g\u00e9n\u00e9ral et aux couleurs du site Web. Ils sont en noir et blanc, g\u00e9om\u00e9triques et minimalistes gr\u00e2ce au fait qu'ils n'ont que les ic\u00f4nes des m\u00e9dias dessus - sans les noms.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=d391e2d5-fdc3-4f2a-af9b-de2c1459344e&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 4: Partager des ic\u00f4nes<\/h3><div class=\"application-examples-item-description\">Ces jolis et petits boutons ont l'air vraiment propres et soign\u00e9s sur la page. Ils sont de forme circulaire et de style mat\u00e9riel, montrant les symboles du support choisi. Un bel effet d'animation de diapositives au survol ajoute une certaine vivacit\u00e9 \u00e0 l'exp\u00e9rience utilisateur. Les boutons sont align\u00e9s au centre, mais vous pouvez \u00e9galement choisir des variantes gauche et droite.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=849cc4a2-b5c3-4ec0-a680-3b0e942647cf&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 5: Petits boutons<\/h3><div class=\"application-examples-item-description\">Ces boutons sont de forme circulaire, mais gr\u00e2ce \u00e0 la largeur r\u00e9active, la valeur a \u00e9t\u00e9 modifi\u00e9e pour les rendre ovales et plus substantiels. L'utilisateur a choisi la variante Flat du style et a laiss\u00e9 les couleurs originales des m\u00e9dias, mais a ajout\u00e9 une couleur noire et une animation de rebond au survol.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=0e89866f-132f-4bde-bafc-fd46d8e4f927&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 6: Grille<\/h3><div class=\"application-examples-item-description\">Les ic\u00f4nes en forme de rectangle sont joliment dispos\u00e9es dans une grille et montrent \u00e0 la fois les ic\u00f4nes et le texte avec les noms des m\u00e9dias. Ils s'int\u00e9greront dans une zone de contenu, l'unit\u00e9 de finition d'un article ou en bas de page. Une animation de curseur attrayante est active sur les symboles et les ic\u00f4nes deviennent noires au survol.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=db219922-3932-45f0-af28-3f732f3a1e99&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 7: Liste de partager<\/h3><div class=\"application-examples-item-description\">L'auteur a \u00e9dit\u00e9 les \u00e9tiquettes des boutons et ajout\u00e9 un appel \u00e0 l'action \u00e0 chacun d'eux. Il n'y a pas d'ic\u00f4nes des m\u00e9dias - \u00e0 la place, leurs noms sont ajout\u00e9s. L'arri\u00e8re-plan des boutons a \u00e9t\u00e9 chang\u00e9 en blanc et la couleur du texte est celle d'origine pour chacun des m\u00e9dias pour \u00e9tablir l'association visuelle.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=bfc5305f-e07c-4a15-b058-0ee9513dc973&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n\n<div class=\"application-examples-item application-examples-item-loading\">\n                            <div class=\"col-row\">\n                                <div class=\"col-6 col-m-8 col-s-12\"><h3 class=\"application-examples-item-title\">Exemple 8: Messag\u00e8res<\/h3><div class=\"application-examples-item-description\">Pour faciliter le partage du contenu par les utilisateurs, dans cet exemple, il existe des boutons pour les messagers les plus populaires. Les boutons enregistrent les couleurs d'origine et affichent le nom et l'ic\u00f4ne ensemble. Ils sont de forme arrondie et gr\u00e2ce \u00e0 la largeur automatique, ils remplissent exactement le bon espace sur la page.<\/div><\/div>\n                <\/div>\n\n                <div class=\"application-examples-item-iframe-container browser-frame\">\n                    <div class=\"application-examples-item-iframe-wrapper\">\n                        <iframe class=\"application-examples-item-iframe\" data-src=\"https:\/\/elfsight.com\/examples?widget_id=87cf5164-3c2c-41f1-9741-b443afee7277&padding=140px+40px+0\" width=\"100%\" allow=\"autoplay; fullscreen\"><\/iframe>\n                    <\/div>\n                    \n                    <div class=\"application-examples-item-loader\"><\/div>\n                <\/div>\n            <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":12,"featured_media":0,"parent":1344,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-examples.php","meta":{"footnotes":""},"class_list":["post-1355","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TOP 8 exemples de boutons de partage social pour sites Web (Showcase)<\/title>\n<meta name=\"description\" content=\"TOP 8 des exemples de boutons de partage de m\u00e9dias sociaux: en ligne classique, mise en page flottante et autres mod\u00e8les pour votre site Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TOP 8 exemples de boutons de partage social pour sites Web (Showcase)\" \/>\n<meta property=\"og:description\" content=\"TOP 8 des exemples de boutons de partage de m\u00e9dias sociaux: en ligne classique, mise en page flottante et autres mod\u00e8les pour votre site Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight FR\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-27T15:06:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TOP 8 exemples de boutons de partage social pour sites Web (Showcase)","description":"TOP 8 des exemples de boutons de partage de m\u00e9dias sociaux: en ligne classique, mise en page flottante et autres mod\u00e8les pour votre site Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/","og_locale":"fr_FR","og_type":"article","og_title":"TOP 8 exemples de boutons de partage social pour sites Web (Showcase)","og_description":"TOP 8 des exemples de boutons de partage de m\u00e9dias sociaux: en ligne classique, mise en page flottante et autres mod\u00e8les pour votre site Web.","og_url":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/","og_site_name":"Elfsight FR","article_modified_time":"2020-08-27T15:06:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/","url":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/","name":"TOP 8 exemples de boutons de partage social pour sites Web (Showcase)","isPartOf":{"@id":"https:\/\/elfsight.com\/fr\/#website"},"datePublished":"2020-07-21T11:49:15+00:00","dateModified":"2020-08-27T15:06:35+00:00","description":"TOP 8 des exemples de boutons de partage de m\u00e9dias sociaux: en ligne classique, mise en page flottante et autres mod\u00e8les pour votre site Web.","breadcrumb":{"@id":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Social Share Buttons","item":"https:\/\/elfsight.com\/fr\/social-media-share-buttons\/"},{"@type":"ListItem","position":3,"name":"Social Share Buttons &#8211; Examples"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/fr\/#website","url":"https:\/\/elfsight.com\/fr\/","name":"Elfsight FR","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"1337","h1":"","h1_caption":"Consultez des exemples de boutons sociaux pour r\u00e9v\u00e9ler tout le potentiel du widget. Assurez-vous qu'il conviendra \u00e0 tous vos objectifs.","application_category":[],"applications_title":"","applications_request_title":"","applications_request_button_text":"","hero_text":"","hero_video":"","hero_video_schema_markup":"","selling_points_title":"","selling_points_caption":"","selling_points":[],"selling_points_cta_text":"","features_title":"","features":"","ed_cta_examples_text":"","ed_cta_examples_hidden":"","ed_cta_demo_text":"","ed_cta_demo_hidden":"","why_caption":"","why_editor_title":"","why_editor_text":"","why_team_title":"","why_team_text":"","why_service_title":"","why_service_text":"","template_catalog_visible":"","template_catalog_title":"","template_catalog_text":"","template_catalog_categories_visible":"","demo_title":"","demo_caption":"","default_faq_hidden":"","app_template_category":[],"platform":"","template_public_id":"","codecanyon_url":"","codecanyon_item_id":"","codecanyon_price":"","pricing_caption":"","pricing_elfsight_apps_hide_column":"","pricing_elfsight_apps_url":"","pricing_codecanyon_price_caption":"","integration_category":[],"integration_request_title":"","integration_request_cta":"","integration_platform":"","integrations":[],"platform_category":[],"video_schema_markup":"","price":"","trial":"","benefits":[],"button_url":"","button_target_blank":"","button_nofollow":"","attributes":[],"tags":[],"tags_disable_links":"","hide_more_platforms":"","video_object":"","demo_hide_cta":"","demo_hide_cloud_options":"","pricing_title":"","pricing":[],"related_apps_title":"","related_apps_hidden":""},"_links":{"self":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/1355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/comments?post=1355"}],"version-history":[{"count":4,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/1355\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/1355\/revisions\/1360"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/pages\/1344"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/fr\/wp-json\/wp\/v2\/media?parent=1355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}