Gumagawa ng sarili naming mga button sa pagbabahagi gamit ang mga counter. Mga pindutan ng social media

hello, mahal na mga mambabasa blog site. Tulad ng malamang na nahulaan mo na mula sa pamagat, pag-uusapan natin ang tungkol sa tinatawag na mga social button, na maaaring seryosong makakatulong sa pag-akit ng mga artikulo sa iyong website, na may matagumpay na kumbinasyon ng mga pangyayari at mataas na kalidad ang artikulo mismo, isang malaking bilang ng mga bisita mula sa mga social network at serbisyo.

Ang mga social signal ay isinasaalang-alang din mga search engine kapag niraranggo ang iyong site. Malaking dami pagbabahagi sa mga de-kalidad na account sa Twitter, Google+, Facebook (posible na ang VKontakte at iba pang mga network ay isinasaalang-alang din) ay maaaring magpapahintulot sa iyo na tumaas sa tiyak na numero mas mataas na mga hakbang at, marahil, pumasok sa Tuktok at manatili doon kung salik sa pag-uugali hindi ka pababayaan.

Sa pangkalahatan, ang mga serbisyong nagbibigay ng mga script (mga button) para sa pagbabahagi ng nilalaman sa social media marami sa Internet, ngunit hindi lahat ng mga ito ay dapat pagkatiwalaan (madali ka nilang magamit o sa ibang paraan para sa masamang dahilan). At sila ay may kakayahang "pagbitin ng isang site" kung ang kanilang code ay hindi napakahusay na nailagay at ang mga kakayahan sa pag-compute ng kanilang mga server ay hindi masyadong malakas. Bagaman may mga disenteng opsyon na libre mula sa mga pagkukulang na ito, at inilista ko ang mga ito sa dulo ng publikasyong ito.

Posible rin na ipakita sa mga pindutan ang bilang ng mga pagbabahagi sa isang partikular na social network. Bukod dito, ang lahat ng mga post ay isinasaalang-alang, at hindi lamang ang mga ginawa gamit ang block na ito (ang data ay na-load sa pamamagitan ng API). Totoo, hindi lahat ng mga social network ay suportado (tanging facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), ngunit karamihan sa mga pangunahing. Nakalulungkot na kamakailang tinanggal ang Twitter sa listahang ito dahil... huminto ito sa pagbibigay ng data na ito sa pamamagitan ng API.

Halimbawa, dito maaari mong paikliin ang mga pamagat para sa pagbabahagi sa Twitter, dahil may limitasyon ang haba ng mga ito (basahin kung paano gawin ito sa ibaba), i-configure kung ipapakita o hindi ang mga pagbabahagi ng counter, itakda ang mga direksyon sa pagbubukas ng menu na may karagdagang mga pindutan mga social network at marami pang iba. Sa pangkalahatan, maghukay sa paligid at tingnan.

Sa pangkalahatan, kung ihahambing sa mga pindutan ng katutubong pagbabahagi, na nag-aalok ng pag-install ng mga social network sa site (basahin ang tungkol dito sa ibaba), ang bloke ng Yandex ay nanalo sa bilis ng pag-load, pagiging compact at kadalian ng pag-install at pagsasaayos. Halimbawa, sa nakaraan ang aking opisyal na pindutan sa Twitter ay madalas na hindi naglo-load dahil sa mga problema sa kanilang server, kaya ang script na ginawa sa Java ay hindi naglo-load nang mahabang panahon kaliwang menu aking blog. Posible na ang problemang ito ay nalutas na, ngunit maraming mga script ang palaging magiging mas masahol kaysa sa isa sa mga tuntunin ng pag-optimize ng bilis ng pag-load ng site.

Sa tingin ko ang Yandex ay malamang na hindi magkaroon ng mga problema sa accessibility, dahil ito ay isang magandang kita komersyal na organisasyon, medyo sensitibo sa kanyang imahe. Bilang karagdagan, kung mayroon ka, maaari mong subaybayan ang mga istatistika ng mga pag-click sa mga button na ito, na maaaring maging kapaki-pakinabang.

Bilang karagdagan sa isang bloke na may regular na laki ng mga icon, maaari kang gumawa ng isang bloke na may mga counter, at nagmumungkahi din ang Yandex na magdagdag ng isang drop-down na menu na may karagdagang mga social network, na itatago sa ilalim ng isang spoiler na matatagpuan pagkatapos ipakita ang kinakailangang bilang ng mga pindutan para sa ang pangunahing mga social network (tulad ng VKontakte, MoiMir, ):

Kung gusto mong magdagdag ng mga counter sa mga button sa block na ito (na may drop-down na menu), magpasok lang ng isa pang attribute sa code nito sa site (sa pagitan ng mga Div tag): data-counter="“ at iyon na. Tulad ng sinabi ko, hindi ito maaaring maging mas simple. Maaari kang gumamit ng mga counter ay idaragdag din sa mga maliliit na pindutan, na tinatalakay sa ibaba.

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

Maaari mo ring palitan ang lahat ng mga icon ng kanilang mas maliit na mga thumbnail ng button, na personal kong nakitang kapaki-pakinabang kapag nagpasok ng isang bloke sa tuktok na bahagi lahat ng mga artikulo sa blog na ito:

Sa unang bahagi, ang pagbubukas at pagsasara ng mga tag ng SCRIPT ay naglalaman ng landas patungo sa script, na ilo-load mula sa server ng Yandex, at ang pangalawang bahagi ay naglalaman ng insertion code mismo, na kakailanganing ilagay sa lugar sa iyong template kung saan ang bloke na ito ay ipapakita.

Paano magpasok ng mga social button mula sa Yandex sa isang website

Samakatuwid, inilalagay ko ang code sa pagtawag ng script kasama ang Div block sa lugar kung saan kailangang ipakita ang mga button ng social media. Kaya, upang ang paglo-load nito ay hindi makakaapekto sa bilis ng paglo-load ng pangunahing pahina, ako, kasunod ng payo na ibinigay sa dokumentasyon ng Yandex, ay nagdagdag ng async="async" na katangian dito, sa gayon ay sinimulan ito asynchronous na paglo-load script:

Maaaring lumitaw ang problema sa paghahanap sa maraming mga file ng engine ng iyong site ang isa na responsable para sa pagbuo ng pinakailalim na bahagi HTML code na may pansarang tag na /BODY o ang bumubuo sa Ulo. At maghanap din ng lugar sa mga file ng tema kung saan kailangan mong magpasok ng isang piraso ng code Mga tag ng div(upang ilagay ang mga pindutan sa kanilang sarili).

Sa prinsipyo, pareho sa WordPress at sa Joomla, ito ay ginagawa sa isa sa mga file ng tema na ginamit. kasi Gumagana ang blog na ito sa WordPress, kaya magsasalita ako para dito.

Kung nagtatrabaho ka sa WordPress, pagkatapos ay upang ipasok ang code para sa pagtawag sa script ay kailangan mong buksan ang footer.php file para sa pag-edit (makikita mo ang pansarang Body tag o header.php (makikita mo ito doon) Mga tag ng ulo) mula sa folder:

/wp-content/themes/pangalan ng folder_with_theme_used/footer.php

Ngayon ang natitira na lang ay ipasok ang pangalawang bahagi ng code sa tamang lugar sa template ng iyong website o direkta sa artikulo mga social button Yandex, na responsable para sa lokasyon ng block na may mga pindutan sa mga pahina ng site:

Sa pamamagitan ng paraan, gagawa ako muli ng reserbasyon: kung nais mong alisin ang anumang pindutan mula sa bloke na ito, hindi mo na kailangang pumunta muli sa tagabuo sa website ng Yandex. Maaari mo lamang alisin ang entry nito mula sa listahang ito (kasama ang kuwit na kasunod nito, halimbawa, "vkontakte,"). Well, naiintindihan mo...

Kaya, maaari mo ring baguhin ang pagpoposisyon ng mga pindutan sa loob ng bloke gamit ang CSS.

Li.ya-share2__item (background:none!important;padding:0 7px 0 7px!important;)

kasi Gumagamit ako ng adaptive sa ilalim mga mobile device layout, pagkatapos ay para sa mga device na may mababang resolution ng screen nagdagdag ako ng katulad na linya, kung saan nagtakda ako ng bahagyang mas maliliit na indent, ngunit ito ang mga detalye:

Li.ya-share2__item (padding:0 3px 0 3px!important;)

Sa pangkalahatan, ang isang bagay na tulad nito ay ang kaso pagdating sa aking WordPress blog. Sa Joomla, upang maipasok ang block na ito, malamang na pinakamadaling gamitin ang module ng Custom na Html Code, na inilalagay ito sa posisyon ng template sa isang lugar sa ibaba mismo ng teksto ng artikulo.

Opisyal na mga pindutan ng social media

Maraming mga social network mismo ang nagbibigay sa lahat ng pagkakataon na i-download ang code ng pindutan, at madalas na maaari mo ring i-customize ang hitsura at pag-andar nito. Halimbawa, maaari mong i-configure at matanggap ang script code para sa pagbabahagi ng post sa .

Tulad ng nakikita mo, medyo maraming mga setting, at bilang karagdagan sa hitsura ng pindutan ng VKontakte, maaari mo ring i-configure ang pagpapakita ng isang counter na nagpapakita ng bilang ng mga pagbabahagi.

Makakakuha ka ng Facebook button. Ito ay napaka-flexible na na-customize upang umangkop sa iyong mga pangangailangan, at huwag malito sa mga English na inskripsiyon dito, dahil kapag inilagay mo ang code nito sa iyong website, ang mga inskripsiyon ay awtomatikong isasalin sa Russian.

Mas mainam na huwag magpasok ng anuman sa patlang ng URL, pagkatapos ay ibabahagi ang pahina kung saan matatagpuan ang code na ito.

Magiging ganito ang hitsura nito:

Magiging ganito ang hitsura nito:

At, siyempre, hindi ko maiwasang banggitin ang opisyal na pindutan ng Twitter, na lumitaw kamakailan. Matatagpuan ang constructor nito. Naturally, nagbibigay ito ng kakayahang bilangin ang bilang ng mga retweet at magkakaroon ka ng pagkakataong itakda ang hitsura nito:

Pagkatapos ay bahagyang na-moderno ko ang resultang code ayon sa prinsipyong inilarawan sa itaas, upang ang aking mahahabang pamagat ay maputol at hindi lumikha ng mga karagdagang problema para sa mga gumagamit kapag nagbabahagi.

Iba pang mga opsyon para sa pagkuha ng mga button ng social media para sa iyong website

Gaya ng nasabi ko na, marami sa lahat ng uri ng online na serbisyo kung saan maaari kang kumuha ng script para sa mga pindutan ng social network nang libre at ilagay ito sa iyong website. Lahat sila ay nagtataguyod ng iba't ibang layunin: "mula sa puso" (tulad ng sa kaso ng serbisyo ng Dimoxa), upang mangolekta ng data na kinakailangan para sa pagpapatakbo ng iba pang mga serbisyo (tulad ng sa kaso ng ApTuLike) o para sa kita (mga virus at iba pang ilegal na pandaraya na may ang trapiko na mayroon ka sa iyong site) . Mayroon ding mga simpleng bayad na solusyon, halimbawa, tulad ng plugin na binanggit sa ibaba.

Mahirap sabihin kung ano ang pipiliin mula sa iba't-ibang ito. Magsasabi ako ng ilang mga salita tungkol sa kung ano ang nagkaroon ako ng pagkakataong subukan ang aking sarili, at kung ano ang naisulat ko na tungkol sa dati.

Sa pangkalahatan, tumingin, ihambing at pumili para sa iyong sarili.

Good luck sa iyo! Magkita-kita tayo sa mga pahina ng blog site

Maaari kang manood ng higit pang mga video sa pamamagitan ng pagpunta sa ");">

Baka interesado ka

Gumagawa kami ng mga button para sa pagdaragdag sa mga social network at mga bookmark para sa isang WordPress blog (nang walang mga plugin at script) Malamang - mga stand-alone na social button para sa site
Mga pindutan para sa mga mobile site mula sa Uptolike + ang kakayahang magbahagi ng mga link sa mga messenger UpToLike - isang tagabuo ng social button para sa iyong site na may pinalawak na pagpapagana

Mga kalamangan:

Pluso XExperimental na bersyon ng Share Pluso social button constructor. Pinahusay nito ang disenyo ng mga icon, isang pop-up na window na may buong listahan ng mga magagamit na social network, at ang nakakainis na orange na pindutan na may "+" na sign ay binago din sa lugar nito ay ang parehong plus sign, ngunit sa isang mas kaaya-ayang disenyo.
Ayon sa mga developer, ang mga bagong social button ay idinisenyo para sa Retina monitor. Ang lahat ng iba pa, sa unang tingin, ay nananatiling pareho. Sa kasamaang palad, sa taga-disenyo, kabilang sa mga magagamit na pagpipilian, hindi ako nakakita ng mga pindutan na may isang counter, kahit na ang karaniwang edisyon ng Pluso ay mayroon sila.
Hindi ko alam kung papalitan nila ang luma ng isang bagong constructor, ngunit sa ngayon, parehong gumagana nang sabay-sabay gamit ang iba't ibang mga link.

Add ThisAdd Ito ay isang serbisyong nagbibigay ng mataas na kalidad, naka-istilo at nababaluktot na mga social button. Ang mapagkukunang ito ang nangunguna sa Kanluran. Hindi gaanong sikat dito, ngunit madalas akong nakakatagpo ng mga site sa wikang Ruso na may widget na Add This.
Mayroong bayad at libreng mga widget. Tanging ang pinakasimpleng mga pagpipilian ay magagamit sa libreng account. Ang bayad na bersyon ay may maraming iba pang mga konsepto ng disenyo na magagamit, tulad ng: adaptive na mga pindutan, mga pindutan na may iba't ibang mga counter at marami pang iba.
Sa palagay ko ang pagpipiliang ito ay hindi angkop para sa aming mga tao, dahil kailangan mong magbayad para sa mga kampanilya at sipol, ngunit sa domestic market maaari mong mahanap ang lahat ng parehong bagay, ngunit libre.
Ang Add This constructor ay may malaking listahan ng magagamit na mga social network, kabilang ang Vkontakte, Moi Mir at Odnoklassniki.

Mayroong isang plugin para sa .
Good Share Magaan at magagandang share button para sa iyong website na may maliit na embed code, na talagang kaakit-akit. Sa kasamaang palad, mayroon lamang isang pagpipilian sa disenyo na may maraming mga scheme ng kulay. Mayroong lahat ng mga sikat na social network sa RuNet
Ayon sa mga developer, ang kanilang ideya ay na-optimize at ang mga search engine ay magugustuhan ang iyong site. Hindi ko alam kung gaano kalaki ang katotohanan dito.

Kung hindi mo kailangan ng anumang mga bell at whistles, ang opsyon na ito ay para sa iyo.
Shareaholic Isang napaka-kagiliw-giliw na serbisyo sa Kanluran para sa paglikha ng mga social button, na natuklasan ko kamakailan.

Nag-aalok ang Shareaholic ng ilang bagong konsepto ng share button. Sa personal, nagustuhan ko ang arrow sa itaas ng mga pindutan (ang mga arrow ay isang napakalakas na tool sa marketing), ngunit, sa kasamaang-palad, ang inskripsyon ay nasa Ingles, kaya hindi ito angkop para sa ating mga tao. Kabilang sa mga magagamit na social network ay ang VKontakte.

Kumusta, mahal na mga kaibigan. Ang artikulo sa araw na ito ay nakatuon sa paglikha ng isang bloke ng mga social button na walang mga serbisyo at plugin. Ang block na ito ay magsasama rin ng mga button na nagpapahintulot sa mga bisita ng site na i-print ang pahina, ipadala ang link ng artikulo sa pamamagitan ng email, at i-bookmark ang iyong artikulo. Ang ganitong mga pindutan ay matatagpuan sa halos bawat website ngayon. Ngayon lang sila ipinatupad gamit ang mga serbisyo o plugin. At ipapakita ko sa iyo kung paano gawin ito sa iyong sarili.

Mga serbisyong ginamit ko sa mga site ng kliyente at sa aking blog - at . Pinapadali ng mga serbisyong ito ang pagpapatupad ng gawain.
  • Ano ang bentahe ng sariling mga social button kaysa sa mga serbisyo at plugin?
  • At sa block na ito ay ginagamit lamang ang mga kinakailangang larawan ng mga social button, pinagsama sa . Ang lahat ng mga estilo ay pinananatiling minimum. Dagdag pa ng isang simpleng html framework.

  • Ang pamamaraang iminumungkahi ko ay hindi naglalaman ng anumang mga panlabas na link. Hindi, may mga link, ngunit lahat sila ay magiging parang mga panloob na link. Maaari mong palaging gamitin ang mga ito kung nais mo. At pagkatapos ay hindi sila makikita sa lahat.
  • Napakadaling pag-install. Ito ay sapat na upang ipasok ang html code ng block sa source code ng pahina ng site, i-upload ang sprite, magdagdag ng mga estilo ng css at kumpleto na ang pag-install. Kailangan mo lang iwasto ang landas patungo sa file gamit ang mga imahe ng button.
  • Ang puntong ito ay hindi isang plus o isang minus sa direksyon ng iyong sariling bloke ng mga social button. Ang lansihin ay ang sarili nitong bloke ay walang button press counter. At ito ay maaaring ituring na isang minus. Ngunit, sa kabilang banda, posible na ilagay sa bawat pindutan at malalaman mo nang eksakto kung gaano karaming beses na nag-click ang iyong mga bisita sa mga pindutan at ibinahagi ang iyong mga artikulo sa mga social network.
  • Ang mga istatistikang nakolekta ng mga serbisyo sa iyong site ay hindi na ililipat sa mga third party.
  • Ang pagpasok ng isang bloke ng mga social button sa source code

    Isasaalang-alang namin ang klasikong opsyon, kapag ang mga pindutan ay matatagpuan pagkatapos ng artikulo.

    Magagawa ito alinman sa pamamagitan ng pagbubukas ng file na responsable para sa pag-output ng mga artikulo (single.php) at pagdaragdag ng isang bloke ng mga social button sa source code. Bilang kahalili, maaari itong gawin sa pamamagitan ng function file ng tema (functions.php).

    Ipapakita ko ang parehong mga pagpipilian, at piliin mo ang isa na nababagay sa iyo.

    Paglalagay ng block sa single.php source code

    Babala: Bago simulan ang anumang aksyon, gumawa ng backup na kopya ng single.php file!

    Buksan ang WordPress administrative panel – “Appearance” – “Editor” – “Single entry (single.php)”.

    Sa source code, hanapin ang lugar kung saan nagtatapos ang output ng artikulo at nagsisimula ang mga komento o page navigation. Sa lugar na ito kakailanganin mong ipasok ang html code para sa bloke ng mga social button.

    Tingnang mabuti ang screenshot, tumuon sa mga code na responsable sa pagpapakita ng artikulo at mga komento. At i-paste ang code sa ibaba.

    Siyempre, magkakaroon ng ilang mga pagkakaiba sa iyong mga template, ngunit sigurado akong malalaman mo ito, walang kumplikado tungkol dito. At bukod sa, mayroon kang isang backup na kopya, walang dapat ikatakot.

    At narito ang html code para sa block ng mga social button:

    ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg">. Ang bawat link ay may sariling klase, kung saan itinalaga ang imahe ng button.

    Kinukumpleto nito ang pagpasok sa pamamagitan ng source code. At pagkatapos ay kailangan mong ikonekta ang mga estilo ng css.

    Paglalagay ng block sa single.php source code sa pamamagitan ng mga function ng tema

    Babala: bago simulan ang trabaho, gumawa ng backup na kopya ng iyong functions.php file!

    Upang magamit ang opsyong ito, kailangan mong buksan ang functions.php file at idagdag ang code na ito sa pinakadulo:

    /* Paglalagay ng mga social button */ add_action("comments_template","soc_button"); function soc_button() ( ?> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg">. Kung hindi, ang site ay hihinto sa paggana.

    Mga paliwanag sa code: ang lugar kung saan ipapakita ang mga button ng social network ay tinutukoy sa pamamagitan ng API key comments_template. Tinutukoy ng key na ito ang lugar bago ang mga komento. Ang social button code mismo ay nakapaloob sa php opening at closing return tags. Sa code ay minarkahan ko sila ng pula. Ito ang buong lansihin ng pagpasok ng html code sa php, sa pamamagitan ng mga function ng tema.

    Kinukumpleto nito ang pamamaraan; magpatuloy tayo sa pag-upload ng mga larawan sa site.

    Pag-upload ng mga imahe ng button sa server

    Halimbawa, naghanda ako ng ilang sprite na may mga larawan ng mga social button. Maaari mong i-download ang mga ito.

    Ang sprite na ginagamit ko bilang isang halimbawa ay 3.97 kb lamang at naglalaman lamang ng mga kinakailangang pindutan. At dahil ito ay isang sprite, pagkatapos ay mayroon lamang isang kahilingan sa database, at hindi para sa bawat pindutan nang hiwalay.

    Mag-download ng mga larawan o maghanda ng iyong sarili at i-upload ang mga ito sa iyong website. Sa tingin ko ay hindi dapat magkaroon ng anumang problema dito. Susunod, kakailanganin ang isang link sa sprite na ito upang idisenyo ang mga pindutan gamit ang mga estilo ng css.

    Pagkonekta ng mga istilo ng CSS

    Siyempre, ang hakbang na ito ay maaaring makumpleto muna, ngunit mas gusto kong gawin muna ang lahat ng kumplikadong teknikal na gawain, at pagkatapos lamang simulan ang magagandang maliliit na bagay gamit ang mga estilo ng css.

    Kaya, buksan ang style.css file, na responsable para sa disenyo ng iyong site. At ipasok ang mga istilong ito:

    Magbahagi ng ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") no-repeat scroll -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") walang-uulit na scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test..png") no-repeat scroll -546px 0px transparent ) .share a.digg ( background: url("http://test..png") no-repeat scroll - 588px 0px transparent; ) .share a.spring ( background: url("http://test..png") walang-uulit na scroll -630px 0px transparent; )

    Mga paliwanag sa code: ang klase ng the.share ay tumutukoy sa pangkalahatang hitsura ng block, ang laki ng bawat button, nag-indent at nagtatakda ng isang background. At pagkatapos ang bawat link ay may sariling klase at ang bawat link na iyon ay itinalaga ng uri ng button sa pamamagitan ng background property. Ang mga button ay ginawa bilang CSS sprite, at ang bawat button ay may lapad at taas na 40px, at may margin na 2px sa pagitan ng mga ito, na nagbibigay-daan sa iyong tumpak na matukoy ang imahe para sa bawat button. Iyon ay, ang unang pindutan ay ipinahiwatig bilang 0, at ang pangalawa bilang 42, at iba pa. Sa code, ang mga halagang ito ay ipinahiwatig sa orange. Ang link sa sprite ay naka-highlight din sa orange;

    Kinukumpleto nito ang buong proseso ng paglikha ng iyong sariling bloke ng mga social button. Maaari kang ligtas na magpatuloy sa pagsuri.

    Mayroon din akong video tutorial kung saan malinaw na ipinapakita ang buong proseso, kasama ang pagpapatakbo ng mga button mismo. Panoorin at ipatupad sa iyong mga website at blog.


    Iyan na ngayon. Kinaya ko ang gawain. Nais ko kayong lahat na good luck at makita ka sa mga bagong artikulo at video tutorial.

    Narito ang pariralang "Sino ang gustong bumili ng software na may 8% na diskwento sa promosyon?" isinulat mismo ng gumagamit, at sa ibaba ay kung ano ang hitsura ng link sa site sa social network. Hindi masyadong maganda, tama?


    pagkatapos ang link sa social network ay magiging ganito:

    Narito ang "Ngayon ay ang kaarawan ng allsoft.ru - 8 taon :)" ay ang teksto na isinulat ng gumagamit, ang natitira ay impormasyon mula sa mga meta tag. Maaari kang magbasa nang higit pa tungkol sa mga meta tag na ito sa pahina ng Facebook developers.facebook.com/docs/share, naiintindihan din sila ng ibang mga social network.

    Paano karaniwang gumagana ang mekanismong ito:
    1. Kapag nag-click ang user sa button, ang widget ay nagpapadala ng link sa page sa social network server.
    2. Social server Ang network mismo ay nag-a-access sa link na ito at nagbabasa ng impormasyon tungkol sa pahina - pamagat, paglalarawan, larawan.
    3. Social server ini-cache ng network ang impormasyon ng pahina sa gilid nito at ipinapakita ito sa mga pahina ng social network

    Paano magpadala ng iba't ibang paglalarawan para sa isang pahina.
    Halimbawa, kapag lumilikha ng isang pahinang pang-promosyon sa allsoft.ru na may isang nakakatawang pagsubok, kinakailangan na magpadala ng iba't ibang mga paglalarawan sa mga social network para sa iba't ibang bilang ng mga puntos na nakuha ng user sa pagsubok. Dahil ang social network ay tumatanggap ng isang paglalarawan ng isang pahina sa pamamagitan ng pag-click sa isang link, iba't ibang mga link ang kailangan para sa iba't ibang mga paglalarawan. Bukod pa rito, pinapayagan lang ng Twitter ang 140 character, kaya kailangan nito ng hiwalay, mas maikling paglalarawan.

    Bagong Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( title: "Resulta ng pagsubok: The Dragon is almost your strong point! Hindi mo pa maituturo ang Dragonology, pero sa tamang daan!" ))));
    1. Narito ang ya_share_normal ay ang id ng elemento sa page (), kung saan lalabas ang block na may mga social button, link ang link, at sa serviceSpecific para sa Twitter ipinapahiwatig namin ang pamagat, na naiiba sa kung ano ang nasa og: pamagat ng meta tag.

    Kaya, para sa gawaing "3 magkakaibang resulta ng pagsubok kasama ang isang karaniwang link sa isang pahina sa labas ng pagsubok" magkakaroon kami ng 4 na tag:

    at 4 na bloke ng JavaScript code tulad ng nasa itaas.

    Paano baguhin ang pamagat at paglalarawan na naka-cache ng social network.
    1. Mayroong pinakamahusay na paraan para sa Facebook: pumunta sa kanilang debugger