Սոցիալական մեդիայի գեղեցիկ կոճակների սցենար: Սեփական սոցիալական կոճակները: Կոճակի պատկերները վերբեռնում են սերվեր

Բայց այս սցենարը ունի մեկ թերություն. Սցենար, որը վարվում էր զննարկչի վարքի վրա, երբ կոճակներից մեկը սեղմվեց: Ահա դրա մի մասը, որում դուք ինքներդ հեշտությամբ կարող եք տեսնել երկու խնդիր.

Վկոնտակտե ՝ ֆունկցիա (զառանցանք, տիտղոսակիր, պիմգ, տեքստ) (url \u003d "http://vkontakte.ru/share.php?"; Url + \u003d "url \u003d" + encodeURIC կոմպոնենտ (purl); url + \u003d "& title \u003d" (! LANG: + encodeURIC բաղադրիչ (ptitle); url + \u003d"&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Առաջին խնդիրը փոքր է, և շատերը կարող են ինձ ասել. «Այ, այ տղա, սա գրել է 2012-ին: Ուղղակի փոխեք գիծը և վերջ »: Եվ ես համաձայն եմ քեզ հետ, որ կարող ես պարզապես փոխվելvkontakte.ru- ին vk.com- ին և պարզապես փակել հարցը:

Երկրորդ, յուրաքանչյուր ծառայության համար պետք է գրվի նոր բլոկ: Դա անելը նույնպես շատ խնդրահարույց չէ, պարզապես պատճենահանել և հեռացնել / ավելացնել անհրաժեշտ պարամետրերը:

Բայց ի վերջո ի՞նչ է անում այս սցենարը: Դա պարզապես ստեղծում է ելնող պատուհան, որն անցնում է նշված պարամետրերը: Սրանք տողերն են.

Թռուցիկ. Գործառույթ (url) (windows.open (url, "", "գործիքագոտի \u003d 0, կարգավիճակ \u003d 0, լայնություն \u003d 626, բարձրություն \u003d 436");)

Հենց այս սցենարի աշխատանքն է, որ մի փոքր փոփոխեցի: Բայց դրա մասին ավելին ՝ ստորև: Եկեք նայենք կոճակները իրենք իրենց և ինչպես են դրանք գործում:

Նախ, մենք պետք է ունենանք մի քանի փոփոխականներ համօգտագործման կոճակների համար.

• $ Վերնագիր - Էջի վերնագիր (վերնագիր)
• $ Նկարագրություն - Էջի նկարագրություն
• $ ImageUrl - ուղի դեպի էջի պատկեր
• $ Հղում - էջի ուղիղ հղում

Ես նրանց պայմանականորեն անվանակոչեցի, որպեսզի հստակ հասկանալի լիներ, թե դրանցից քանիսն են անհրաժեշտ և որոնք են: Թե ինչպես դրանք կտարվեն ձեր կայքում `ձեռքով կամ ավտոմատ կերպով, կախված է միայն այն ծրագրից, որի վրա այն կկատարվի: Օրինակ, WordPress CMS- ում սա նման կլինի.

• $ Վերնագիր - սա
• $ Նկարագրություն —
• $ ImageUrl —
• $ Հղում —

Այժմ, մեզ համար անհրաժեշտ տեղում, տեղադրում ենք հետևյալ ծածկագիրը, որտեղ փոփոխականների փոխարեն փոխարինում ենք պահանջվող արժեքները (անհրաժեշտության դեպքում).

Այսքան: Աշխատանքի արդյունքը կարող եք տեսնել այս հոդվածի վերջում:

Ներքին կոնստրուկտորների և սոցիալական մեդիայի կոճակների սցենարների ստուգում կայքերի, ինչպես նաև օտարերկրյա անալոգների համար: Կարճ, հասկանալի և պարզ:

Կայքի համար սոցիալական մեդիայի կոճակների դիզայներներ

2. Կայքին հղումներ ստանալու հեշտ միջոց - QIP.RU
Տեղադրեք կոճակը կայքում և այցելուներին հնարավորություն տվեք ավելացնել կայքի իրենց նախընտրած նյութերը էջանիշերում, բլոգներում և սոցիալական ցանցերում: Երեք քայլ. Որտեղ նշեք կոճակը (կայք, բլոգեր կամ WordPress), ոճավորեք կոճակները (տուփից դուրս) և ստացեք կոճակը:

3. Սոցիալական ցանցերում բովանդակություն ավելացնելու կոճակներ - Pluso
Տեղադրեք կոճակները և այցելուներին հնարավորություն տվեք կիսվել սոցիալական ցանցերում իրենց դուր եկած էջերով, ինչպես նաև տպել, նամակ ուղարկել և էջանիշներ ավելացնել:

4. Սոցիալական գործունեության ծառայություն - UpToLike
Անհատականացված սոցիալական մեդիայի կոճակները `գույնը, ձևը, չափը և հատուկ էֆեկտները սահմանելու հնարավորությամբ: Լրացուցիչ առանձնահատկություններն են PicShare նկարների փոխանակման վիջեթը, Գնանշման գործառույթը և հարմարեցված Հետևյալ գործառույթը:

5. Մեկ կոճակ: - էջանիշերի և սոցիալական ցանցերի բոլոր ծառայությունների համար
Ընտրեք բարի կոճակը: Որտեղ է տեղադրվելու կոճակը ՝ կայք, բլոգեր կամ WordPress: Ավելացնել կոճակ:

Կայքի համար սոցիալական մեդիայի կոճակները

1. Գեղեցիկ սոցիալական կոճակներ կայքի համար - Goodshare.js
Buttonsուցադրել կոճակները գրեթե ցանկացած սարքում: Մաքուր ծածկագիր: Համառոտ փաստաթղթավորում: SEO ընկերական.

2. Սցենարի կոճակները սոցիալական էջանիշների և ցանցերի համար - Share42
Ընտրեք չափը և նշեք այն ծառայությունների պատկերակները, որոնք ցանկանում եք օգտագործել կայքում: Ընտրեք ձեր ուզած ընտրանքները: Տեսեք, թե ինչպես այն կտեսնի և / կամ ներբեռնեք պատրաստի սցենար: Տեղադրեք սցենարը ձեր WordPress կայքում, Drupal- ում և այլն:

3. Գեղեցիկ սոցիալական լրատվամիջոցները սիրում են կոճակները ՝ օգտագործելով jQuery - Սոցիալական հավանումներ
«Նման» կոճակների սցենար սոցիալական ցանցերի համար նույն ոճի հաշվիչներով «Facebook», Twitter, VKontakte, Odnoklassniki, Moi Mir, Google+ և Pinterest:

Կայքի համար սոցիալական մեդիայի կոճակների օտարերկրյա անալոգներ

1. Share կոճակները - AddThis
Կիսվելու կոճակները կօգնեն ձեզ մեծացնել ձեր կայքի լսարանը ՝ բաշխված բովանդակության միջոցով այցելուներ ներգրավելով այլ ռեսուրսներից և սոցիալական ցանցերից:

4. Սոցիալական փոխանակում - Po.st
Ավելի շատ արժեք ստացեք սոցիալական լրատվամիջոցների տարածումից: Theառայությունը այցելուների համար կնպաստի սոցիալական ցանցերում տարածման գործընթացին, ինչը կբարձրացնի կայքի օրգանական թրաֆիկը:

5. Կիսեք կոճակները ցանկացած կայքի համար - AddToAny
Ստացեք սոցիալական կայքերի կոճակների կոդը ցանկացած կայքի համար: Ընտրեք կոճակների տեսակն ու ոճը, նշեք էլ. Փոստը և այլ տարբերակներ կամ ընտրեք հարթակներից մեկը ՝ WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad կամ FeedFlare: Ստացեք կոճակի կոդը:

Վերջերս կայքի զարգացման պահանջներին համապատասխանող յուրաքանչյուր երկրորդ (եթե ոչ առաջին) հաճախորդը խնդրում է անպայման կապել այն սոցիալական ցանցերի հետ: Կայքում «սոցիալական» կոճակները հանդիսանում են թիրախային լսարան ներգրավելու, բովանդակության և ընդհանրապես PR- ի տարածման թիվ 1 գործիքը: Եվ դա բոլորովին անվճար է:

Սոցիալական ցանցերը տրամադրում են կոդերի և վիդջեթների կոդեր կայքում տեղադրման համար և կցում են բովանդակության կառավարման համակարգում դրանք տեղադրելու ցուցումներ: Cանկացած CMS (գործառնական համակարգեր) թույլ է տալիս տեղադրել դրանք, գլխավորն այն է, որ դրանք ներդաշնակորեն տեղավորվեն ձեր կայքի նախագծման մեջ:

Որո՞նք են առանձնահատկություններն ու գործառույթները:

Եթե \u200b\u200bձեր կայքը ուղղված է այն մարդկանց, ովքեր շփվում են սիրված սոցիալական կայքի հետ: ցանցեր, օրինակ ՝ Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest և այլն, և դուք ցանկանում եք ծածկել բոլորը, որպեսզի դրանցից յուրաքանչյուրի համար կոճակները առանձին չդնեք, հաշվի առնելով, որ դրանք կարող են տարբեր լինել չափից և դիզայնից, խորհուրդ ենք տալիս օգտագործել ագրեգատորի ծառայություններ. Սրանք պարզ և հարմար գործիքներ են, որոնք կայքի այցելուներին հնարավորություն կտան արագորեն տեղեկություններ փոխանցել իրենց ընկերների հետ ՝ անկախ նրանից, թե որ սոցիալական ցանցն են օգտագործում: Ստորև մենք վերլուծելու ենք ամենատարածված ծառայությունները:

Սոցիալական մեդիայի կոճակները կիսում են Pluso- ն

«Ինչու՞ է նա պետք»: - հարցնում ես Հավանաբար, ես փորձում եմ հետևել ժամանակին. Մենք հետ ենք մնում բուրժուազիայից, և նրանց կայքի առաջխաղացումը որոշակիորեն տարբերվում է մեր այսօրվա իրականությունից:

Եթե \u200b\u200bնայում եք burzhunet- ի բլոգերին, ապա գրեթե բոլորն ունեն տարբեր լողացող վահանակներ, որոնք թույլ են տալիս հոդվածի հայտարարություն ավելացնել ամենատարածված սոցիալական ցանցերին և էջանիշներին: Այժմ բուրժուաների համար բավականին դժվար է առաջխաղացումը գնելով հղումներ, և սոցիալական ազդանշանների կարևորությունը սկսել է անհավանական աճել:

Վահանակը թույլ է տալիս ավելացնել հոդվածների փոխանակման քանակը և, հետևաբար, ազդել դրա վրա: Դե, քանի որ մեզ նման մի բան է սպասվում, ճիշտ կլինի իրադարձություններից մի փոքր առաջ ընկնել:

Ինչու է ձեզ հարկավոր Share42 վահանակը, դրա առավելությունները

Ես ուզում էի ունենալ այս չորս սոցիալական ցանցերի համար կոճակներով վահանակ, որոնք առավել արդիական են ռուսական ինտերնետի համար: Հնարավոր է, որ սոցիալական ազդակներ մեր երկրում նրանք դեռ այնքան ամենակարող չեն, որքան բուրժուազիայում, քանի որ դրանք պարզապես դեռևս բավարար չեն համապատասխան ընտրություն կատարելու համար:

Բայց հիմա ավելի լավ է սկսել դրանք հավաքել և լիովին զինվել, երբ գլոբալ արմագեդացին գալիս է Ռունետ մեր այլասերված ըմբռնումով. Ազդեցության էական նվազում և խստացված պատժամիջոց օղակի շահարկման համար:

Ընդհանրապես, տարբեր հարցումներ մտնելով Google- ում և վահանակի հարմար տարբերակ որոնելիս, ես հանդիպեցի Dimox.name կայքին, բայց երբ այնտեղ տեսա մի գեղեցիկ վահանակ, հարկ չհամարեցի որոնել դրա ռեսուրսում դրա տեղադրման նկարագիրը:

Ես պարզապես գիտեմ, որ նա ինքն է այդպիսի բաներ անում (առանց հավելումների), բայց այսօր ես իսկապես չէի ուզում խորանալ նրբությունների և կայանքների մեջ: Ես ուզում էի վերցնել մի քանի ծածկագիր և ստանալ գերազանց, գեղագիտական \u200b\u200bտեսանկյունից և աշխատանքային տարբերակ լողացող սոցիալական մեդիայի կոճակները.

Հետո ես բախվեցի Share42 ծառայության վրա և, տեսնելով դրա վրա նույն սոցիալական մեդիայի կոճակները, մի փոքր զարմացա. Dimox- ն օգտագործում է դրոշմում: Մի տեսակ կարծես հմուտ կոշկակարը գնա սպառողական ապրանքներ: Այնուամենայնիվ, ցանցում մի փոքր փորփրելուց հետո ես հանդիպեցի այնտեղ, որտեղ նա գրում է ինքնուրույն ընտրելու, կազմաձևելու և անվճար ծառայություն սկսելու մասին: սոցիալական կոճակների համար պատրաստի սցենարի կոդը ստանալու համար.

Հոգնելով կայքի համար կոճակներ ստեղծելու հարցում օգնություն խնդրելուց ՝ նա բացեց առանձին նախագիծ, որն, իմ կարծիքով, այժմ լավագույնն է շուկայում առկա բոլոր առաջարկներից: Թվարկեմ միայն դրանք կողմոր գրավեց աչքս:

Այժմ մինուսների մասին.

1. Դուք պետք է ունենաք առնվազն տարրական պատկերացում և. Չեմ կարծում, որ դուք միանգամից կշտապեք կարդալ իմ հրապարակումները, բայց ես դեռ հույս ունեմ ապագայում դա անելու ձեր մտադրության վրա (չէ՞ որ ես փորձեցի, գրել եմ, և այս հոդվածների հայտնվելը միայն բաժանորդների արագ արտահոսք առաջացրեց. Ցավալի է):

Դուք նաև պետք է պատկերացնեք գոնե մոտավորապես, թե ինչպես է դասավորված ձեր կողմից օգտագործվողը: Օրինակ, պետք չէ կոդերը փորփրել. Կարող եք օգտագործել այն (չնայած ես չեմ փորձել այս սցենարի համար):

Եթե \u200b\u200bթերությունները ձեզ համար էական չեն (կամ պատրաստ եք տեղում սայթաքել ճշմարտությունը որոնելու համար), իսկ առավելությունները նշանակալի են, ապա ողջունում եք այս հոդվածը հետագա: Ինչ է կոչվում `մի փոխեք: Ես ձեզ կքայլեմ Share42- ի վրա ստեղծված սոցիալական լրատվամիջոցների կոճակի շատ պարզ տեղադրման և դիտման միջոցով, ինչպես նաև կարգավորում եմ այն: Մի՛ մեղադրիր ինձ, բայց հենց այս շարժիչի վրա է գործում իմ բլոգը:

Share42- ի տեղադրումը և սցենարի տեղադրումը կայքում

Ես այս թղթապանակը գցեցի գրացուցակը WordPress հավելվածներով, այնպես որ կախարդի չորրորդ քայլում ես պետք է նշեի այս ճշգրիտ ուղին.

Եվ նաև ես ստիպված էի մի տիզ դնել WordPress- ի առջև, քանի որ սա այն շարժիչն է, որն օգտագործում է իմ բլոգը: Share- ի պարամետրերով ամեն ինչ արված է, մնում է միայն տեղադրել կախարդի հինգերորդ և վեցերորդ քայլերում առաջարկվող Html և CSS ծածկագիրը: Իրականում, այստեղ է, որ լուրջ խնդիրներ սովորաբար առաջանում են չմարզված օգտվողների համար:

Նկատի ունեցեք, որ այս կոդի բովանդակությունն ակնթարթորեն փոխվում է, երբ ձեր պարամետրերը փոփոխություններ եք կատարում (Ajax- ը ակնհայտորեն հոյակապ է և սարսափելի): Հետեւաբար, ուղղահայաց լողացող ձող ընտրելիս դուք ստիպված կլինեք տեղադրել մեկի փոխարեն երկու մասի CSS կոդ (հորիզոնական գոտի ընտրելիս): Բայց սրանք բոլոր մանրամասներն են, թեկուզ շատ տպավորիչ ու հաճելի (փառք Դիմոքսին):

Եկեք նախ խոսենք պարզի մասին - տեղադրելով CSS կոդ... Պատճենեք մեկ կամ երկու կանոնների հատվածներ և գտեք ձեր ձևանմուշի կամ մաշկի օգտագործման ոճի թերթիկի կասկադային ֆայլը:

WordPress- ում այն \u200b\u200bսովորաբար կոչվում է Style.css և ապրում է ձեր օգտագործած թեմայով թղթապանակում (/ wp-content / themes / թեմայի անուն): Joomla- ում դուք պետք է որոնեք ոճի ֆայլը այն թղթապանակում, որը ներկայումս օգտագործում եք կաղապարի հետ (/ կաղապարներ / կաղապարի անունը)

Դուք պարզապես բացում եք այս ֆայլը խմբագրման համար, օրինակ, և ամենավերջում ավելացնում եք ձեր պատճենած ոճի կոդերի բեկորները (Html \u200b\u200bկոդը մենք կփակցնենք այլուր) Պահպանեք փոփոխությունները և մի մոռացեք, այցելելով Filezila, կիրառել այս փոփոխությունները ՝ համաձայնվելով ելնող առաջարկի հետ:

Դե, հիմա ժամանակն է զբաղվել երեք տողերով HTML գրության կոդը Share42... Հեղինակը խորհուրդ է տալիս դրանք տեղադրել հոդվածներից առաջ կամ հետո: WordPress- ում դա հեշտ չէ, բայց շատ պարզ է: Ձեր թեմայով թղթապանակից խմբագրելու համար բացեք single.php ֆայլը (հիշեք, որ այն ապրում է / wp-content / themes / WordPress թեմայի անվան տակ):

Կոդը կարող եք տեղադրել հոդվածներից անմիջապես հետո: Դա անելու համար գտեք տողը the_content ֆունկցիայով և դրանից անմիջապես հետո տեղադրեք առաջարկվող բեկորը, օրինակ ՝ այսպես.