Isang script ng magagandang mga pindutan ng social media. Pagmamay-ari ng mga social button. Ang pag-upload ng mga imahe ng pindutan sa server

Ngunit ang script na ito ay may isang sagabal - isang script na naghawak sa pag-uugali ng browser nang na-click ang isa sa mga pindutan. Narito ang isang bahagi nito, kung saan ikaw mismo ay madaling makakita ng dalawang problema:

Vkontakte: function (purl, ptitle, pimg, text) (url = "http://vkontakte.ru/share.php?"; Url + = "url =" + encodeURIComponent (purl); url + = "& title = "(! LANG: + encodeURIComponent (ptitle); url + ="&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Ang unang problema ay maliit at maraming maaaring sabihin sa akin, "Hoy, dude sinulat ito noong 2012! Baguhin mo lang ang linya at iyan na. ” At sang-ayon ako sa iyo na maaari ka lang magbagovkontakte.ru sa vk.com at isara lamang ang tanong.

Pangalawa, ang isang bagong bloke ay kailangang isulat para sa bawat serbisyo. Alin din ang hindi masyadong may problemang gawin, kopyahin lamang at alisin / idagdag ang mga kinakailangang parameter.

Ngunit ano ang ginagawa ng script na ito sa huli? Lumilikha lamang ito ng isang pop-up window na pumasa sa nakalistang mga parameter. Ito ang mga linya:

Popup: function (url) (window.open (url, "", "toolbar = 0, status = 0, width = 626, taas = 436");)

Ito ang tiyak na gawain ng script na ito na medyo binago ko. Ngunit higit pa sa ibaba. Tingnan natin ang mga pindutan mismo at kung paano ito gumagana.

Una, kailangan naming magkaroon ng ilang mga variable para sa mga pindutan ng pagbabahagi:

• $ Pamagat- Pamagat (pamagat) ng pahina
• $ Paglalarawan- Paglalarawan ng pahina
• $ ImageUrl - path sa imahe ng pahina
• $ Link - direktang link sa pahina

Pinangalanan ko sila ayon sa kombensyonal upang malinaw na malinaw kung ilan sa kanila ang kinakailangan at kung ano sila. Kung paano sila dadalhin sa iyong site - manu-mano o awtomatiko - nakasalalay lamang sa application kung saan ito isasagawa. Halimbawa, sa isang WordPress CMS ganito ang hitsura:

• $ Pamagat- ito ay
• $ Paglalarawan —
• $ ImageUrl —
• $ Link —

Ngayon, sa lugar na kailangan namin, inilalagay namin ang sumusunod na code, kung saan bilang kapalit ng mga variable ay pinapalitan namin ang mga kinakailangang halaga (kung kinakailangan):

Yun lang! Maaari mong makita ang resulta ng trabaho sa pagtatapos ng artikulong ito.

Pagsusuri ng mga domestic designer at script ng mga pindutan ng social media para sa mga website, pati na rin mga banyagang analogue. Sa madaling sabi, naiintindihan at malinaw.

Mga taga-disenyo ng pindutan ng social media para sa website

2. Isang madaling paraan upang makakuha ng mga link sa site - QIP.RU
Ilagay ang pindutan sa site at bigyan ang mga bisita ng pagkakataong magdagdag ng kanilang mga paboritong materyales sa site sa mga bookmark, blog at mga social network. Tatlong hakbang: kung saan markahan ang pindutan (site, Blogger o WordPress), estilo ng mga pindutan (mga pagpipilian na handa nang gawin) at kunin ang pindutan.

3. Mga Pindutan para sa pagdaragdag ng nilalaman sa mga social network - Pluso
Ilagay ang mga pindutan at bigyan ang mga bisita ng pagkakataon na ibahagi ang mga pahinang gusto nila sa mga social network, pati na rin ang pag-print, magpadala ng isang email at magdagdag ng mga bookmark.

4. Serbisyo ng aktibidad na panlipunan - UpToLike
Pasadyang mga pindutan ng social media na may kakayahang magtakda ng kulay, hugis, laki at mga espesyal na epekto. Ang mga karagdagang tampok ay ang widget ng pagbabahagi ng larawan sa PicShare, ang pagpapaandar na "Quote" at ang na-customize na Sumusunod na pag-andar.

5. Isang pindutan! - para sa lahat ng mga serbisyo ng mga bookmark at mga social network
Piliin ang pindutan ng uri. Kung saan mai-install ang pindutan: website, Blogger o WordPress. Magdagdag ng isang pindutan.

Mga script ng mga pindutan ng social media para sa site

1. Magagandang mga social button para sa site - goodshare.js
Ipakita ang mga pindutan sa halos anumang aparato. Malinis na code. Maikling dokumentasyon. SEO friendly.

2. Mga pindutan ng script para sa mga social bookmark at network - Share42
Piliin ang laki at markahan ang mga icon ng mga serbisyong nais mong gamitin sa site. Piliin ang mga pagpipilian na gusto mo. Tingnan kung paano ito magmumukhang at / o mag-download ng isang handa nang script. I-install ang script sa iyong WordPress site, Drupal, atbp.

3. Magagandang social media tulad ng mga pindutan na gumagamit ng jQuery - Mga Gusto ng Panlipunan
Isang script ng mga pindutang "tulad" na may mga counter sa parehong estilo para sa mga social network: Facebook, Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ at Pinterest.

Mga banyagang analogue ng mga pindutan ng social media para sa isang website

1. Ibahagi ang Mga Pindutan - AddThis
Ang mga pindutan ng pagbabahagi ay makakatulong sa iyo na taasan ang madla ng iyong site sa pamamagitan ng pag-akit ng mga bisita mula sa iba pang mga mapagkukunan at mga social network, sa pamamagitan ng ipinamahaging nilalaman.

4. Pagbabahagi ng Panlipunan - Po.st
Kumuha ng mas maraming halaga mula sa pagbabahagi ng social media. Papadaliin ng serbisyo ang proseso ng pagbabahagi sa mga social network para sa mga bisita, na magpapataas sa organikong trapiko ng site.

5. Ibahagi ang Mga Pindutan para sa Anumang Website - AddToAny
Kunin ang code ng mga pindutan ng social media para sa anumang website. Piliin ang uri ng uri at istilo, tukuyin ang email at iba pang mga pagpipilian, o pumili ng isa sa mga platform: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad, o FeedFlare. Kunin ang code ng pindutan.

Kamakailan lamang, bawat segundo (kung hindi ang una) customer sa mga kinakailangan para sa pagpapaunlad ng site ay nagtanong na siguraduhing maiugnay ito sa mga social network. Ang mga pindutan na "panlipunan" sa site ay ang tool na bilang 1 para sa akit ng target na madla, pamamahagi ng nilalaman at PR sa pangkalahatan. At ito ay libre!

Nagbibigay ang mga social network ng mga code para sa kanilang mga pindutan at widget para sa pagkakalagay sa site, at naglalakip ng mga tagubilin para sa pag-install ng mga ito sa system ng pamamahala ng nilalaman. Ang anumang CMS (operating system) ay nagbibigay-daan sa iyo upang mai-install ang mga ito, ang pangunahing bagay ay upang magkatugma na magkasya ang mga ito sa disenyo ng iyong site.

Ano ang mga tampok at pag-andar?

Kung ang iyong site ay nakatuon sa mga taong nakikipag-usap sa sikat na panlipunan. mga network, halimbawa, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, atbp. at nais mong takpan ang lahat ng mga ito, upang hindi maitakda nang magkahiwalay ang mga pindutan para sa bawat isa sa kanila, na ibinigay na maaaring magkakaiba ang laki at disenyo, inirerekumenda namin ang paggamit ng mga serbisyo ng pagsasama-sama. Ito ang mga simple at maginhawang tool na magbibigay-daan sa mga bisita sa site na mabilis na magbahagi ng impormasyon sa kanilang mga kaibigan, anuman ang aling social network na ginagamit nila. Sa ibaba ay susuriin namin ang pinakatanyag na mga serbisyo.

Mga Pindutan ng Social Media Ibahagi ang Pluso

"Bakit kailangan siya?" - tinatanong mo. Marahil, sinusubukan kong makisabay sa mga oras - nahuhuli tayo sa burgesya, at ang kanilang promosyon sa site ay medyo naiiba mula sa aming kasalukuyang katotohanan.

Kung titingnan mo ang mga blog sa burzhunet, kung gayon halos lahat sa kanila ay may iba't ibang mga lumulutang na panel na nagbibigay-daan sa iyo upang magdagdag ng isang anunsyo ng artikulo sa pinakatanyag na mga social network at bookmark. Medyo mahirap para sa burges na umasenso sa pamamagitan ng pagbili ng mga link at ang kahalagahan ng mga social signal ay nagsimulang lumaki nang hindi kapani-paniwala.

Pinapayagan ka ng panel na dagdagan ang bilang ng mga pagbabahagi ng mga artikulo, at samakatuwid ay maimpluwensyahan ka. Sa gayon, dahil naghihintay sa atin ang isang bagay na katulad nito, tama na mas maaga tayo sa mga kaganapan.

Bakit kailangan mo ng isang Share42 panel, ang mga pakinabang nito

Nais kong magkaroon ng isang panel na may mga pindutan para sa apat na mga social network, na pinaka-kaugnay sa Russian Internet. Posible na mga signal ng lipunan sa ating bansa ang mga ito ay hindi pa bilang makapangyarihan sa lahat tulad ng kabilang sa burgis dahil hindi pa sila sapat upang magsagawa ng isang kaugnay na seleksyon.

Ngunit mas mahusay na ngayon upang simulan ang pagkolekta ng mga ito at maging ganap na armado kapag ang isang pandaigdigang Armageddian ay dumating sa Runet para sa aming maling pag-unawa - isang makabuluhang pagbaba ng impluwensya at mas mahigpit na parusa para sa pagmamanipula ng link.

Sa pangkalahatan, pagpasok ng iba't ibang mga query sa at Google, habang naghahanap para sa isang naaangkop na bersyon ng panel, natagpuan ko ang website ng Dimox.name, ngunit nang makita ko ang isang magandang panel doon, hindi ko inisip na kinakailangan upang maghanap ng isang paglalarawan ng ang pag-install nito sa mapagkukunan nito.

Alam ko lang na siya mismo ang gumagawa ng mga ganoong bagay (nang walang mga plugin), ngunit ngayon ay talagang hindi ko nais na tuklasin ang mga nuances at setting. Nais kong kumuha ng ilang mga piraso ng code at makakuha ng isang mahusay, mula sa isang aesthetic point of view, at gumaganang bersyon lumulutang na mga pindutan ng social media.

Pagkatapos ay natagpuan ko ang serbisyo ng Share42, at nang makita ko ang parehong mga pindutan ng social media dito, medyo nagulat ako - Gumagamit ng panlililak si Dimox. Ito ay isang uri ng tulad ng isang dalubhasang gumawa ng sapatos sa mga produktong paninda. Gayunpaman, sa pagkakaroon ng rummaged nang kaunti sa net, napag-alaman ko kung saan nagsusulat siya tungkol sa paglulunsad ng isang libreng serbisyo para sa pagpili ng sarili, pagsasaayos at pagkuha ng natapos na script code para sa mga social button.

Pagod na humingi ng tulong sa paglikha ng mga pindutan para sa site, binuksan niya ang isang hiwalay na proyekto, na, sa palagay ko, ngayon ay ang pinakamahusay sa lahat ng mga alok sa merkado. Hayaan mo nalang akong maglista ng mga iyon kalamangan na nakuha ang aking mata:

Ngayon tungkol sa kahinaan:

1. Kailangan mong magkaroon ng kahit isang pangunahing pag-unawa sa at. Sa palagay ko hindi ka agad magmadali upang basahin ang aking mga pahayagan, ngunit inaasahan ko pa rin ang iyong hangarin na gawin ito sa hinaharap (pagkatapos ng lahat, sinubukan ko, isinulat ko, at ang hitsura ng mga artikulong ito ay sanhi lamang ng mabilis na pag-agos ng mga tagasuskribi. - nakakalungkot).

Kakailanganin mo ring isipin kahit paano humigit-kumulang kung paano nakaayos ang ginamit mo. Halimbawa, hindi mo kailangang maghukay sa code - maaari mo itong magamit (kahit na hindi ko ito nasubukan para sa script na ito).

Kung ang mga dehadong dehado ay hindi makabuluhan para sa iyo (o handa ka nang maglakad sa lugar upang maghanap ng katotohanan), at ang mga kalamangan ay makabuluhan, malugod mong mabasa ang artikulong ito nang higit pa. Ano ang tawag - huwag lumipat. Dadalhin kita sa isang napaka-simpleng pag-set up at pagtingin sa nilikha na button ng social media button sa Share42 at kung paano ito mai-install. Huwag akong sisihin, ngunit sa engine na ito gumagana ang aking blog.

Ang pag-configure ng Share42 at pag-install ng script sa site

Itinapon ko ang folder na ito sa direktoryo na may mga plugin ng WordPress, kaya sa ika-apat na hakbang ng wizard, kailangan kong tukuyin ang eksaktong landas na ito:

At kailangan ko ring maglagay ng tick sa harap ng WordPress, dahil ito ang makina na ginagamit ng aking blog. Ang lahat, sa mga setting ng Ibahagi, ay tapos na, nananatili lamang ito upang ipasok ang html at CSS code na iminungkahi sa ikalima at ikaanim na hakbang ng wizard. Sa totoo lang, dito karaniwang lumilitaw ang mga seryosong problema para sa mga hindi sanay na gumagamit.

Tandaan na ang nilalaman ng code na ito ay agad na nagbabago kapag gumawa ka ng mga pagbabago sa iyong mga setting (malinaw na mahusay at kakila-kilabot ang Ajax). Samakatuwid, kapag pumipili ng isang patayong lumulutang na bar, kailangan mong magsingit ng dalawang piraso ng CSS code sa halip na isa (kapag pumipili ng isang pahalang na bar). Ngunit ito ang lahat ng mga detalye, kahit na napakahanga at kaaya-aya (kaluwalhatian kay Dimoks).

Pag-usapan muna natin ang tungkol sa simpleng - pagpasok ng CSS code... Kopyahin ang isang snippet ng panuntunan o dalawa at hanapin ang cascading style sheet na file na ginagamit ng iyong template o balat.

Sa WordPress karaniwang tinatawag itong Style.css at nakatira sa folder na may tema na ginagamit mo (/ wp-content / tema / pangalan ng tema). Sa Joomla, kailangan mong hanapin ang istilo ng file sa folder na may template na kasalukuyan mong ginagamit (/ template / pangalan ng template)

Buksan lamang ang file na ito para sa pag-edit, halimbawa, at idagdag sa pinakadulo ang mga fragment ng style code na iyong kinopya (i-paste namin ang html code sa ibang lugar). I-save ang mga pagbabago at huwag kalimutan, sa pamamagitan ng pagpunta sa Filezila, upang ilapat ang mga pagbabagong ito sa pamamagitan ng pagsang-ayon sa alok na pop-up.

Sa ngayon, oras na upang makitungo sa tatlong linya Html script code Ibahagi42... Pinayuhan ng may-akda na ipasok ang mga ito bago o pagkatapos ng mga artikulo. Sa WordPress, ito ay hindi madali, ngunit napaka-simple. Buksan ang solong.php file para sa pag-edit mula sa folder gamit ang iyong tema (tandaan, nakatira ito sa / wp-content / mga tema / ang pangalan ng tema ng WordPress).

Maaari mong i-paste ang code kaagad pagkatapos ng mga artikulo. Upang magawa ito, hanapin ang linya na may function na the_content at ipasok ang iminungkahing fragment pagkatapos nito, halimbawa, tulad nito: