{"id":3868,"date":"2015-01-06T10:00:26","date_gmt":"2015-01-06T10:00:26","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=3868"},"modified":"2020-04-02T13:33:57","modified_gmt":"2020-04-02T13:33:57","slug":"social-media-sharing-mit-jquery-tutorial","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/","title":{"rendered":"Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial"},"content":{"rendered":"<p style=\"text-align: justify;\">Social Media spielt heutzutage eine gro\u00dfe Rolle f\u00fcr fast jedes Unternehmen. Mit dem richtigen Branding kann man seinen Social-Media-Account enorm marktf\u00e4hig machen. Das ist der Grund, warum gro\u00dfe Unternehmen wie Facebook so viele Investoren anziehen k\u00f6nnen - <strong>weil sich Menschen<\/strong><strong> miteinander vernetzen und Informationen digital austauschen m\u00f6chten.<\/strong> Und da ein altmodischer eingebetteter Social-Medien-Button ziemlich abgestanden wirken kann, w\u00fcrde ich vorschlagen, dass wir ihn heute gemeinsam ein wenig aufpeppen.<\/p>\n<p style=\"text-align: justify;\">In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, <strong>wie man<\/strong><strong> eine Popup-Blase mit Social-Media-Widgets erstellt<\/strong>. Die Blase wird durch jQuery angezeigt und kann eine beliebige Anzahl der Widgets von <em>Twitter<\/em><em>, Instagram, Facebook, YouTube<\/em> usw. enthalten. Werft einen Blick auf meine Live-Demo, um das endg\u00fcltige Design in Aktion zu sehen.<\/p>\n<p style=\"text-align: justify;\"><strong><a href=\"http:\/\/blog.templatemonster.com\/demos\/hidden-social-media-sharing-popup-bubbles-with-jquery\/demo\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\"><br \/>\nLive Demo<\/a><\/strong> \u2013 <strong><a href=\"http:\/\/blog.templatemonster.com\/demos\/hidden-social-media-sharing-popup-bubbles-with-jquery\/social-popup-bubbles-source.zip?7e70d4\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"broken_link\">Quellcode runterladen <\/a><\/strong><\/p>\n<div class=\"post_content\">\n<h3 style=\"text-align: justify;\">Legen wir los!<\/h3>\n<p style=\"text-align: justify;\">Zun\u00e4chst erstellen wir ein neues HTML-Dokument und die Ordner f\u00fcr die CSS und JS-Dateien. Mein Stylesheet wurde styles.css benannt, aber Ihr k\u00f6nnt einen beliebigen Dateinamen w\u00e4hlen. Schnappt Euch auch eine lokale Kopie von jQuery und f\u00fcgt sie in die Kopfzeile ebenso ein.<\/p>\n<p style=\"text-align: justify;\">&lt;!doctype html&gt;<\/p>\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\r\n2\r\n3\r\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\">\u00a0\r\n\u00a0\r\n  &lt;script src=\"js\/jquery-1.11.2.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">Im Inneren des Seitenbodys werden die Dinge ein wenig chaotisch. Ich habe einen einzigen Au\u00dfencontainer mit der ID <strong>#wrapper<\/strong>, der alle Inhalte beinhaltet. Dann habe ich einen gesamten Beh\u00e4lter f\u00fcr die Social-Media-Links mit Hilfe von class <strong>.social-links<\/strong> erstellt. Jeder Link ist eigentlich ein Social-Media-Icon aus der kostenlosen <a href=\"http:\/\/dakirby309.deviantart.com\/art\/Metro-Uinvert-Dock-Icon-Set-725-Icons-294529071\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Metro Uinvert icon<\/a> Sammlung.<\/p>\n<p style=\"text-align: justify;\">Da die Icon-Links nebeneinander positioniert sind, habe ich sie im <strong>.clearfix<\/strong> Container schweben lassen. Es ist sehr wichtig sicherzustellen, dass ein weiterer Seiteninhalt ordnungsgem\u00e4\u00df gel\u00f6scht wurde.<\/p>\n<div id=\"wrapper\" style=\"text-align: justify;\">\n<h1>Social-Media-Sharing Bubbles<\/h1>\n<div class=\"social-links\">\n<div class=\"clearfix\">\n<div class=\"glyph twitter\">\n<div class=\"bubble\"><a class=\"twitter-follow-button\" href=\"https:\/\/twitter.com\/TM_Deutschland\" data-show-count=\"false\" data-lang=\"de\" target=\"_blank\" rel=\"nofollow\">@TM_Deutschland folgen<\/a><br \/>\n<script>\/\/ <![CDATA[\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=\/^http:\/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+':\/\/platform.twitter.com\/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');\n\/\/ ]]&gt;<\/script><\/div>\n\n\n\n\n<div class=\"glyph facebook\">\n\n\n<div class=\"bubble wide\"><iframe loading=\"lazy\" src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftemplatemonster.de&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21\" width=\"300\" height=\"150\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td class=\"line_numbers\">\n\n\n<pre>1\r\n<\/pre>\n\n\n<\/td>\n\n\n\n\n<td class=\"code\">\n\n\n<pre class=\"php\">&lt;!-- @end #wrapper --&gt;<\/pre>\n\n\n<\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n\n\n<p style=\"text-align: justify;\">Schaut Euch die einzelnen Abschnitte an und Ihr werdet zwei Klassen in jedem Container bemerken. Beispielsweise, hat das erste Twitter-Widget eine Klasse von <strong>.glyph<\/strong> und <strong>.twitter<\/strong>. Die Glyphe-Klasse setzt einen allgemeinen Standard f\u00fcr jeden Link. Die sekund\u00e4re Klasse wird verwendet, um ein bestimmtes Link-Hintergrund-Icon einzuf\u00fchren.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\">Der <strong>.glyph<\/strong> Container verf\u00fcgt \u00fcber zwei separate Elemente. Zun\u00e4chst ist es das <strong>popup <\/strong><strong>div<\/strong>, das urspr\u00fcnglich auf der Seite ausgeblendet wird. Es verwendet die Klasse <strong>.bubble<\/strong> und ist neben einem Anker-Link ohne Text zu finden. Diese Links benutzen ein Hintergrund-Icon, um Social-Media-Websites zu repr\u00e4sentieren, dabei \u00e4ndert sich die Farbe von\u00a0Icon, w\u00e4hrend man den Mauszeiger dar\u00fcber platziert.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\">Eine andere Sache, die Ihr wahrscheinlich bemerkt habt, ist die Zugabe von <strong>.wide<\/strong> Klasse auf der Facebook-Blase. Da der \"<em>Like-Button<\/em>\" ein bisschen zu lang ist, habe ich zwei verschiedene Popup-Blase-Klassen erstellt \u2013 eine mit der Normalgr\u00f6\u00dfe und eine andere, die etwas breiter ist. Wenn Ihr die Gr\u00f6\u00dfe ver\u00e4ndern m\u00f6chtet, k\u00f6nnt Ihr immer Eure eigenen erweiterten Popup-Hintergr\u00fcnde erstellen.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\"><strong>Gestalten mit<\/strong><strong> CSS<\/strong><\/p>\n\n\nNun ist es die Zeit Euch zu erkl\u00e4ren, wie die Seite organisiert und aufgestellt ist. Alle Bilder sind im \"css\" Ordner gespeichert, weil jedes davon als CSS Hintergrund verwendet wird. Dies macht Ressourcenmanagement auf lange Sicht viel einfacher.\n\nIch verwende ein leicht angepasstes CSS-Reset vom <a href=\"http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\" target=\"_blank\" rel=\"nofollow\">Eric Meyer template<\/a>. F\u00fcr den Body-Hintergrund benutze ich <a href=\"http:\/\/subtlepatterns.com\/cream_dust\/\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Cream Dust tile<\/a> aus Subtle Patterns.\n\n\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td class=\"line_numbers\">\n\n\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n<\/pre>\n\n\n<\/td>\n\n\n\n\n<td class=\"code\">\n\n\n<pre class=\"php\">  \/** page structure **\/\r\n#wrapper {\r\n  display: block;\r\n  max-width: 700px;\r\n  min-width: 350px;\r\n  margin: 0 auto;\r\n  padding: 20px 0;\r\n}\r\n\u00a0\r\n\u00a0\r\n\/** social links **\/\r\n.social-links {\r\n  display: block;\r\n  width: 250px;\r\n  padding-top: 100px;\r\n  margin: 0 auto;\r\n}<\/pre>\n\n\n<\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n\n\n<p style=\"text-align: justify;\">Die \u00e4u\u00dfere Umh\u00fcllung sollte selbsterkl\u00e4rend als ein allgemeiner Container dienen. Der innere <strong>.social<\/strong><strong>-<\/strong><strong>links<\/strong> Container beinhaltet die Link-Icons und zentriert sie auf der Seite.<\/p>\n\n\n\n\n\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td class=\"line_numbers\">\n\n\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n<\/pre>\n\n\n<\/td>\n\n\n\n\n<td class=\"code\">\n\n\n<pre class=\"php\">  .glyph {\r\n  display: block;\r\n  position: relative;\r\n  float: left;\r\n  width: auto;\r\n  height: auto;\r\n  margin-right: 2px;\r\n  padding: 3px 6px;\r\n  height: 35px;\r\n  width: 52px;\r\n}\r\n.glyph.active {\r\n  background: url('bubble-sm.png');\r\n  background-position: -9px 40px;\r\n}\r\n\u00a0\r\n.glyph .bubble { \r\n  display: none; \r\n  width: 140px;\r\n  height: 89px;\r\n  position: absolute;\r\n  margin: 0;\r\n  text-align: center;\r\n  background: url('bubble-sm.png');\r\n  padding: 20px 20px;\r\n  bottom: 35px;\r\n  left: -9px;\r\n  cursor: pointer;\r\n}\r\n.glyph .bubble.wide {\r\n  width: 160px;\r\n  left: -6px;\r\n  background: url('bubble-wide.png');\r\n}<\/pre>\n\n\n<\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n\n\n<p style=\"text-align: justify;\">Nun, wenn es zur <strong>.glyph<\/strong> Klasse kommt, gibt es eine Menge zu ber\u00fccksichtigen. Normalerweise benutze ich die relative Positionierung, weil die Glyphen einen bestimmten Abstand ben\u00f6tigen und die innere Popup-Blase absolut positioniert ist. Wenn man diese Popup-Blase in der relativen Anordnung gegen\u00fcber der Icon-Glyphe hat, ist das die einfachste L\u00f6sung.<\/p>\n\n\nWenn Ihr einen Blick auf die allgemeine <strong>.bubble<\/strong> Klasse werft, werdet Ihr feststellen, dass ich ein Hintergrundbild f\u00fcr den Schatten-Effekt benutze. Das Bild habe ich in zwei Bereiche aufgeteilt, damit der Icon-Link und das Popup-Fenster zusammenkommen, um eine nahtlose BG zu erstellen.\n\n\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td class=\"line_numbers\">\n\n\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n<\/pre>\n\n\n<\/td>\n\n\n\n\n<td class=\"code\">\n\n\n<pre class=\"php\">.glyph a {\r\n  display: block;\r\n  position: relative;\r\n  height: 33px;\r\n  width: 40px;\r\n}\r\n\u00a0\r\n.glyph.twitter a {\r\n  background: url('twitter-grey@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n  top: -4px;\r\n  left: -1px;\r\n}\r\n.glyph.twitter.active a { \r\n  background: url('twitter@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n}\r\n.glyph.twitter .bubble {\r\n  padding-top: 28px;\r\n  padding-left: 24px;\r\n}\r\n\u00a0\r\n\u00a0\r\n.glyph.facebook a {\r\n  background: url('facebook-grey@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n  top: -4px;\r\n  left: -1px;\r\n}\r\n.glyph.facebook.active a { \r\n  background: url('facebook@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n}\r\n.glyph.facebook .bubble {\r\n  padding-top: 30px;\r\n}\r\n\u00a0\r\n\u00a0\r\n.glyph.dribbble a {\r\n  background: url('dribbble-grey@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n  top: -4px;\r\n  left: -1px;\r\n}\r\n.glyph.dribbble.active a {\r\n  background: url('dribbble@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 33px 28px;\r\n}\r\n.glyph.dribbble a.dbfollow {\r\n  width: 85px;\r\n  height: 36px;\r\n  background: url('db-follow-grey@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 84px 35px;  \r\n}\r\n.glyph.dribbble a.dbfollow:hover {\r\n  background: url('db-follow@2x.png');\r\n  background-repeat: no-repeat;\r\n  background-size: 84px 35px;   \r\n}\r\n.glyph.dribbble .bubble {\r\n  padding-top: 30px;\r\n  padding-left: 30px;\r\n}<\/pre>\n\n\n<\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\nSchlie\u00dflich kommen wir zu den Icons-Stilen, die mit spezifischen Klassen erstellt werden. Jeder Icon-Stil verf\u00fcgt \u00fcber zwei unterschiedliche Effekte: das Original-Icon und das Icon mit dem Hover-Effekt. Der Hover-Effekt f\u00fcgt einfach nur Farbe dem Icon zu und befindet sich exakt an der gleichen Stelle.\n\n\n<h3 style=\"text-align: justify;\">Animation mit jQuery<\/h3>\n\n\n\n\n<p style=\"text-align: justify;\">In dem ich auf die HTML-Datei wieder zur\u00fcckgekomme, f\u00fcge ich einen kleinen Block von JavaScript im unteren Bereich des Dokuments ein. Das Ganze ist in jQuery geschrieben und benutzt die <a href=\"http:\/\/api.jquery.com\/on\/\" target=\"_blank\" rel=\"nofollow\">.on()<\/a> <strong>Event-Handler-Funktion.<\/strong><\/p>\n\n\n\n\n\n<div class=\"wp_syntax\" style=\"text-align: justify;\">\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td class=\"line_numbers\">\n\n\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n<\/pre>\n\n\n<\/td>\n\n\n\n\n<td class=\"code\">\n\n\n<pre class=\"php\">  $(function(){\r\n  $('.glyph').on('mouseover', function(e){\r\n    $(this).addClass('active');\r\n    $(this).find('.bubble').css('display','block');\r\n  }).on('mouseleave', function(e){\r\n    $(this).find('.bubble').css('display','none');\r\n    $(this).removeClass('active');\r\n  });\r\n});<\/pre>\n\n\n<\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n\n\n<p style=\"text-align: justify;\">Durch die Schaffung einer Auswahl von der <strong>.glyph<\/strong> Klasse, kann ich nun die Funktion jedes Icons ver\u00e4ndern. Mit jQuery kann ich sogar zwei Funktionen zusammenf\u00fcgen \u2013 wenn man den Mauszeiger dar\u00fcber platziert und wenn man ihn wegbewegt.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\">Also, wenn der Benutzer den Mauszeiger \u00fcber ein Icon f\u00e4hrt, geben wir diesem div eine <strong>.active<\/strong> Klasse. Divs lieben aktive Klassen. Dies sollte das Graustufen-Hintergrund-Icon mit einer farbigen Version ersetzen.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\">Sobald der Mauszeiger des Benutzers das Icon oder die Popup-Blase\u00a0verl\u00e4sst, werden diese beiden Aktionen umgekehrt funktionieren. So wird die<strong> .active<\/strong> Klasse entfernt und die Blase wird ausgeblendet. Dieser Effekt konnte mit CSS3 erreicht werden, aber es wird nicht wirklich in \u00e4lteren Browsern unterst\u00fctzt. Ich mag die jQuery-L\u00f6sung und es funktioniert perfekt.<\/p>\n\n\n\n\n\n<h3 style=\"text-align: justify;\">Zum Schlu\u00df<\/h3>\n\n\n\n\n<p style=\"text-align: justify;\">Der Popup-Blase-Effekt ist recht unterhaltsam und funktioniert super auf fast jeder Website, von Portfolios bis zu gro\u00dfen Unternehmen. Das eigentliche Ziel ist es, den Platz auf dem Bildschirm zu sparen und mehr als nur einen Link zu Eurem sozialen Profil zu geben. Wenn der Benutzer auf das Link-Icon klicken m\u00f6chte, kann er oder sie nich nur Euren Profil checken, sondern bekommt auch eine zus\u00e4tzliche Option Eure Inhalte zu teilen. Ladet gerne eine Kopie meines Quellcodes herunter und schaut, ob es f\u00fcr Eure k\u00fcnftigen Web-Design-Projekte n\u00fctzlich sein kann.<\/p>\n\n\n\n\n<p style=\"text-align: justify;\">Dieser Artikel wurde aus dem Englischen \u00fcbersetzt. Das Original findest du hier: <a href=\"http:\/\/blog.templatemonster.com\/2015\/01\/05\/hidden-social-media-sharing-bubbles-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial<\/em> <\/a><\/p>\n\n\n\n<\/div>\n\n\n<\/div>\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Social Media spielt heutzutage eine gro\u00dfe Rolle f\u00fcr fast jedes Unternehmen. Mit dem richtigen Branding kann man seinen Social-Media-Account enorm marktf\u00e4hig machen. Das ist der Grund, warum gro\u00dfe Unternehmen wie Facebook so viele Investoren anziehen k\u00f6nnen - weil sich Menschen miteinander vernetzen und Informationen digital austauschen m\u00f6chten. Und da ein altmodischer eingebetteter Social-Medien-Button ziemlich abgestanden [&hellip;]<\/p>\n","protected":false},"author":1805543,"featured_media":3872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,16],"tags":[34,231,227],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Social-Media-Sharing mit jQuery Tutorial<\/title>\n<meta name=\"description\" content=\"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Social-Media-Sharing mit jQuery Tutorial\" \/>\n<meta property=\"og:description\" content=\"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-06T10:00:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-02T13:33:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2015\/01\/social-media-sharing-popup-bubble.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Wirth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Wirth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\"},\"author\":{\"name\":\"Olga Wirth\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\"},\"headline\":\"Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial\",\"datePublished\":\"2015-01-06T10:00:26+00:00\",\"dateModified\":\"2020-04-02T13:33:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\"},\"wordCount\":963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\",\"Soziale Netzwerke\"],\"articleSection\":[\"Anleitungen\",\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\",\"url\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\",\"name\":\"Social-Media-Sharing mit jQuery Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2015-01-06T10:00:26+00:00\",\"dateModified\":\"2020-04-02T13:33:57+00:00\",\"description\":\"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\",\"name\":\"Olga Wirth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Wirth\"},\"description\":\"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/olgawirth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Social-Media-Sharing mit jQuery Tutorial","description":"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.","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:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/","og_locale":"de_DE","og_type":"article","og_title":"Social-Media-Sharing mit jQuery Tutorial","og_description":"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.","og_url":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2015-01-06T10:00:26+00:00","article_modified_time":"2020-04-02T13:33:57+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2015\/01\/social-media-sharing-popup-bubble.jpg","type":"image\/jpeg"}],"author":"Olga Wirth","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Wirth","Gesch\u00e4tzte Lesezeit":"6 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/"},"author":{"name":"Olga Wirth","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e"},"headline":"Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial","datePublished":"2015-01-06T10:00:26+00:00","dateModified":"2020-04-02T13:33:57+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/"},"wordCount":963,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["CSS3","HTML5","Soziale Netzwerke"],"articleSection":["Anleitungen","Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/","url":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/","name":"Social-Media-Sharing mit jQuery Tutorial","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2015-01-06T10:00:26+00:00","dateModified":"2020-04-02T13:33:57+00:00","description":"In diesem Social-Media-Sharing Bubbles-Tutorial m\u00f6chte ich zeigen, wie man eine Popup-Blase mit Social-Media-Widgets erstellt.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/social-media-sharing-mit-jquery-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Versteckte Social-Media-Sharing Popup-Bubbles mit jQuery Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e","name":"Olga Wirth","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Wirth"},"description":"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/olgawirth\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/3868"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1805543"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=3868"}],"version-history":[{"count":23,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/3868\/revisions"}],"predecessor-version":[{"id":24983,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/3868\/revisions\/24983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/3872"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=3868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=3868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=3868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}