{"id":107,"date":"2015-01-08T08:49:15","date_gmt":"2015-01-08T08:49:15","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=107"},"modified":"2020-04-01T07:12:42","modified_gmt":"2020-04-01T07:12:42","slug":"tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/","title":{"rendered":"Tutorial: Pojawiaj\u0105ce Si\u0119 Okienko Udost\u0119pniania Media Spo\u0142ecznych Z jQuery"},"content":{"rendered":"<ul>\n<li><a href=\"#title1\">Pierwsze kroki<\/a><\/li>\n<li><a href=\"#title2\">Okienko udost\u0119pniania media spo\u0142ecznych<\/a><\/li>\n<li><a href=\"#title3\">Animowanie w jQuery<\/a><\/li>\n<li><a href=\"#title4\">Projektowanie w CSS<\/a><\/li>\n<li><a href=\"#title5\">Podsumowanie<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Media spo\u0142eczne to wielka sprawa dla prawie ka\u017cdej firmy. Przy odpowiednim brandingu mo\u017cna w\u0142\u0105czy\u0107 konto medi\u00f3w spo\u0142eczno\u015bciowych do ogromnych aktyw\u00f3w rynkowych. Dlatego du\u017ce firmy takie jak Facebook mog\u0105 przyci\u0105gn\u0105\u0107 tak wielu inwestor\u00f3w - bo ludzie chc\u0105 pod\u0142\u0105czy\u0107 i udost\u0119pnia\u0107 informacje cyfrowo. Ale stary wbudowany przycisk udost\u0119pniania medi\u00f3w spo\u0142eczno\u015bciowych - to przysz\u0142o\u015b\u0107, dlatego dzi\u015b poka\u017c\u0119 jak jego troch\u0119 aktualizowa\u0107.<\/p>\n<p style=\"text-align: justify;\">W tym tutorialu chcia\u0142abym pokaza\u0107, <strong>jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spo\u0142ecznych<\/strong>. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery i mo\u017ce posiada\u0107 dowoln\u0105 liczb\u0119 wid\u017cet\u00f3w z <em>Twitter<\/em>,<em> Facebook<\/em>,<em> Instagram<\/em>,<em> YouTube<\/em> itp. Obejrzyj moje demo, aby zobaczy\u0107 ostateczny projekt w akcji.<\/p>\n<p style=\"text-align: center;\"><strong><a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/blog.templatemonster.com\/demos\/hidden-social-media-sharing-popup-bubbles-with-jquery\/demo\/index.html\" target=\"_blank\"><br \/>\nDemo<\/a><\/strong> \u2013 <strong><a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/blog.templatemonster.com\/demos\/hidden-social-media-sharing-popup-bubbles-with-jquery\/social-popup-bubbles-source.zip?7e70d4\" target=\"_blank\">Pobra\u0107 kod \u017ar\u00f3d\u0142owy<\/a><\/strong><\/p>\n<h2 id=\"title1\">Pierwsze kroki<\/h2>\n<p style=\"text-align: justify;\">Najpierw utw\u00f3rz nowy dokument HTML i zr\u00f3b foldery dla plik\u00f3w CSS i JS. M\u00f3j arkusz styl\u00f3w ma nazw\u0119 styles.css ale mo\u017cesz wybra\u0107 dowoln\u0105 nazw\u0119 pliku. R\u00f3wnie\u017c pobierz lokaln\u0105 <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/jquery.com\/download\/\" target=\"_blank\">kopi\u0119 jQuery<\/a> i w\u0142\u0105cz j\u0105 w nag\u0142\u00f3wku.<\/p>\n<p>&lt;!doctype html&gt;<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n2\n3\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"> \n \n  <span style=\"color: #339933;\">&lt;<\/span>script src<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"js\/jquery-1.11.2.min.js\"<\/span> type<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"text\/javascript\"<\/span><span style=\"color: #339933;\">&gt;<\/span><span style=\"color: #000000; font-weight: bold;\">&lt;\/script&gt;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">Wewn\u0105trz body strony rzeczy s\u0105 troch\u0119 przemieszane. Mam jeden zewn\u0119trzny pojemnik z ID #wrapper centrowaniem ca\u0142ej zawarto\u015bci. Potem stworzy\u0142am og\u00f3lny pojemnik na lonki medi\u00f3w spo\u0142ecznych z wykorzystaniem klasy <strong>.social-linki<\/strong>. Ka\u017cdy link to ikonka social media z darmowego zestawu ikon <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/dakirby309.deviantart.com\/art\/Metro-Uinvert-Dock-Icon-Set-725-Icons-294529071\" target=\"_blank\">Metro Uinvert<\/a><\/p>\n<p style=\"text-align: justify;\">Poniewa\u017c lonki ikon s\u0105 umieszczone obok siebie, umie\u015bci\u0142am je do pojemnika <strong>.clearfix<\/strong>. Jest to bardzo wa\u017cne, aby zapewni\u0107 \u017ce dalsza tre\u015b\u0107 strony jest prawid\u0142owo rozliczona.<\/p>\n<div id=\"wrapper\">\n<h2 id=\"title2\">Okienko Udost\u0119pniania Media Spo\u0142ecznych<\/h2>\n<\/div>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #339933;\">&lt;!--<\/span> <span style=\"color: #339933;\">@<\/span><span style=\"color: #990000;\">end<\/span> <span style=\"color: #666666; font-style: italic;\">#wrapper --&gt;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">Sp\u00f3jrz na ka\u017cd\u0105 pojedyncz\u0105 sekcj\u0119 i zauwa\u017cysz dwie klasy na ka\u017cdym pojemniku. Na przyk\u0142ad pierwszy widget Twitter ma klas\u0119 <strong>.glyph<\/strong> i <strong>.twitter<\/strong>. Klasa glif\u00f3w ustanawia og\u00f3lne domy\u015blne dla ka\u017cdego odno\u015bnika takiego jak padding i odst\u0119py. Klasa wt\u00f3rna s\u0142u\u017cy do na\u0142o\u017cenia szczeg\u00f3\u0142owego tla na link ikony.<\/p>\n<p style=\"text-align: justify;\">Pojemnik <strong>.glyph<\/strong> ma dwa oddzielne elementy. Pierwszy jest pojawiaj\u0105cy si\u0119 div, kt\u00f3ry jest pocz\u0105tkowo ukryty. Drugi u\u017cywa klasy <strong>.bubble<\/strong> i znajduje si\u0119 obok anchor linku bez tekstu.<\/p>\n<p><a href=\"https:\/\/www.templatemonster.com\/pl\/type\/szablony-wordpress\/\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-11606\" src=\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2018\/01\/optimized-xizw.jpg\" alt=\"szablony WordPress dla fotograf\u00f3w 012\" width=\"728\" height=\"90\" srcset=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/01\/optimized-xizw.jpg 728w, https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/01\/optimized-xizw-300x37.jpg 300w, https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/01\/optimized-xizw-640x79.jpg 640w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Jeszcze jedno na co trzeba zwr\u00f3ci\u0107 uwag\u0119 - dodanie klasy <strong>.wide<\/strong> w okienko Facebook. Jest troch\u0119 d\u0142u\u017cszy od \"Lubi\u0119 to!\", stworzy\u0142am dwie r\u00f3\u017cne klasy pojawiaj\u0105cego si\u0119 okienka - jedne regularnej wielko\u015bci i druge, nieco szersze. Je\u015bli chcesz zwi\u0119kszy\u0107 rozmiar zawsze mo\u017cna stworzy\u0107 w\u0142asne rozszerzone pojawiaj\u0105ce si\u0119 okienko.<\/p>\n<h2 id=\"title3\">Projektowanie w CSS<\/h2>\n<p>Przechodz\u0105c do CSS wyt\u0142umacz\u0119 jak strona jest zorganizowana i jak s\u0105 rozmieszczone elementy. Wszystkie zdj\u0119cia s\u0105 zapisywane w folderze \"css\", poniewa\u017c ka\u017cde z nich jest u\u017cywany jako t\u0142o CSS. To sprawia, \u017ce zarz\u0105dzanie zasobami jest du\u017co \u0142atwiejsze w d\u0142u\u017cszej perspektywie.<\/p>\n<p>Aby rozpocz\u0105\u0107 skorzystam resetu CSS <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\" target=\"_blank\">szablonu Eric Meyer<\/a>. Dla tla body strony u\u017cywam <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/subtlepatterns.com\/cream_dust\/\" target=\"_blank\">Cream Dust tile<\/a> z Subtle Patterns.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"> <span style=\"color: #009933; font-style: italic;\">\/** page structure **\/<\/span>\n<span style=\"color: #666666; font-style: italic;\">#wrapper {\n<\/span> display<span style=\"color: #339933;\">:<\/span> block<span style=\"color: #339933;\">;<\/span>\nmax<span style=\"color: #339933;\">-<\/span>width<span style=\"color: #339933;\">:<\/span> 700px<span style=\"color: #339933;\">;<\/span>\nmin<span style=\"color: #339933;\">-<\/span>width<span style=\"color: #339933;\">:<\/span> 350px<span style=\"color: #339933;\">;<\/span>\nmargin<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span> auto<span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">:<\/span> 20px <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n \n \n<span style=\"color: #009933; font-style: italic;\">\/** social links **\/<\/span>\n<span style=\"color: #339933;\">.<\/span>social<span style=\"color: #339933;\">-<\/span>links <span style=\"color: #009900;\">{<\/span>\ndisplay<span style=\"color: #339933;\">:<\/span> block<span style=\"color: #339933;\">;<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 250px<span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 100px<span style=\"color: #339933;\">;<\/span>\nmargin<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span> auto<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Owini\u0119cie zewn\u0119trzne powinno by\u0107 oczywiste, jako og\u00f3lny pojemnik. Pojemnik wewn\u0119trzny .social-links zawiera linki ikon i centrowanie ich na stronie.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"> <span style=\"color: #339933;\">.<\/span>glyph <span style=\"color: #009900;\">{<\/span>\ndisplay<span style=\"color: #339933;\">:<\/span> block<span style=\"color: #339933;\">;<\/span>\nposition<span style=\"color: #339933;\">:<\/span> relative<span style=\"color: #339933;\">;<\/span>\nfloat<span style=\"color: #339933;\">:<\/span> left<span style=\"color: #339933;\">;<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> auto<span style=\"color: #339933;\">;<\/span>\nheight<span style=\"color: #339933;\">:<\/span> auto<span style=\"color: #339933;\">;<\/span>\nmargin<span style=\"color: #339933;\">-<\/span>right<span style=\"color: #339933;\">:<\/span> 2px<span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">:<\/span> 3px 6px<span style=\"color: #339933;\">;<\/span>\nheight<span style=\"color: #339933;\">:<\/span> 35px<span style=\"color: #339933;\">;<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 52px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>active <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'bubble-sm.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>position<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>9px 40px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n \n<span style=\"color: #339933;\">.<\/span>glyph <span style=\"color: #339933;\">.<\/span>bubble <span style=\"color: #009900;\">{<\/span>\ndisplay<span style=\"color: #339933;\">:<\/span> none<span style=\"color: #339933;\">;<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 140px<span style=\"color: #339933;\">;<\/span>\nheight<span style=\"color: #339933;\">:<\/span> 89px<span style=\"color: #339933;\">;<\/span>\nposition<span style=\"color: #339933;\">:<\/span> absolute<span style=\"color: #339933;\">;<\/span>\nmargin<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\ntext<span style=\"color: #339933;\">-<\/span>align<span style=\"color: #339933;\">:<\/span> center<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'bubble-sm.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">:<\/span> 20px 20px<span style=\"color: #339933;\">;<\/span>\nbottom<span style=\"color: #339933;\">:<\/span> 35px<span style=\"color: #339933;\">;<\/span>\nleft<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>9px<span style=\"color: #339933;\">;<\/span>\ncursor<span style=\"color: #339933;\">:<\/span> pointer<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph <span style=\"color: #339933;\">.<\/span>bubble<span style=\"color: #339933;\">.<\/span>wide <span style=\"color: #009900;\">{<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 160px<span style=\"color: #339933;\">;<\/span>\nleft<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>6px<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'bubble-wide.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Co do klasy <b>.glyph<\/b>. U\u017cywam pozycjonowanie wzgl\u0119dne, bo glify potrzebuj\u0105 odpowiedniego odst\u0119pu i wewn\u0119trzne pojawiaj\u0105ce si\u0119 okienko jest umieszczone absolutnie. Takie rowi\u0105zanie jest najprostsze.<\/p>\n<p>Je\u015bli pogl\u0105dasz na klas\u0119 <b>.bubble<\/b> zauwa\u017cysz \u017ce u\u017cywam zdj\u0119cie t\u0142a dla efektu cienia. Podzie\u0142ilam zdj\u0119cie na dwie cz\u0119\u015bci tak, \u017ce gdy spotykaj\u0105 si\u0119 link ikony i pojawiaj\u0105ce si\u0119 okienko stwarzaj\u0105 jednolite tlo.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"><span style=\"color: #339933;\">.<\/span>glyph a <span style=\"color: #009900;\">{<\/span>\ndisplay<span style=\"color: #339933;\">:<\/span> block<span style=\"color: #339933;\">;<\/span>\nposition<span style=\"color: #339933;\">:<\/span> relative<span style=\"color: #339933;\">;<\/span>\nheight<span style=\"color: #339933;\">:<\/span> 33px<span style=\"color: #339933;\">;<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 40px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n \n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>twitter a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'twitter-grey@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\ntop<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>4px<span style=\"color: #339933;\">;<\/span>\nleft<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>1px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>twitter<span style=\"color: #339933;\">.<\/span>active a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'twitter@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>twitter <span style=\"color: #339933;\">.<\/span>bubble <span style=\"color: #009900;\">{<\/span>\npadding<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 28px<span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">-<\/span>left<span style=\"color: #339933;\">:<\/span> 24px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n \n \n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>facebook a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'facebook-grey@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\ntop<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>4px<span style=\"color: #339933;\">;<\/span>\nleft<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>1px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>facebook<span style=\"color: #339933;\">.<\/span>active a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'facebook@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>facebook <span style=\"color: #339933;\">.<\/span>bubble <span style=\"color: #009900;\">{<\/span>\npadding<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 30px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n \n \n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>dribbble a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'dribbble-grey@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\ntop<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>4px<span style=\"color: #339933;\">;<\/span>\nleft<span style=\"color: #339933;\">:<\/span> <span style=\"color: #339933;\">-<\/span>1px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>dribbble<span style=\"color: #339933;\">.<\/span>active a <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'dribbble@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 33px 28px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>dribbble a<span style=\"color: #339933;\">.<\/span>dbfollow <span style=\"color: #009900;\">{<\/span>\nwidth<span style=\"color: #339933;\">:<\/span> 85px<span style=\"color: #339933;\">;<\/span>\nheight<span style=\"color: #339933;\">:<\/span> 36px<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'db-follow-grey@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 84px 35px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>dribbble a<span style=\"color: #339933;\">.<\/span>dbfollow<span style=\"color: #339933;\">:<\/span>hover <span style=\"color: #009900;\">{<\/span>\nbackground<span style=\"color: #339933;\">:<\/span> url<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'db-follow@2x.png'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">:<\/span> no<span style=\"color: #339933;\">-<\/span>repeat<span style=\"color: #339933;\">;<\/span>\nbackground<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 84px 35px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span>\n<span style=\"color: #339933;\">.<\/span>glyph<span style=\"color: #339933;\">.<\/span>dribbble <span style=\"color: #339933;\">.<\/span>bubble <span style=\"color: #009900;\">{<\/span>\npadding<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 30px<span style=\"color: #339933;\">;<\/span>\npadding<span style=\"color: #339933;\">-<\/span>left<span style=\"color: #339933;\">:<\/span> 30px<span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Wreszcie dochodzimy do stylu ikony, kt\u00f3ry jest tworzony przy u\u017cyciu konkretnych klas. Ka\u017cdy styl ikony ma dwa r\u00f3\u017cne efekty: oryginalne ikony i ikony z efektem najechaniem kursora. Efekt najechania tylko dodaje ikonie koloru, ale nadal ona znajduje si\u0119 w tym samym miejscu.<\/p>\n<p>R\u00f3wnie\u017c u\u017cywam @2x retina zdj\u0119cia aby ka\u017cda ikona dobrze wygl\u0105dala i na Retina MacBookach, i na urz\u0105dzeniach Hi-DPI.<\/p>\n<h2><\/h2>\n<h2 id=\"title4\">Animowanie w jQuery<\/h2>\n<p>Wracaj\u0105c do pliku HTML Doda\u0142am ma\u0142y blok j\u0119zyka JavaScript w dolnej cz\u0119\u015bci dokumentu. Wszystko jest napisane w jQuery i u\u017cywa <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/api.jquery.com\/on\/\" target=\"_blank\">.on()<\/a> funkcj\u0119 modu\u0142u obs\u0142ugi zdarze\u0144.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"line_numbers\">\n<pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n<\/pre>\n<\/td>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace;\"> $<span style=\"color: #009900;\">(<\/span><span style=\"color: #000000; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #009900;\">{<\/span>\n$<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'.glyph'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>on<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'mouseover'<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000000; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">(<\/span>e<span style=\"color: #009900;\">)<\/span><span style=\"color: #009900;\">{<\/span>\n$<span style=\"color: #009900;\">(<\/span>this<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>addClass<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'active'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n$<span style=\"color: #009900;\">(<\/span>this<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>find<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'.bubble'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>css<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'display'<\/span><span style=\"color: #339933;\">,<\/span><span style=\"color: #0000ff;\">'block'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>on<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'mouseleave'<\/span><span style=\"color: #339933;\">,<\/span> <span style=\"color: #000000; font-weight: bold;\">function<\/span><span style=\"color: #009900;\">(<\/span>e<span style=\"color: #009900;\">)<\/span><span style=\"color: #009900;\">{<\/span>\n$<span style=\"color: #009900;\">(<\/span>this<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>find<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'.bubble'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>css<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'display'<\/span><span style=\"color: #339933;\">,<\/span><span style=\"color: #0000ff;\">'none'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n$<span style=\"color: #009900;\">(<\/span>this<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">.<\/span>removeClass<span style=\"color: #009900;\">(<\/span><span style=\"color: #0000ff;\">'active'<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\n<span style=\"color: #009900;\">}<\/span><span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Tworz\u0105c selektor z klasy <b>.glyph<\/b> mog\u0119 uruchomi\u0107 funkcj\u0119 na ka\u017cdej z ikon. Z jQuery faktycznie mog\u0119 pol\u0105czy\u0107 dwie funkcje razem - na <b>najechaniu mysz\u0105<\/b> i <b>gdy kursor pozostawia ikon\u0119<\/b>.<\/p>\n<p>Wi\u0119c, gdy u\u017cytkownik nakieruje na ikon\u0119 dzia\u0142a klasa <b>.active<\/b>. To powinno zast\u0105pi\u0107 szare tlo ikony ca\u0142kowicie kolorow\u0105 wersj\u0105. Nast\u0119pnie za pomoc\u0105 metody <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/api.jquery.com\/find\/\" target=\"_blank\">.find()<\/a> wybierajam pierwsz\u0105 z klasy <b>.bubble<\/b> i stosuje <b>dispaly: blok<\/b> do elementu.<\/p>\n<p>Gdy mysz u\u017cytkownika pozostawia ikon\u0119 lub pojawiaj\u0105ce si\u0119 okienko wtedy obie z tych akcji s\u0105 odwr\u00f3cone. Tak klasa <b>.active<\/b> jest usuni\u0119ta i okienko ponownie jest ukryte. Efekt mo\u017cna zrobi\u0107 za pomoc\u0105 czystego CSS3, ale nie b\u0119dzie wspierany w starszych wersjach przegl\u0105darek. Bardzo podoba mi si\u0119 rozwi\u0105zanie jQuery i dzia\u0142a idealnie.<\/p>\n<h2 id=\"title5\">Podsumowanie<\/h2>\n<p>Efekt pojawiaj\u0105cego si\u0119 okienka jest bardzo przyjemny i dzia\u0142a \u015bwietnie na stronach prawie ka\u017cdego rodzaju \u2014 zaczynaj\u0105c od portfolio do stron du\u017cych korporacji. Gl\u00f3wnym zadaniem tego efektu jest zaoszcz\u0119dzenie miejsca na ekranie, oraz jest to o wiele wi\u0119cej ni\u017c tylko link do swojego profilu spo\u0142ecznego. Je\u015bli u\u017cytkownik chce klikn\u0105\u0107 ikon\u0119 po\u0142\u0105czenia mo\u017ce sprawdzi\u0107 Tw\u00f3j profil - ale w tym przypadku u\u017cytkownik r\u00f3wnie\u017c otrzymuje mo\u017cliwo\u015b\u0107 dzielenia tre\u015bcia. Zapraszam pobra\u0107 kopi\u0119 mojego kodu \u017ar\u00f3d\u0142owego i zobaczy\u0107, czy mo\u017cna go dopasowa\u0107 do przysz\u0142ych web design projekt\u00f3w.<\/p>\n<hr>\n<p style=\"text-align: center;\"><em>Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego.Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj: <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/blog.templatemonster.com\/2015\/01\/05\/hidden-social-media-sharing-bubbles-tutorial\/\" target=\"_blank\">Hidden Social Media Sharing Popup Bubbles with jQuery Tutorial <\/a><\/em><\/p>\n<hr>\n<h2 style=\"text-align: center;\">Czytaj r\u00f3wnie\u017c:<\/h2>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/hacki-do-wordpressa\/jak-szybko-dodac-skrypt-jquery-do-wordpressa\/\" target=\"_blank\">Jak szybko doda\u0107 skrypt jQuery do WordPressa<\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/darmowe-rzeczy\/wtyczki-jquery-dla-karuzeli-tresci\/\" target=\"_blank\">43 Wtyczki jQuery do prezentacji tre\u015bci w Karuzeli<\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/tutorial\/przycisku-powrot-do-gory-w-css-jquery\/\" target=\"_blank\">Tworzenie przycisku \"Powr\u00f3t do g\u00f3ry\" za pomoc\u0105 CSS i jQuery<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pierwsze kroki Okienko udost\u0119pniania media spo\u0142ecznych Animowanie w jQuery Projektowanie w CSS Podsumowanie Media spo\u0142eczne to wielka sprawa dla prawie ka\u017cdej firmy. Przy odpowiednim brandingu mo\u017cna w\u0142\u0105czy\u0107 konto medi\u00f3w spo\u0142eczno\u015bciowych do ogromnych aktyw\u00f3w rynkowych. Dlatego du\u017ce firmy takie jak Facebook mog\u0105 przyci\u0105gn\u0105\u0107 tak wielu inwestor\u00f3w - bo ludzie chc\u0105 pod\u0142\u0105czy\u0107 i udost\u0119pnia\u0107 informacje cyfrowo. Ale [&hellip;]<\/p>\n","protected":false},"author":2098093,"featured_media":108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[25,26],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery<\/title>\n<meta name=\"description\" content=\"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.\" \/>\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\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery\" \/>\n<meta property=\"og:description\" content=\"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-08T08:49:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-01T07:12:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/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=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Tutorial: Pojawiaj\u0105ce Si\u0119 Okienko Udost\u0119pniania Media Spo\u0142ecznych Z jQuery\",\"datePublished\":\"2015-01-08T08:49:15+00:00\",\"dateModified\":\"2020-04-01T07:12:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\"},\"wordCount\":1009,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"HTML5\",\"Media spo\u0142eczno\u015bciowe\"],\"articleSection\":[\"Tutoriale\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\",\"name\":\"Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2015-01-08T08:49:15+00:00\",\"dateModified\":\"2020-04-01T07:12:42+00:00\",\"description\":\"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Pojawiaj\u0105ce Si\u0119 Okienko Udost\u0119pniania Media Spo\u0142ecznych Z jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?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\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery","description":"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.","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\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/","og_locale":"pl_PL","og_type":"article","og_title":"Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery","og_description":"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.","og_url":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2015-01-08T08:49:15+00:00","article_modified_time":"2020-04-01T07:12:42+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/01\/social-media-sharing-popup-bubble.jpg","type":"image\/jpeg"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"7 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Tutorial: Pojawiaj\u0105ce Si\u0119 Okienko Udost\u0119pniania Media Spo\u0142ecznych Z jQuery","datePublished":"2015-01-08T08:49:15+00:00","dateModified":"2020-04-01T07:12:42+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/"},"wordCount":1009,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["HTML5","Media spo\u0142eczno\u015bciowe"],"articleSection":["Tutoriale"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/","url":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/","name":"Pojawiaj\u0105ce Si\u0119 Okienko Media Spo\u0142ecznych Z jQuery","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2015-01-08T08:49:15+00:00","dateModified":"2020-04-01T07:12:42+00:00","description":"W tym tutorialu chcia\u0142abym pokaza\u0107, jak stworzy\u0107 pojawiaj\u0105ce si\u0119 okienko z wid\u017cetami media spolecznych. Okienko jest wy\u015bwietlane za po\u015brednictwem jQuery.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/tutorial-pojawiajace-sie-okienko-udostepniania-media-spolecznych-z-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Pojawiaj\u0105ce Si\u0119 Okienko Udost\u0119pniania Media Spo\u0142ecznych Z jQuery"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?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\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/107"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":11,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":12411,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/107\/revisions\/12411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/108"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}