Ավելացրեք ևս 4 սոցիալական համօգտագործման կոճակներ՝ մենք ինքներս ենք գրում

Այստեղ արտահայտությունը «Ո՞վ է ուզում գնել ծրագրային ապահովում 8% զեղչով ակցիայի վրա»: գրել է անձամբ օգտատերը, իսկ ստորև ներկայացնում ենք, թե ինչպես է սոցցանցում նայվում կայքի հղումը: Շատ գեղեցիկ չէ, չէ՞:

ապա սոցցանցի հղումը կունենա հետևյալ տեսքը.

Այստեղ «Այսօր allsoft.ru-ի ծննդյան օրն է - 8 տարեկան :)» տեքստն է, որը գրել է օգտատերը, մնացածը տեղեկատվություն է մետա թեգերից։ Այս մետա թեգերի մասին ավելին կարող եք կարդալ Facebook-ի developers.facebook.com/docs/share էջում, մյուս սոցիալական ցանցերը նույնպես բավականին լավ են հասկանում դրանք։

Ինչպե՞ս է այս մեխանիզմը սովորաբար աշխատում.
1. Երբ օգտատերը սեղմում է կոճակը, վիդջեթը էջի հղումը փոխանցում է սոցիալական ցանցի սերվերին:
2. Սոցիալական սերվեր Ցանցն ինքն է մուտք գործում այս հղումով և կարդում էջի մասին տեղեկություններ՝ վերնագիր, նկարագրություն, նկար։
3. Սոցիալական սերվեր ցանցը պահում է էջի տեղեկատվությունը իր կողմում և ցուցադրում սոցիալական ցանցի էջերում

Ինչպես ուղարկել տարբեր նկարագրություններ մեկ էջի համար:
Օրինակ, allsoft.ru-ում հումորային թեստով գովազդային էջ ստեղծելիս անհրաժեշտ էր տարբեր նկարագրություններ փոխանցել սոցիալական ցանցերին՝ թեստում օգտատիրոջ հավաքած տարբեր միավորների համար։ Քանի որ սոցիալական ցանցը ստանում է էջի նկարագրությունը՝ սեղմելով հղման վրա, տարբեր նկարագրությունների համար անհրաժեշտ են տարբեր հղումներ։ Բացի այդ, Twitter-ը թույլ է տալիս միայն 140 նիշ, ուստի անհրաժեշտ է առանձին, ավելի կարճ նկարագրություն:

Նոր Ya.share(( տարր՝ «ya_share_normal», elementStyle՝ ( «տեսակը՝ «ոչ մեկը», «quickServices»: [«facebook», «twitter», «odnoklassniki», «vkontakte», «moimir»] ), հղում՝ «http://allsoft.ru/promo/allsoft8let/?share=normal», serviceSpecific: ( twitter: ( վերնագիր. «Թեստի արդյունք. Վիշապը գրեթե քո ուժեղ կողմն է: Դու դեռ չես կարող Վիշապաբանություն դասավանդել, բայց ճիշտ ճանապարհով!")))));
1. Այստեղ ya_share_normal էջի () տարրի id-ն է, որում կհայտնվի սոցիալական կոճակներով բլոկը, հղումը հղումն է, գումարած՝ Twitter-ի համար հատուկ ծառայության մեջ մենք նշում ենք վերնագիրը, որը տարբերվում է og-ում եղածից. վերնագրի մետա թեգը:

Այսպիսով, «3 տարբեր թեստի արդյունքներ գումարած թեստից դուրս էջի ընդհանուր հղում» առաջադրանքի համար մենք կունենանք 4 պիտակ.

և JavaScript կոդի 4 բլոկ, ինչպես վերևում:

Ինչպես փոխել վերնագիրը և նկարագրությունը, որը պահվում է սոցցանցի կողմից:
1. Ֆեյսբուքի համար կա լավագույն միջոցը՝ գնալ նրանց դեբագերին

Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Ինչպես հավանաբար արդեն կռահեցիք վերնագրից, մենք կխոսենք, այսպես կոչված, սոցիալական կոճակների մասին, որոնք կարող են շատ լրջորեն օգնել ձեր կայքի հոդվածներին գրավել, հաջողված հանգամանքների և հենց հոդվածի բարձր որակի դեպքում, մեծ թվով այցելուներ սոցիալական ցանցերից և ծառայություններից:

Սոցիալական ազդանշանները հաշվի են առնվում նաև որոնման համակարգերի կողմից ձեր կայքի վարկանիշում: Twitter-ի, Google+-ի, Facebook-ի բարձրորակ հաշիվների մեծ թվով բաժնետոմսերը (հնարավոր է, որ VKontakte-ն և այլ ցանցերը նույնպես հաշվի առնվեն) կարող է թույլ տալ ձեզ որոշակի թվով աստիճաններ բարձրանալ և, հավանաբար, մտնել Վերև և մնացեք այնտեղ, եթե վարքագծային գործոնները ձեզ թույլ չեն տալիս:

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

Հնարավոր է նաև կոճակների վրա ցուցադրել որոշակի սոցիալական ցանցի բաժնետոմսերի քանակը: Ավելին, հաշվի են առնվում բոլոր գրառումները, և ոչ միայն նրանք, որոնք արվել են այս բլոկի միջոցով (տվյալները բեռնվում են API-ի միջոցով): Ճիշտ է, ոչ բոլոր սոցիալական ցանցերն են աջակցվում (միայն facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), բայց հիմնականներից շատերը: Ցավալի է, որ Twitter-ը վերջերս հեռացվեց այս ցուցակից, քանի որ... այն դադարեցրեց այս տվյալները տրամադրել API-ի միջոցով:

Օրինակ, այստեղ կարող եք կրճատել վերնագրերը Twitter-ում համօգտագործելու համար, քանի որ կա դրանց երկարության սահմանափակում (կարդացեք, թե ինչպես դա անել ստորև), կարգավորել՝ ցուցադրել համօգտագործման հաշվիչներ, թե ոչ, սահմանել ընտրացանկերի ընդլայնման ուղղությունները սոցիալական ցանցի լրացուցիչ կոճակներով: , և շատ ավելին: Ընդհանուր առմամբ, փորեք շուրջը և նայեք:

Ընդհանուր առմամբ, համեմատած հայրենական համօգտագործման կոճակների հետ, որոնք առաջարկում են կայքում տեղադրել սոցիալական ցանցեր (այս մասին կարդացեք ստորև), Yandex բլոկը հաղթում է բեռնման արագության, կոմպակտության և տեղադրման և կազմաձևման հեշտության մեջ: Օրինակ, նախկինում Twitter-ի իմ պաշտոնական կոճակը հաճախ չէր բեռնվում իրենց սերվերի հետ կապված խնդիրների պատճառով, ուստի իմ բլոգի ձախ մենյուը՝ պատրաստված Java script-ով, երկար ժամանակ չէր բեռնվում։ Հնարավոր է, որ այս խնդիրը այժմ լուծված է, բայց շատ սկրիպտներ միշտ ավելի վատ կլինեն, քան մեկը՝ կայքի բեռնման արագության օպտիմալացման տեսանկյունից:

Ես կարծում եմ, որ Yandex-ը դժվար թե խնդիրներ ունենա հասանելիության հետ, քանի որ այն լավ եկամուտ ունեցող առևտրային կազմակերպություն է, որը բավականին զգայուն է իր իմիջի նկատմամբ: Բացի այդ, եթե ունեք, ապա կարող եք հետևել այս կոճակների վրա սեղմումների վիճակագրությանը, ինչը կարող է օգտակար լինել։

Բացի սովորական չափի պատկերակներով բլոկից, դուք կարող եք բլոկ պատրաստել հաշվիչներով, իսկ Yandex-ը նաև առաջարկում է ավելացնել բացվող ընտրացանկ՝ լրացուցիչ սոցիալական ցանցերով, որը կթաքցվի սփոյլերի տակ, որը գտնվում է անհրաժեշտ քանակությամբ կոճակներ ցուցադրելուց հետո։ հիմնական սոցիալական ցանցերը (օրինակ, VKontakte, MoiMir, ):

Եթե ​​ցանկանում եք այս բլոկի կոճակներին հաշվիչներ ավելացնել (բացվող մենյուով), ապա պարզապես տեղադրեք մեկ այլ հատկանիշ կայքի կոդի մեջ (Div պիտակների միջև). data-counter="" և վերջ: Ես ասացի, որ դա չի կարող լինել ավելի պարզ. Դուք կարող եք օգտագործել հաշվիչները նույնպես կավելացվեն փոքր կոճակներին, որոնք քննարկվում են ստորև:

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

Դուք կարող եք նաև փոխարինել բոլոր պատկերակները իրենց ավելի փոքր կոճակների մանրապատկերներով, որոնք անձամբ ինձ համար օգտակար էին այս բլոգի բոլոր հոդվածների վերևում բլոկ տեղադրելիս.

Առաջին մասում բացվող և փակվող SCRIPT պիտակները պարունակում են դեպի սկրիպտի ուղին, որը բեռնվելու է Yandex սերվերից, իսկ երկրորդ մասը պարունակում է ինքնին տեղադրման կոդը, որը պետք է տեղադրվի ձեր կաղապարի այն տեղում, որտեղ այս բլոկը կցուցադրվի:

Ինչպես տեղադրել սոցիալական կոճակներ Yandex-ից կայքում

Հետևաբար, ես տեղադրում եմ սկրիպտի զանգի կոդը Div բլոկի հետ միասին այն վայրում, որտեղ պետք է ցուցադրվեն սոցիալական մեդիայի կոճակները: Դե, որպեսզի դրա բեռնումը չազդի հիմնական էջի բեռնման արագության վրա, ես, հետևելով Yandex-ի փաստաթղթերում տրված խորհրդին, դրան ավելացրի async="async" հատկանիշը, դրանով իսկ սկսելով սկրիպտի ասինխրոն բեռնումը.

Խնդիրը կարող է առաջանալ ձեր կայքի շարժիչի բազմաթիվ ֆայլերի մեջ գտնելու մեջ այն մեկը, որը պատասխանատու է Html կոդի ամենաներքևի մասի ստեղծման համար փակման պիտակով /BODY կամ այն, որը կազմում է գլուխը: Եվ նաև թեմայի ֆայլերում մի տեղ գտեք, որտեղ դուք պետք է տեղադրեք կոդի մի կտոր Div պիտակներում (կոճակներն իրենք տեղադրելու համար):

Սկզբունքորեն, ինչպես WordPress-ում, այնպես էլ Joomla-ում դա արվում է օգտագործված թեմայի ֆայլերից մեկում։ Որովհետեւ Այս բլոգը աշխատում է WordPress-ով, ուստի ես կխոսեմ դրա համար:

Եթե ​​աշխատում եք WordPress-ի հետ, ապա սկրիպտի կանչող կոդը տեղադրելու համար անհրաժեշտ է բացել footer.php ֆայլը խմբագրելու համար (դուք կգտնեք փակվող Body թեգը կամ header.php (այնտեղ կգտնեք Head պիտակները) թղթապանակից.

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

Այժմ մնում է միայն Yandex սոցիալական կոճակների կոդի երկրորդ մասը, որը պատասխանատու է կայքի էջերի կոճակներով բլոկի տեղադրման համար, ձեր կայքի ձևանմուշի ճիշտ տեղում կամ ուղղակիորեն հոդվածում.

Ի դեպ, ես ևս մեկ անգամ վերապահում կանեմ. եթե ցանկանում եք հեռացնել որևէ կոճակ այս բլոկից, պետք չէ նորից գնալ Yandex կայքի կոնստրուկտորին: Դուք կարող եք պարզապես հեռացնել դրա մուտքն այս ցուցակից (հետևում գտնվող ստորակետի հետ միասին, օրինակ՝ «vkontakte»): Դե հասկանում ես...

Դե, դուք կարող եք նաև փոխել կոճակների դիրքը բլոկի ներսում՝ օգտագործելով CSS:

Li.ya-share2__item (background:none!important;padding:0 7px 0 7px!կարևոր է;)

Որովհետեւ Ես օգտագործում եմ դասավորություն, որը հարմարեցված է շարժական սարքերի համար, ուստի ցածր էկրանի լուծումներ ունեցող սարքերի համար ես ավելացրել եմ նմանատիպ տող, որտեղ ես մի փոքր ավելի փոքր նահանջներ եմ սահմանել, բայց սրանք մանրամասներ են.

Li.ya-share2__item (padding:0 3px 0 3px!կարևոր է;)

Ընդհանրապես, նման բան այն դեպքն է, երբ խոսքը վերաբերում է իմ WordPress բլոգին: Joomla-ում այս բլոկը տեղադրելու համար, հավանաբար, ամենահեշտ կլինի օգտագործել Custom Html Code մոդուլը՝ տեղադրելով այն կաղապարի դիրքում՝ հոդվածի տեքստից անմիջապես ներքև։

Պաշտոնական սոցիալական մեդիայի կոճակներ

Շատ սոցիալական ցանցեր իրենք բոլորին հնարավորություն են տալիս ներբեռնել կոճակի կոդը, և հաճախ կարող եք նույնիսկ հարմարեցնել դրա տեսքն ու ֆունկցիոնալությունը: Օրինակ, դուք կարող եք կարգավորել և ստանալ սկրիպտի կոդը՝ գրառումը կիսելու համար:

Ինչպես տեսնում եք, կան բավականին շատ պարամետրեր, և բացի VKontakte կոճակի տեսքից, կարող եք նաև հարմարեցնել բաժնետոմսերի քանակը ցուցադրող հաշվիչի ցուցադրումը:

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

Ավելի լավ է URL-ի դաշտում ոչինչ չմտցնել, այնուհետև այն էջը, որի վրա գտնվում է այս կոդը, կհամօգտագործվի:

Այն նման տեսք կունենա.

Այն նման տեսք կունենա.

Եվ, իհարկե, չեմ կարող չնշել պաշտոնական Twitter կոճակը, որը համեմատաբար վերջերս է հայտնվել: Նրա կոնստրուկտորը գտնվում է. Բնականաբար, այն հնարավորություն է տալիս հաշվելու ռեթվիթների քանակը, և դուք հնարավորություն կունենաք սահմանել դրա տեսքը.

Այնուհետև ես մի փոքր արդիականացրի ստացված կոդը՝ համաձայն վերը նկարագրված սկզբունքի, որպեսզի իմ երկար վերնագրերը կտրվեն և օգտատերերի համար լրացուցիչ խնդիրներ չառաջացնեն կիսվելու ժամանակ։

Ձեր կայքի համար սոցիալական մեդիայի կոճակներ ստանալու այլ տարբերակներ

Ինչպես արդեն ասացի, կան բազմաթիվ բոլոր տեսակի առցանց ծառայություններ, որտեղ դուք կարող եք անվճար վերցնել սոցիալական ցանցի կոճակների սցենարը և տեղադրել այն ձեր կայքում: Նրանք բոլորն էլ հետապնդում են տարբեր նպատակներ՝ «սրտից» (ինչպես Dimoxa ծառայության դեպքում), հավաքել տվյալներ, որոնք անհրաժեշտ են այլ ծառայությունների շահագործման համար (ինչպես ApTuLike-ի դեպքում) կամ շահույթ ստանալու համար (վիրուսներ և այլ անօրինական խարդախություններ։ ձեր կայքի տրաֆիկը): Կան նաև պարզապես վճարովի լուծումներ, օրինակ՝ ստորև նշված պլագինի նման։

Դժվար է ասել, թե ինչ ընտրել այս բազմազանությունից: Մի քանի խոսք կասեմ այն ​​մասին, թե ինչի մասին հնարավորություն ունեի փորձել, և ինչի մասին արդեն գրել եմ նախկինում:

Ընդհանրապես, նայեք, համեմատեք և ընտրեք ինքներդ։

Հաջողություն քեզ! Կհանդիպենք շուտով բլոգի կայքի էջերում

Ձեզ կարող է հետաքրքրել

Մենք ստեղծում ենք կոճակներ սոցիալական ցանցերում ավելացնելու համար և էջանիշներ WordPress բլոգի համար (առանց պլագինների և սցենարների) Հավանաբար՝ առանձին սոցիալական կոճակներ կայքի համար
Բջջային կայքերի կոճակներ Uptolike-ից + մեսենջերներում հղումներ կիսելու հնարավորություն UpToLike - սոցիալական կոճակների կառուցող ձեր կայքի համար՝ ընդլայնված ֆունկցիոնալությամբ
Uptolike Share կոճակներ - անվճար պլագին WordPress-ում սոցիալական մեդիայի կոճակներ ավելացնելու համար
uSocial - ձեր կայքի սոցիալական կոճակների նոր ծառայության վերանայում
Այցելուներից դեպի ձեր վեբ կայք երթևեկի ներգրավում SMO մեթոդների միջոցով (ֆորումներ, սոցիալական ցանցեր, բաժանորդագրվել խմբեր) Ինչպես ավելացնել ձեր վեբկայքին մի բլոկ՝ կոճակներով, որոնք տանում են դեպի ձեր էջերը կամ խմբերը սոցիալական ցանցերում, ինչպես նաև RSS հոսք:
Google+1-ը և ես հավանում ենք Vkontakte-ից և Facebook-ից՝ ինչպես ավելացնել հավանելու կոճակներ ձեր կայքում

Հղումները Stories-ում սկսել են հայտնվել բավականին վաղուց, բայց դրանք կարող էին օգտագործել միայն պաշտոնական հաշիվները։ Մայիսին հնարավոր դարձավ գովազդում հղումներ ավելացնել History-ում տեղաբաշխմամբ, բայց դրանք բոլորը վճարովի մեխանիզմներ էին։ Այսօր մարդիկ սկսեցին ինձ ուղարկել Instagram-ի սքրինշոթներ՝ թույլ տալով սովորական օգտատերերին իրենց Stories-ում ակտիվ հղումներ ավելացնել կայքերին:

Ինչպե՞ս հղում ավելացնել ձեր Instagram Story-ին:

Այս ֆունկցիան հասանելի չէ բոլոր Instagram-ի հաշիվներին: Այսօր Stories-ի հղումները հասանելի են միայն.

Ստուգված Instagram հաշիվների համար

10000-ից ավելի բաժանորդ ունեցող պրոֆիլների համար:

Ավելին, հղումը կարող է չհայտնվել անմիջապես 10000 բաժանորդ ստանալուց հետո։ Մինչև 10 հազար բաժանորդների բոտերի խթանումը միշտ չէ, որ աշխատում է: Բացի այդ, դժվար է խաբել բոտերին, որպեսզի նրանք այսօր չհրաժարվեն բաժանորդագրությունից, և եթե հաշվի բաժանորդների թիվը իջնի մինչև 9999 կամ ավելի քիչ, հղում կցելու հնարավորությունը կվերանա:

Պատմությունից ակտիվ հղմանը հետևելու համար օգտատերը պետք է սահեցրեք վերև: Քանի որ մարդիկ դեռ սովոր չեն նման հնարավորություններին, ես խորհուրդ կտայի լրացուցիչ ուշադրությունը կենտրոնացնել տարբեր հղումներով և գործողության կոչերով հղման վրա։ Դե, դուք մեծահասակ տղաներ եք, հասկանում եք, թե ինչի մասին եմ խոսում, ում եմ նույնիսկ այստեղ դասավանդում։

Direct-ում ակտիվ հղումների հայտնվելու մասին արդեն գրել եմ, բայց բլոգում տեղեկատվությունը չեմ տեղադրել։ Ինչպես ցանկացած այլ թարմացում, այն հասանելի է միայն օգտատերերի ընտրված և պատահական մասի համար:

Վերջին թարմացումները Instagram-ն էլ ավելի հետաքրքիր են դարձնում էլեկտրոնային առևտրի և փոքր բիզնեսի համար, բաժանորդների համար պայքարն էլ ավելի թեժ կդառնա։ Հուսով եմ միայն, որ Instagram-ը ակտիվորեն կպայքարի Direct-ում հղումների սպամի դեմ:

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

Մեր ուշադրության արժանի մեկ այլ ծառայություն էլ նույն պարզ կոնստրուկտորն է, միայն թե ծառայությունների և ցանցերի հետ շատ կոճակներ կան, որոնցից մի քանիսը, խոստովանեմ, առաջին անգամ էի տեսնում։ Yandex.Technologies-ից հիմնական տարբերությունն այն է, որ մենք ստանում ենք լիովին գեներացված սցենար, որը կմշակվի ոչ թե ամպի մեջ, այլ անմիջապես մեր սերվերի վրա:

Թվում է, թե նման հրաշալի լուծումների դեպքում ոչ մեկի մտքով անգամ չի անցնի «անիվը նորից հայտնագործել»։ Բայց ոչ, ինչ-որ մեկի գրած սցենարը այնքան լավն է, որքան մենք ծույլ ենք դրանով անհանգստանալու համար: Իհարկե, այն ճիշտ կաշխատի և կկատարի իր գործառույթները, բայց դա ունիվերսալ լուծում է, որը գրված է կայքերի ընդհանուր զանգվածի համար, այսինքն. այն հաշվի չի առնում մեր անձնական փոքր կարիքներն ու պայմանականությունները:

Նախ՝ կոճակների դիզայնը գործնականում երկաթյա է: Այո, այն ճանաչելի է և տրամադրվում է հենց սոցիալական ցանցերի կողմից, բայց դա պարզապես չի բավարարում մեր կարիքներին: Դե կոճակը կլորացված եզրեր ունի, իսկ մեր կայքի դիզայնը պահանջում է, որ կոճակը լինի քառակուսի, ի՞նչ անենք։ – Վերցրու սփրայթը և նորից նկարիր այն: Նրանք, ովքեր փորձել են դա, գիտեն, որ դա անշնորհակալ գործ է. մեկ կոճակը փոխարինելը հղի է այն «ճիշտ» տեղադրելու հինգ կամ վեց փորձերով: Եվ սա միայն մեկ/մի քանի կոճակների փոխարինում է, բայց ինչ անել, եթե կայքը գոթական ոճով է, և բոլոր կոճակները պետք է մուգ լինեն:

Երկրորդ. Yandex-ի հուսալիության մեջ կասկած չկա, բայց կոճակները, ի տարբերություն մետրային հաշվիչի, ինչ-ինչ պատճառներով դժվար է բեռնել, և հաճախ էջի հիմնական բովանդակությունից տեսանելի ուշացում կա: Սա հատկապես նկատելի է լավ գերարագ կապի դեպքում, երբ էջը գրեթե ակնթարթորեն խափանում է, և դուք ունեք կոճակներով մի քանի բլոկներ։

Երրորդ. թեստի համար ստեղծեք սկրիպտ share24-ում, այն մեծ է: Արդյո՞ք տրամադրված ծածկագրի բոլոր տողերն իսկապես անհրաժեշտ են մեզ համար: -Մի մտածիր:

Հիմա եկեք անցնենք բուն սցենարի գրմանը, այն կբաժանվի երեք մասի. Բացի այդ, ես կօգտագործեմ jQuery գրադարանը հարմարության համար:

Մենք ներառում ենք բոլոր անհրաժեշտ ֆայլերը.

Այժմ մենք սկրիպտը ավելացնում ենք share.js ֆայլում, այն կունենա հետևյալ տեսքը.

Var share = ( twitter: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIcomponent(data.text); url += "&url=" + encodeURIcomponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIcomponent(data.url); share.popup(url), vk: function($this)(var data = share.data($this); if(data)(var url = "http://vkontakte.ru/ share. php?"; url += "url=" + encodeURIcomponent(data.url); url += "&title=" + encodeURIcomponent(data.title); url +="&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Էջին նշագծում ավելացրեք՝

Կառուցվածքը բավականին պարզ է, այն է՝ փաթաթան՝ share դասի հետ, որին հաջորդում է div՝ data-share-data հատկանիշով, որը վերը նշված է: Գիծը ձևավորվում է չորս պարամետրից՝ իրենց սեփական արժեքներով։

• url – հասցեն, որը մենք կիսում ենք;
• img – պատկեր, եթե դրա կարիքը չկա, նշեք դատարկ տող;
• վերնագիր - էջի վերնագիր;
• տեքստ - մեզ անհրաժեշտ նկարագրությունը:

Div-ի ներսում գտնվում են հենց կոճակները, որոնց վրա կցված է onclick իրադարձություն: Երբ կտտացրեք, կկանչվի վերը նկարագրված մեթոդներից մեկը:

Մնում է կոճակներին մարդկային տեսք տալ և CSS ավելացնել.

Համօգտագործում(ֆոնի գույնը՝ #ececec; ցուցադրում՝ inline-block; padding՝ 7px 5px; ) .share div:after(բովանդակությունը՝ ""; ցուցադրում՝ արգելափակում; մաքրել՝ երկուսն էլ; բարձրություն՝ 0; .share div:first -child( margin-left: 0; ) .share .twitter, .share .vk, .share .facebook( background-image: url(share.png); margin-left: 7px; border-radius` 3px; height: 24px լայնությունը: float: ցուցիչ .twitter(background-color: #00px;) .share .vk; background-color: #48729e; դիրքը՝ 0 -32px; .share .vk:hover( background-color: #3a5b7e; ) .share .facebook( background-color: #3c5a98; background-position: 0 0; .share .facebook:hover( background -գույն՝ #30487a )

Արդյունքում CSS կոճակը ավելացնելուց հետո արդյունքը կունենա հետևյալ տեսքը.

Սա ավարտում է սցենարի գրելը, օրինակում ես օգտագործել եմ ընդամենը երեք սոցիալական ցանց, եթե պետք է ուրիշներին միացնել, դժվար չի լինի։ Դա անելու համար ձեզ հարկավոր է նոր մեթոդ ավելացնել share օբյեկտում՝ չմոռանալով ավելացնել նաև լրացուցիչ HTML և CSS: Սոցիալական ցանցերում վերագրանցման հղումները կարելի է ձեռք բերել երկու եղանակով.

• Օգտագործեք սոցիալական ցանցի API, որը միշտ չէ, որ օգնում է.
• Վերցրեք այն նմանատիպ ծառայությունից՝ օգտագործելով firebug կամ վեբ մշակողի այլ գործիք:

Ես նշել եմ SMO-ի (Սոցիալական մեդիայի օպտիմիզացում) կարևորությունը վեբ կայքի առաջմղման գործում: Այժմ խոսենք ուղիղ այն մասին, թե ինչպես անել սոցիալական օպտիմալացում ձեր կայքում, կամ ավելի ճիշտ՝ ինչպես ավելացնել հանրաճանաչ ցանցերի սոցիալական կոճակները ձեր կայքում։

Նախ, ես ձեզ ցույց կտամ, թե իրականում ինչպես այն պետք է նայվի կայքում: Բազմաթիվ բլոգներում և լրատվական կայքերում ցանկացած հոդվածի ներքևում կարող եք տեսնել հետևյալը.

Սրանք սոցիալական կոճակներն են, որոնց շնորհիվ ձեռք է բերվում SMO-ն, իսկ հետո՝ սոցիալական ակտիվությունը։ Այս հոդվածը նվիրված է այն հարցին, թե որտեղից կարելի է ստանալ այս սոցիալական ցանցերի կոդը: կոճակները և ինչպես դրանք ճիշտ տեղադրել ձեր կայքում: Եկեք նախ քննարկենք Google+-ի տեղադրումը:

1. Կայքում ավելացրեք Google+ կոճակ

2. Ավելացնել «Like» կոճակը VKontakte-ից և Facebook-ից 2.1 կայքում: Ինձ դուր է գալիս այն FaceBook-ից

Սկսենք Facebook-ի կոճակի կոդը ստանալով։ Դա անելու համար այցելեք այս էջը՝ https://developers.facebook.com/docs/plugins/like-button: Դուք պետք է տեսնեք հետևյալ նկարը.

Վերևի աջ մասում դուք կարող եք տեսնել, թե ինչ տեսք կունենա կոճակը ձեր կայքում: Եկեք նայենք այն պարամետրերին, որոնք կարող են սահմանվել.

1. Հավանել URL-ը
Սա կամընտիր պարամետր է: Եթե ​​դաշտը դատարկ թողնեք, յուրաքանչյուր էջ կունենա իր անհատական ​​հավանումների հաշվիչը: Եթե ​​այնտեղ մուտքագրեք կոնկրետ URL, հաշվիչը կլինի միատեսակ (հավանումները ամփոփված են այս կայքի բոլոր էջերից):

2. Ուղարկել կոճակ
Ավելացնել կամ հեռացնել հաղորդագրություններ ուղարկելու կոճակ: Խորհուրդ եմ տալիս հեռացնել այս կոճակը, քանի որ... Մեր նպատակը պարզապես «հավանել» կոճակը դնելն է, թեև միգուցե դուք բոլորովին այլ նպատակներ ունեք:

3. Layout Style
Կոճակի ցուցադրման ոճը: Անձամբ ես սիրում եմ ստանդարտ լավագույնը:

4. Լայնություն
Կոճակի լայնությունը պիքսելներով: Ես սովորաբար սահմանում եմ ոչ ավելի, քան 100 պիքսել:

5.Բայ ցուցադրել
Ինչ կցուցադրվի կոճակի վրա՝ «Ես հավանում եմ» կամ «Ես խորհուրդ եմ տալիս»: Ես սովորաբար ընտրում եմ առաջին տարբերակը (լռելյայն), քանի որ դա ավելի արդյունավետ միջոց է օգտատիրոջը հավանելու դրդելու համար։

6.Գունային սխեման
Գույնի տիրույթ՝ սպիտակ կամ սև:

7.Տառատեսակ
Պարզապես սահմանեք «I like» մակագրության տառատեսակը:

Կարգավորումները դնելուց հետո սեղմեք «ստացեք կոդը» կոճակը և տեղադրեք այն կայքում: Ֆեյսբուքի ընդհանուր կոճակի կոդը.

(function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) վերադարձել; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; 2.2. Ինձ դուր է գալիս VKontakte-ից

Հիմա եկեք տեսնենք, թե ինչպես ստանալ «հավանել» կոճակի կոդը VKontakte-ից: Դա անելու համար անցեք հետևյալ էջը. https://vk.com/dev. Դուք պետք է տեսնեք հետևյալ էջը.

Նախ պետք է նոր կայք ավելացնել։ Դա անելու համար ընտրեք նոր կայք միացնելու տարբերակը «կայք/հավելված» բացվող ընտրացանկից.

Նոր կայք ավելացնելուց հետո պահպանեք այն։ Այժմ բացվող ընտրացանկից ընտրեք ցանկալի կայքը: Դրան հաջորդում են մի փոքր թվով պարամետրեր՝ «կոճակի տարբերակ», «բարձրություն», «կոճակի անուն» - այս ամենը հարմարեցված է ձեր ճաշակին: Վերջում կլինի կոճակի կոդը.

VK.init ((apiId՝ 2872188, միայն Վիդջեթներ՝ ճշմարիտ )); VK.Widgets.Like («vk_like», (տեսակը՝ «կոճակ») ); 3. Կայքում ավելացրեք թվիթերի կոճակ

Ինչպես նախորդ դեպքերում, նախ գնացեք այն վայրը, որտեղ դուք ստացել և կարգավորել եք կոճակը:

 

Կարող է օգտակար լինել կարդալ.

• Ցանցային sniffing TCP sniffing;
• Word-ը PDF-ի վերածել Ինչպես փաստաթղթերը փոխարկել RTF-ի;
• Ինչպես փոխարկել HTML ֆայլը PDF ֆայլի;
• Ինչ է թողունակությունը;
• Ինչպես անջատել սենսորային վահանակը Asus-ի, HP-ի կամ Windows-ով աշխատող այլ նոութբուքի վրա Անջատել մկնիկը նոութբուքի վրա;
• «Arctic Shamrock». առցանց էքսկուրսիա դեպի ռազմական օբյեկտ Վիրտուալ էքսկուրսիա արկտիկական շամրոկում.;
• ICQ գաղտնաբառի վերականգնում. ինչ անել, եթե մոռացել եք ձեր գաղտնաբառը:;
• Ո՞վ է SMM-ի առաջխաղացման թրեյնինգը ինքնուրույն;