{"id":993,"date":"2020-06-05T12:34:05","date_gmt":"2020-06-05T12:34:05","guid":{"rendered":"https:\/\/elfsight.com\/de\/?page_id=993"},"modified":"2020-10-21T15:31:20","modified_gmt":"2020-10-21T15:31:20","slug":"examples","status":"publish","type":"page","link":"https:\/\/elfsight.com\/de\/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\">Beispiel 1. Inline Buttons<\/h3><div class=\"application-examples-item-description\">Das Beispiel zeigt vier rechteckige Buttons  zum Teilen von Informationen in den beliebtesten sozialen Netzwerken. Es gibt authentische Farben, Namen und Symbole der sozialen Medien. Dies ist ein gutes Beispiel, wenn Sie die Schaltfl\u00e4chen in der Inhaltszone platzieren m\u00fcssen.<\/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><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\">Beispiel 2. Floating Buttons<\/h3><div class=\"application-examples-item-description\">M\u00fcssen Sie Social Share Buttons erstellen, die dem Bildlauf des Benutzers folgen? Es ist einfach! W\u00e4hlen Sie einfach das schwebende Layout wie in diesem Beispiel. Das vordefinierte Design der Vorlage ist eher minimalistisch: nur quadratische Form Symbole in der vertikalen Liste.<\/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\/de\/wp-content\/themes\/elfsight\/frontend\/assets\/img\/application-cta-create.jpg\" alt=\"Beginnen Sie mit der Erstellung Ihres Widgets\">\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\">Beginnen Sie mit der Erstellung Ihres Widgets<\/div>\n\n                            <div class=\"application-cta-create-content-text\">Schnell. Einfach. Keine Codierung.<\/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\">Widget erstellen<\/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><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\">Beispiel 3. Schwarze Buttons<\/h3><div class=\"application-examples-item-description\">Dies ist die Variante des Widgets mit benutzerdefinierten schwarzen Schaltfl\u00e4chen. Sie sind schwarzwei\u00df, geometrisch und minimalistisch, nur mit dem Symbol f\u00fcr soziale Netzwerke.<\/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><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\">Beispiel 4. Share Icons<\/h3><div class=\"application-examples-item-description\">Diese sch\u00f6nen und kleinen Buttons sehen auf der Seite wirklich ordentlich aus. Sie haben eine Kreisform und einen Materialstil und zeigen die Symbole der ausgew\u00e4hlten Medien. Ein sch\u00f6ner Folien Animationseffekt beim Schweben verbessert die Benutzererfahrung.<\/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><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\">Beispiel 5. Kleine Buttons<\/h3><div class=\"application-examples-item-description\">Diese Schaltfl\u00e4chen haben eine Kreisform, aber dank der Reaktionsbreite wurde der Wert ge\u00e4ndert, um sie oval und attraktiver zu machen. Es gibt originale Farben f\u00fcr soziale Netzwerke mit schwarzem Schatteneffekt und Animationsstil \u201cBounce\u201c beim Schweben.<\/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><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\">Beispiel 6. Grid<\/h3><div class=\"application-examples-item-description\">Rechteckige Symbole sind mit dem Text und den authentischen Symbolen der sozialen Medien in einem Raster angeordnet. Sie passen an jeden Ort des Inhalts Bereichs vor oder nach dem Blog-Artikel oder am Ende der Webseite. Eine attraktive Schieberegler Animation ist f\u00fcr Symbole aktiv und Symbole werden beim Schweben schwarz.<\/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><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\">Beispiel 7. Social Media Teilen<\/h3><div class=\"application-examples-item-description\">Hier ist die minimalistische Liste der Namen der beliebten sozialen Netzwerke. Der Hintergrund der Schaltfl\u00e4chen wurde in Wei\u00df ge\u00e4ndert, um sie nahtlos an das Website-Design anzupassen.<\/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><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\">Beispiel 8.  Messengers<\/h3><div class=\"application-examples-item-description\">Um es praktisch f\u00fcr Benutzer, den Inhalt zu teilen, in diesem Beispiel gibt es Tasten f\u00fcr die beliebtestenen Bote. Die Buttons speichern die Originalfarben und zeigen den Namen und das Symbol an.<\/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":11,"featured_media":0,"parent":983,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-examples.php","meta":{"footnotes":""},"class_list":["post-993","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 Beispiele f\u00fcr Social Share Buttons f\u00fcr Websites (Showcase)<\/title>\n<meta name=\"description\" content=\"Erfahren Sie, wie Sie Social Share-Schaltfl\u00e4chen ohne Codierung in Ihre Website einbetten k\u00f6nnen. Anpassbare und f\u00fcr Mobilger\u00e4te optimierte Buttons\" \/>\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\/de\/social-media-share-buttons\/examples\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TOP 8 Beispiele f\u00fcr Social Share Buttons f\u00fcr Websites (Showcase)\" \/>\n<meta property=\"og:description\" content=\"Erfahren Sie, wie Sie Social Share-Schaltfl\u00e4chen ohne Codierung in Ihre Website einbetten k\u00f6nnen. Anpassbare und f\u00fcr Mobilger\u00e4te optimierte Buttons\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight DE\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-21T15:31:20+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TOP 8 Beispiele f\u00fcr Social Share Buttons f\u00fcr Websites (Showcase)","description":"Erfahren Sie, wie Sie Social Share-Schaltfl\u00e4chen ohne Codierung in Ihre Website einbetten k\u00f6nnen. Anpassbare und f\u00fcr Mobilger\u00e4te optimierte Buttons","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\/de\/social-media-share-buttons\/examples\/","og_locale":"de_DE","og_type":"article","og_title":"TOP 8 Beispiele f\u00fcr Social Share Buttons f\u00fcr Websites (Showcase)","og_description":"Erfahren Sie, wie Sie Social Share-Schaltfl\u00e4chen ohne Codierung in Ihre Website einbetten k\u00f6nnen. Anpassbare und f\u00fcr Mobilger\u00e4te optimierte Buttons","og_url":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/","og_site_name":"Elfsight DE","article_modified_time":"2020-10-21T15:31:20+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/","url":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/","name":"TOP 8 Beispiele f\u00fcr Social Share Buttons f\u00fcr Websites (Showcase)","isPartOf":{"@id":"https:\/\/elfsight.com\/de\/#website"},"datePublished":"2020-06-05T12:34:05+00:00","dateModified":"2020-10-21T15:31:20+00:00","description":"Erfahren Sie, wie Sie Social Share-Schaltfl\u00e4chen ohne Codierung in Ihre Website einbetten k\u00f6nnen. Anpassbare und f\u00fcr Mobilger\u00e4te optimierte Buttons","breadcrumb":{"@id":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/de\/"},{"@type":"ListItem","position":2,"name":"Social Share Buttons","item":"https:\/\/elfsight.com\/de\/social-media-share-buttons\/"},{"@type":"ListItem","position":3,"name":"Social Share Buttons &#8211; Examples"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/de\/#website","url":"https:\/\/elfsight.com\/de\/","name":"Elfsight DE","description":"Just another Elfsight Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"467","h1":"Beispiele f\u00fcr Social Share Buttons","h1_caption":"","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\/de\/wp-json\/wp\/v2\/pages\/993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":3,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/993\/revisions"}],"predecessor-version":[{"id":1000,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/993\/revisions\/1000"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/983"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/media?parent=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}