Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Դուք, իհարկե, կարող եք օգտագործել plugin այս առաջադրանքի համար, բայց Ինքներդ դա անելն այնքան էլ դժվար չէ, և ավելի քիչ կլինի, մանավանդ, որ դրանցից բավականին շատ եմ արդեն աշխատում (տե՛ս հոդվածը տրված հղումով)։ Ես վերցրել եմ սոցցանցերի իկոնաները, որոնց մասին արդեն գրել եմ մանրամասնորեն (հուսով եմ, որ Dimox-ը չի առարկի սրան)։
Եվ ես նույնպես հարմար էի համարում Email-ի համար:
Սոցցանցերում բոլոր անհրաժեշտ խմբերն ու էջերը ստեղծելուց հետո, ինչը նշանակում է, որ ստացել եք բոլոր անհրաժեշտ հղումները, կարող եք տարակուսել՝ ավելացնելով կոճակներ կայքում: Դուք, իհարկե, կարող եք, համաձայն իմ մասին գրառման, յուրաքանչյուր սոցիալական ցանցի համար ընտրել համապատասխան պատկերակ և, անհրաժեշտության դեպքում, նվազեցնել դրա չափը մինչև պահանջվող չափը և.
Բայց սա լավագույն տարբերակը չէ։ Ինչո՞ւ։ Դե, քանի որ սոցիալական ցանցի յուրաքանչյուր նկար բեռնելու համար ձեր սերվերին առանձին հարցում կկատարվի։ Եթե ունեք մեկ տասնյակ պատկերակ, նշանակում է տասը հարցումներ, որոնք ցանկացած կերպ լրացուցիչ բեռ կստեղծեն սերվերի վրա և . Նման շռայլությունը մեզ չի սազում, մանավանդ որ դա վաղուց է։
Ես որոշեցի չհորինել անիվը (ստեղծել սփրայթ), բայց օգտագործեցի այն, որը ստեղծում է Share42 կոնստրուկտորը (դրա հետ աշխատելու նկարագրության հղումը տրված է հենց վերևում): Դրանում դուք կարող եք ընտրել այն սոցիալական ցանցերը, որոնց պատկերակները ձեզ անհրաժեշտ են, և կոդի հետ միասին կստանաք CSS sprite, այսինքն. ֆիզիկապես մեկ գրաֆիկական ֆայլ, որը կպարունակի ձեզ անհրաժեշտ սոցիալական ցանցի բոլոր պատկերակները և RSS հոսքի բաժանորդագրությունները (անհրաժեշտության դեպքում էլ. փոստ):
Ես ընտրեցի չորս հիմնական ցանց և մի քանի պատկերակ նորությունների բաժանորդագրությունների համար՝ 24-ից 24-ի չափսերով, այնպես որ իմ սփրայթը այսպիսի տեսք ունի (, այնուամենայնիվ, այն դեռևս պտտվում էր այնտեղ, բայց դա կարևոր չէ).
Այժմ մենք ունենք բոլոր բաղադրիչները՝ հղումներ դեպի խմբեր կամ սոցիալական ցանցերի էջեր և պատկերակներ՝ դրանք կայքում ցուցադրելու համար: Մնում է միայն այս ամենը ճիշտ պատրաստել, այսինքն. դիմահարդարել. Իմ բլոգը սնուցվում է WordPress-ով, այնպես որ ես կտեղադրեմ կոճակի կոդը . Իմ դեպքում այն կոչվում է sidebar.php: html կոդըսա հանգեցնում է շատ պարզի.
Դե, ամենահետաքրքիրը: Օգնությամբ մենք որոշում ենք, թե մեր սփրայթի որ հատվածը կցուցադրվի այս կոնկրետ վայրում որպես ֆոն (մեր դեպքում այս ֆոնը տեղադրված է հիպերհղման տակ): Շատ երկար ժամանակ է պահանջվում բացատրելու համար, թե ինչպես է դա տեղի ունենում, այնպես որ կարդացեք հոդվածը հղումով և ամեն ինչ պարզ կդառնա (կան նաև պատկերավոր օրինակներ): Եթե չափազանց ծույլ եք, ապա պարզապես փորձարկեք թվերը, որոնք, ինչպես նկատեցիք, իզուր չեն 24-ի բազմապատիկ:
Այո, վերբեռնեք sprite ֆայլը FTP-ի միջոցով ձեր կայք և նշեք դրա ուղին հետին պլանում (): Այսքանը: Եթե չի ստացվում, ավելի ուշադիր կարդացեք վերը նշված հղումների նյութերը, իսկ եթե ընդհանրապես ոչինչ չստացվեց, ապա մեկնաբանություններում նկարագրեք ձեր իրավիճակը (մանրամասն՝ կոդը տեղադրելու համար մի մոռացեք կցել այն. PHP պիտակներ քառակուսի փակագծերով):
Հաջողություն քեզ! Կհանդիպենք շուտով բլոգի էջերի կայքում
Ձեզ կարող է հետաքրքրել
Վերջերս յուրաքանչյուր երկրորդ (եթե ոչ առաջին) հաճախորդը կայքի մշակման պահանջներում խնդրում է անպայման միացնել այն սոցիալական ցանցերի հետ: Կայքի «Սոցիալական» կոճակները թիվ 1 գործիքն են թիրախային լսարան գրավելու, բովանդակություն և առհասարակ PR տարածելու համար։ Եվ ամբողջովին անվճար:
Սոցիալական ցանցերը տրամադրում են իրենց կոճակների և վիջեթների կոդերը՝ կայքում տեղադրելու համար և կցում են բովանդակության կառավարման համակարգում դրանք տեղադրելու հրահանգներ։ Ցանկացած CMS (օպերացիոն համակարգ) թույլ է տալիս տեղադրել դրանք, գլխավորը՝ դրանք ներդաշնակորեն տեղավորել ձեր կայքի դիզայնի մեջ։
Եթե ձեր կայքը ուղղված է այն մարդկանց, ովքեր շփվում են հանրաճանաչ սոցիալական ցանցերի հետ: ցանցեր, օրինակ՝ Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest և այլն, և դուք ցանկանում եք ծածկել դրանք բոլորին, այնուհետև նրանցից յուրաքանչյուրի համար կոճակները առանձին չտեղավորելու համար, հաշվի առնելով, որ դրանք կարող են տարբերվել չափերով և դիզայն, խորհուրդ ենք տալիս օգտվել ագրեգացիոն ծառայություններից: Սրանք պարզ և հարմար գործիքներ են, որոնք կայքի այցելուներին թույլ կտան արագորեն տեղեկատվություն կիսել իրենց ընկերների հետ՝ անկախ նրանից, թե որ սոցիալական ցանցից են նրանք օգտագործում: Ստորև մենք կվերլուծենք ամենատարածված ծառայությունները:
Սոցիալական ցանցի կոճակները կայքում այժմ ավելացնելու մի քանի եղանակ կա, ընտրություն կա և հաճելի է: Սոցիալական կոճակները կարևոր դեր են խաղում էջում, որոնց օգնությամբ, ինչպես շատերն արդեն գիտեն, դուք կարող եք արագորեն վերահրապարակել ցանկացած գրառում ընտրված սոցիալական ցանցերից մեկում։ Կայքի սոցիալական կոճակները այժմ տեղադրվում են ցանկացած վայրում և ցանկացած վայրում, բայց երբեմն սխալ տեղում:
Շատերն արդեն գիտեն, թե որքան զարգացած են այժմ սոցիալական ցանցերը, և որքան լավ է, եթե ձեր կայքը ունի այնպիսի կոճակներ, որոնցով կարող եք ավելացնել ձեր սիրած գրառումը կամ գրառման մի մասը ձեր պատին: Այս գործողությամբ դուք ոչ միայն մեկնաբանում կամ վերահրապարակում եք հաղորդագրությունները, այլ նաև լրացուցիչ ազդանշան եք տալիս որոնման համակարգերին։
Յուրաքանչյուր կայքի սեփականատիրոջ երազանքը, եթե նրա բոլոր գրառումները ընթերցողները վերահրապարակեն սոցիալական ցանցերից մեկի իրենց էջերում։ Այժմ ամենից շատ պահանջարկ կա Vkontakte-ի, Facebook-ի, Twitter-ի և Odnoklassniki-ի համար։ Ես կավելացնեի նաև LiveJournal-ը, liveinternet-ը և Blogger-ը: Ցանկալի է այս կոճակները ավելացնել կայքում՝ օգտատիրոջ լիարժեք հարմարավետության համար։
Հատկապես Twitter-ն այսօր ավելի ու ավելի մեծ ուշադրության է արժանի, որի օգնությամբ ձեր նոր հրապարակումները ավելի արագ են հայտնվում որոնման համակարգի ինդեքսում։
Եթե դուք կայքի սեփականատերն եք, ապա, ամենայն հավանականությամբ, պետք է ունենաք liveinternet կամ LiveJournal հաշիվ: Որպեսզի ամեն անգամ նոր գրառումներ չավելացվեն այս ծառայություններին, դրանց կոճակների առկայությունը խնայում է ժամանակը։ Բացի այդ, շատ մարդիկ օգտվում են այս ծառայություններից և կարող են նաև ցանկանալ վերահրապարակել ձեր գրառումն իրենց օրագրում:
Կայքում սոցիալական կոճակներ արագ ավելացնելու մի քանի լավագույն եղանակ կա: Դուք կարող եք դա անել առցանց ծառայությունների օգնությամբ, որոնք արագ և հեշտությամբ կօգնեն դրան: Կամ ուղղակիորեն յուրաքանչյուր սոցիալական ցանցի միջոցով առանձին: Այստեղ յուրաքանչյուրն ունի իր ընտրությունը։ Նախկինում յուրաքանչյուր սոցցանցի միջոցով կոճակներ էին ավելացվում առանձին, հիմա դրանք տեղադրեցի ծառայության միջոցով։
Նման ծառայություն կա, այն կոչվում է կիսվել42. Նրա մասին շատ նյութեր են գրվել, թե որքան լավն է նա և ինչպես օգտագործել այն։ Լավ է, բայց սովորական օգտագործողի համար, ով ոչինչ չի հասկանում դրա մասին, դժվար կլինի կարգավորել այն:
Նման փոքր զբաղմունքի համար՝ թղթապանակները հոսթինգում պատճենելը և հետո ոճերով լողանալը, այժմ այն այլևս չի քշում: Կան այլ տարբերակներ, որոնցում դուք պետք է պատճենեք և տեղադրեք արդեն ավարտված կոդը՝ առանց որևէ լրացուցիչ թղթապանակի: Այսպիսով, մոռացեք այս ծառայության մասին:
Ավելացրեք միայն սոցիալական ցանցի ամենահիմնական կոճակները, որոնք օգտագործում են մեծամասնությունը, մի քանդակեք տասնյակ անհարկի մոռացված կոճակներ:
Ինչ կարող եք օգտագործել այսօր՝ կայքի համար սոցիալական կոճակներ ավելացնելու համար.
Հավանաբար, ձեզ հարկավոր չէ որևէ այլ տեղ խառնվել, ավելի լավ ուղիներ չեք կարող գտնել: Այս տարբերակներից յուրաքանչյուրը լավ է իր ձևով: Եթե գիտեք ավելի հարմար կամ գրավիչ միջոց, գրեք մեկնաբանություններում։
Սոցիալական ցանցի կոճակները պետք է տեղադրվեն յուրաքանչյուր հոդվածի վերջում, որպեսզի կարդալուց հետո կայքի այցելուը ցանկության դեպքում վերահրապարակի ձեր գրառումը: Նա չպետք է դրանք փնտրի ինչ-որ տեղ էջի վերջում։ Ամենաօպտիմալ վայրերը, իմ կարծիքով, որտեղ պետք է տեղադրվեն նման կոճակներ, կողագոտում են և անմիջապես յուրաքանչյուր մուտքի վերջում։
Այս պահին ես ինքս օգտվում եմ այս ծառայությունից, ինձ այն դուր եկավ։ Հարմարավետությունից բացի, նման ծառայությունը մի քանի արտոնություններ ունի իր տեսակի մեջ մյուսների նկատմամբ:
Նման այլ ծառայությունների նկատմամբ արտոնությունները բավական են դրանից օգտվելու համար։ Այս դեպքում ավելացվում է միայն մի փոքր կոդ՝ սկրիպտի տեսքով և մի քանի տող՝ ոճերով։ Ընդ որում, ոչ մի կողմնակի հղում չկա, ես դա ստուգել եմ ելքային հղումների ծառայության միջոցով։ Եթե ես սխալվում եմ, կարող եք ուղղել ինձ։
Բացի դրանից, էլ ինչ կարող է անել uptolike ծառայությունը:
Ամենակարևոր պարամետրերը Ընտրեք կայքի սոցիալական կոճակները, որոնք ցանկանում եք տեսնել: Անհրաժեշտության դեպքում կարող եք բացել ցուցակը և մեծամասնությունից ընտրել ևս մի քանիսը: Ստուգեք վանդակը աջակցության համար: Դրանից հետո բջջային հեռախոսներում սոցիալական ցանցի կոճակները միշտ կցուցադրվեն էկրանի ներքևում։
Ընտրեք կոճակների հորիզոնական դիրքը, չափը և ոճը: Զարդարեք այնպես, ինչպես ցանկանում եք և ավելացրեք սավառնող էֆեկտ: Այլևս ոչինչ անել պետք չէ։ Հաշվիչ կոդ ստեղծելու համար դուք պետք է նշեք կայքի հասցեն և փոստարկղը: Դրանից անմիջապես հետո կայքում կհայտնվի սոցիալական կոճակներ տեղադրելու կոդը։
Եթե ունեք WordPress կայք, բացեք single.php ֆայլը և տեղադրեք պատրաստի կոդը էջի բովանդակության ավարտից անմիջապես հետո: Թարմացրեք էջը և տեսեք, թե ինչ է տեղի ունենում: Դժվար բան չկա։
Ընտրեք ցանկալի ծառայության պատկերակները: Twitter-ը միայն պատկերակների տեսքով է՝ առանց հաշվիչների։ Մենք ընտրում ենք բլոկների տեսքը, իսկ ներքևում տեղադրված կլինի պատրաստի ծածկագիր: Ինչպես արդեն նշվեց, Yandex-ը այլ բան չի ավելացնում, ամեն ինչ համեստ է ու ճաշակով։
Այս մեթոդով դուք պետք է բացեք յուրաքանչյուր սոցիալական ցանց առանձին և կարգավորեք յուրաքանչյուր վերահրապարակման կոճակը առանձին: Facebook-ի կոճակ ավելացնելու համար պետք է գնալ այստեղ. Դասընկերների և իմ աշխարհի համար դուք պետք է տվյալներ ավելացնեք: Twitter-ի համար ամեն ինչ տեղի է ունենում . Vkontakte կոճակ ավելացնելու համար անցեք այս էջը .
Դուք կունենաք պատրաստի կոդ միայն սոցիալական ցանցերից՝ առանց ավելորդ սկրիպտների։ Հավանաբար սոցիալական մեդիայի կոճակները կայք ավելացնելու լավագույն միջոցը: Դժվարությունը ծագում է նրանից, որ դուք պետք է կտրեք յուրաքանչյուր կոճակ առանձին, այնուհետև կպցրեք ամեն ինչ մեկ տեղում և օգտագործեք css ոճերը՝ այն մեկ սյունակում հավասարեցնելու համար: Եթե այս հարցում որևէ խնդիր չունեք, կարող եք փորձել:
Vkontakte կոճակ ավելացնելու համար սեղմեք Միացնել կայքերը և վիդջեթները, ներքևում կլինի բոլոր հնարավոր հավելումների ամբողջական ցանկը: Կա նաև էջին մեկնաբանություններ ավելացնելու, պատին գրելու, ձեր խումբը ավելացնելու, առաջարկություններ, հարցումներ, հեղինակին բաժանորդագրվելու և հղումներ հրապարակելու հնարավորություն։ Մեր դեպքում ընտրեք Հրապարակել հղումներ:
Ոչ մի բարդ բան չկա, ընտրում ենք կոճակի ոճը (հաշվիչով կամ առանց), կոճակի վրա գրում ենք տեքստը, լոգոյի տարբերակը և ներքևում կլինի պատրաստի ներդրման կոդը։ Ես ինքս օգտագործել եմ ավելացնելու այս ձեռքով մեթոդը, բայց այս պահին փորձում եմ երրորդ կողմի ծառայությունը: Տեսնենք, թե ինչ կլինի։ Եթե դա ինձ չի համապատասխանում, ես անմիջապես կվերադառնամ ձեռնարկի մեթոդին:
Կայքում կոճակներ ավելացնելու մեկ այլ միջոց է Պլյուսո ծառայություն. Ծառայությունը նույնպես վատ չէ, շատերը դրանից կոճակներ են նկատել։ Դիզայնի տարբերակների ընտրությունը մեծ է, բացի սիրողականից կան մեծ պատկերների չափսեր։ Ցանցեր ավելացնելու հնարավորությունը ոչ մի կերպ չի զիջում նմանատիպ այլ ծառայությունների համեմատ։ Տեղադրումը չի պահանջում որևէ ֆայլ, միայն կոդ:
Ընտրեք ցանկացած դիզայնի ոճ և ավելացրեք անհրաժեշտ ծառայությունները։ Մի փոքր ներքև կցուցադրվի պատրաստի օրինակ, թե ինչպես կանդրադառնա այս ամենը էջում։ Սրբապատկերները կարող են սահմանվել մեծ, միջին կամ փոքր: Նաև քառակուսի պատկերակներ կայքի կամ կլոր, մեկ տողով կամ երկու տողով, հորիզոնական կամ ուղղահայաց: Հաշվիչով կամ առանց հաշվիչի, առանց ֆոնի կամ նախադրեք ձեր կայքի դիզայնին համապատասխանող ֆոն:
Այս բոլոր քայլերից հետո ներքևում կլինի պատրաստի ծածկագիր՝ էջ տեղադրելու համար։ Եթե դուք պետք է տեղադրեք հիմնական էջում, մենք պտտվում ենք index.php ֆայլում, եթե ձեր բոլոր գրառումներում մենք կոդն ավելացնում ենք single.php ֆայլին գրառման ավարտից անմիջապես հետո:
Եթե այս օրենսգրքում ոչինչ չես հասկանում, այն, ինչ պետք է պատճենել, որտեղ և ինչպես է այդ ամենը աշխատում, ելք կա: Եթե ունեք WordPress շարժիչ, կարող եք տեղադրել մի plugin, որը ձեզ կտրամադրի սոցիալական մեդիայի կոճակներ: Այսօր կան պարզապես մեծ թվով նման պլագիններ։ Գնացեք ադմինիստրատորի վահանակ - Փլագիններ: Պլագինների որոնման մեջ անմիջապես կարող եք գրել «սոցիալական կոճակներ», «սոցիալական» կամ «VKontakte»: Համոզված եմ, որ դուք ինչ-որ բան կգտնեք:
WordPress-ի նման նմանատիպ հավելումների մեծամասնության մեջ, նայելով վարկանիշին, սրանք ամենաշատ դրվածներն են.
Իրականում նման պլագիններ շատ կան, դուք պետք է տեղադրեք և տեսակավորեք, թե որն է ձեզ ամենաշատը դուր գալիս, ճիշտ է աշխատում, ինչ է ցույց տալիս և ինչպես կարող եք հարմարեցնել այն ձեզ համար: Եկեք նայենք WordPress-ի համար սոցիալական Share կոճակների առաջին նման հավելվածի օրինակին:
Պլագինը ինքնին ռուսերեն է, դրա հետ կապված խնդիրներ չեն լինի: Տեղադրվելուց հետո ձախ կողմում գտնվող մենյուում կհայտնվի նոր կոճակ՝ «Share Buttons»: Հիմնական կարգավորումներում տեղադրում ենք կայքի լոգոն և տեքստը գրում սոցիալական կոճակների դիմաց։
Համոզվեք, որ միացրեք մետա տվյալների գեներացիան, կներառվեն էջի վերնագիրը և նկարագրությունը: Հավասարեցրեք կոճակները հորիզոնական և ընտրեք, թե որտեղ կլինեն դրանք: Մենք ընտրում ենք միայն գրառումներում։ Ընտրովի, դուք կարող եք բացառել անհրաժեշտ էջերը: Հենց ներքևում դուք պետք է նշեք մականունը տրիտրում:
Հաջորդ ներդիրում՝ Համօգտագործման կարգավորումներ, ընտրեք կոճակների ոճը: Ստորև կարող եք միացնել կամ անջատել անհարկի սոցիալական ցանցերը և ավելացնել նահանջներ վերևում կամ ներքևում գտնվող ամբողջ բլոկի համար: Ձեզ հարկավոր չէ որևէ տեղ տեղադրել լրացուցիչ կոդ, plugin-ն ամեն ինչ կանի ձեզ համար:
Ընտրությունը ձերն է, թե որ մեթոդն եք օգտագործելու: Ավելացրեք սոցիալական մեդիայի պատկերակներ uptolike-ի, Pluso-ի կամ Yandex-ի միջոցով: Պետք չէ անմիջապես տեղադրել plugin-ը WordPress-ում, փորձել ամեն ինչ անել ձեռքով կամ ծառայության օգնությամբ։
Եթե գիտեք որևէ այլ լավ ծառայություն կամ կայքի համար սոցիալական կոճակներ ավելացնելու միջոց, ես շնորհակալ կլինեմ մեկնաբանության համար:
Ներքին դիզայներների և կայքերի, ինչպես նաև արտասահմանյան անալոգների սոցիալական ցանցերի կոճակների ակնարկ: Հակիրճ, հստակ և հստակ.
2. Կայքի հղումներ ստանալու հեշտ միջոց՝ QIP.RU
Տեղադրեք կոճակ ձեր կայքում և այցելուներին հնարավորություն տվեք ավելացնել իրենց հավանած կայքի բովանդակությունը էջանիշերում, բլոգներում և սոցիալական ցանցերում: Երեք քայլ՝ որտեղ դնել կոճակը (կայք, Blogger կամ WordPress), կոճակի ոճ (պատրաստի ընտրանքներ) և ստանալ կոճակը:
3. Սոցցանցերում բովանդակություն ավելացնելու կոճակներ - Pluso
Տեղադրեք կոճակներ և թույլ տվեք այցելուներին կիսվել իրենց սիրելի էջերով սոցիալական ցանցերում, ինչպես նաև տպել, ուղարկել էլ. փոստ և ավելացնել էջանիշեր:
4. Սոցիալական գործունեության ծառայություն՝ UpToLike
Սոցիալական մեդիայի հարմարեցված կոճակներ՝ գույն, ձև, չափ և հատուկ էֆեկտներ սահմանելու ունակությամբ: Լրացուցիչ գործառույթներն են՝ PicShare պատկերների փոխանակման վիդջեթը, «Մեջբերում» գործառույթը և հարմարեցված Հետևող գործառույթը:
5. Մեկ կոճակ - էջանշման բոլոր ծառայությունների և սոցիալական ցանցերի համար
Ընտրեք դիտման կոճակը: Որտեղ կտեղադրվի կոճակը՝ կայք, Blogger կամ WordPress: Ավելացնել կոճակ:
1. Գեղեցիկ սոցիալական կոճակներ կայքի համար՝ goodshare.js
Ցուցադրել կոճակները գրեթե ցանկացած սարքի վրա: Մաքուր կոդը: Համառոտ փաստաթղթեր. SEO բարեկամական:
2. Սցենարների կոճակներ սոցիալական էջանիշերի և ցանցերի համար - Share42
Ընտրեք չափը և նշեք այն ծառայությունների պատկերակները, որոնք ցանկանում եք օգտագործել կայքում: Ընտրեք ձեր ուզած տարբերակները: Տեսեք, թե ինչպես այն կանդրադառնա և / կամ ներբեռնեք պատրաստի սցենարը: Տեղադրեք սցենարը WordPress կայքում, Drupal և այլն:
3. Գեղեցիկ սոցիալական Like կոճակներ՝ օգտագործելով jQuery - Սոցիալական հավանումներ
Հավանել կոճակի սցենարը նույն ոճով հաշվիչներով սոցիալական ցանցերի համար՝ Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ և Pinterest:
1. Համօգտագործման կոճակներ - AddThis
Համօգտագործման կոճակները կօգնեն ձեզ մեծացնել կայքի լսարանը՝ բաշխված բովանդակության միջոցով այցելուներ ներգրավելով այլ ռեսուրսներից և սոցիալական ցանցերից:
4. Սոցիալական փոխանակում - Po.st
Ավելի շատ օգուտ քաղեք սոցիալական լրատվամիջոցների տարածումից: Ծառայությունը կհեշտացնի այցելուների համար սոցիալական ցանցերում կիսվելու գործընթացը, ինչը կբարձրացնի կայքի օրգանական տրաֆիկը։
5. Համօգտագործման կոճակներ ցանկացած կայքի համար - AddToAny
Ստացեք սոցիալական մեդիայի կոճակների կոդը ցանկացած կայքի համար: Ընտրեք կոճակների տեսակն ու ոճը, նշեք էլ. փոստ և այլ տարբերակներ կամ ընտրեք հարթակներից մեկը՝ WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad կամ FeedFlare: Ստացեք կոճակի կոդը:
| ժամը 8:00-ին | Խմբագրել հաղորդագրությունը | 6 մեկնաբանություն |
Բարև սիրելի ընկերներ։ Այսօրվա հոդվածը նվիրված կլինի սոցիալական կոճակների բլոկի ստեղծմանը առանց ծառայությունների և հավելումների: Եվ այս բլոկը կներառի նաև կոճակներ, որոնք թույլ կտան կայքի այցելուներին տպել էջը, ուղարկել հոդվածի հղումը էլեկտրոնային փոստով և նշել ձեր հոդվածը: Նման կոճակներ այսօր կարելի է գտնել գրեթե բոլոր կայքերում: Միայն այժմ դրանք իրականացվում են ծառայությունների կամ պլագինների միջոցով։ Եվ ես ձեզ ցույց կտամ, թե ինչպես դա անել ինքներդ:
Ծառայություններ, որոնք ես օգտագործել եմ հաճախորդների կայքերում և իմ բլոգում - և . Այս ծառայությունները բավականին հեշտացնում են առաջադրանքի իրականացումը:
Եվ այս բլոկում օգտագործվում են միայն սոցիալական կոճակների անհրաժեշտ պատկերները՝ համակցված . Բոլոր ոճերը պահվում են նվազագույնի: Գումարած պարզ html շրջանակ:
Մենք կդիտարկենք դասական տարբերակը, երբ կոճակները գտնվում են հոդվածից հետո:
Դուք կարող եք դա անել կամ բացելով հոդվածների ցուցադրման համար պատասխանատու ֆայլը (single.php) և ավելացնելով սոցիալական կոճակների բլոկ սկզբնական կոդը: Որպես այլընտրանք, դա կարելի է անել թեմայի ֆունկցիայի ֆայլի միջոցով (functions.php):
Ես ցույց կտամ երկու տարբերակն էլ, իսկ դուք ընտրեք ձեզ հարմարը։
Զգուշացում. Շարունակելուց առաջ կրկնօրինակեք single.php ֆայլը:
WordPress-ի ադմինիստրատորի վահանակի բացում «Արտաքին տեսք» — «Խմբագիր» — «Մեկ մուտք (single.php)».
Աղբյուրի կոդում փնտրեք այն վայրը, որտեղ ավարտվում է հոդվածի ելքը և սկսվում են մեկնաբանությունները կամ էջադրումը։ Հենց այս վայրում անհրաժեշտ կլինի տեղադրել սոցիալական կոճակների բլոկի html կոդը:
Ուշադիր նայեք սքրինշոթին, կենտրոնացեք հոդվածի ելքի համար պատասխանատու կոդերի վրաև մեկնաբանություններ. Եվ տեղադրեք կոդը ստորև:
Իհարկե, որոշ տարբերություններ կլինեն ձեր կաղապարների մեջ, բայց ես վստահ եմ, որ դուք դա կհասկանաք, դրանում ոչ մի բարդ բան չկա: Եվ բացի այդ, դուք ունեք պահեստային պատճեն, վախենալու բան չկա։
Եվ ահա սոցիալական կոճակների բլոկի html կոդը.
Կոդի բացատրություններ.դա մեկ դիվ է class .share-ով, որը պարունակում է հղումներ դեպի սոցիալական ցանցեր: Հղումը բացվում է առանձին թռուցիկ պատուհանում, որի համար պատասխանատու է onClick=window.open այս ֆունկցիան: Հոդվածի հղումը փոխարինելը կատարվում է այս ծածկագրով. Յուրաքանչյուր հղում ունի իր դասը, որի միջոցով նշանակվում է կոճակի պատկերը։
Սա ավարտում է տեղադրումը սկզբնական կոդի միջոցով: Եվ հետո անհրաժեշտ է ավելացնել css ոճերը:
Զգուշացում. նախքան սկսելը, կրկնօրինակեք ձեր functions.php ֆայլը:
Այս տարբերակը օգտագործելու համար անհրաժեշտ է բացել functions.php ֆայլը և ամենավերջում ավելացնել այս կոդը.
/* Տեղադրեք սոցիալական կոճակներ */ add_action ("comments_template", "soc_button"); ֆունկցիա soc_button() (?> Եվ զգույշ եղեք ծածկագիրը կպցնելուց հետո բացատներ կամ այլ նիշեր չպետք է ունենաք: Կամ պարզապես փակել php կոդը?>. Հակառակ դեպքում կայքը կդադարի աշխատել:Կոդի բացատրություններ.այն վայրը, որտեղ տեղադրվելու են սոցիալական մեդիայի կոճակները, որոշվում է API-ի բանալի comments_template-ով: Այս բանալին որոշում է տեղը մեկնաբանություններից առաջ: Սոցիալական կոճակի կոդը ինքնին կցվում է php-ի բացման և փակման ետ պիտակների մեջ: Կոդում ես դրանք կարմիրով նշել եմ։ սա php-ի մեջ html կոդը տեղադրելու ամբողջ հնարքն է՝ թեմայի ֆունկցիաների միջոցով։
Այս և այս մեթոդով ավարտված է, եկեք անցնենք կայք պատկերների վերբեռնմանը:
Օրինակ, ես պատրաստել էի մի քանի սփրայթեր սոցիալական կոճակների պատկերներով։ Դուք կարող եք ներբեռնել դրանք:
Sprite-ը, որը ես օգտագործում եմ որպես օրինակ, ընդամենը 3,97 կբ է և պարունակում է միայն անհրաժեշտ կոճակները: Եվ քանի որ սա սփրայթ է, ուրեմն տվյալների բազան կա միայն մեկ հարցում, և ոչ յուրաքանչյուր կոճակի համար առանձին։
Ներբեռնեք պատկերներ կամ պատրաստեք ձեր սեփականը և վերբեռնեք դրանք ձեր կայք: Կարծում եմ, որ սա խնդիր չպետք է լինի: Ավելին, այս sprite-ի հղումը կպահանջվի css ոճերի միջոցով կոճակներ մշակելու համար:
Իհարկե, այս քայլը կարելի է անել առաջին հերթին, բայց ես նախընտրում եմ նախ կատարել բոլոր բարդ տեխնիկական աշխատանքները, իսկ հետո անցնել css ոճերի գեղեցիկ մանրուքներին:
Այսպիսով, բացեք style.css ֆայլը, որը պատասխանատու է ձեր կայքի դիզայնի համար: Եվ տեղադրեք այս ոճերը.
Համօգտագործեք a ( էկրան՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ ժառանգել; լուսանցք՝ 5px 0 0 2px; լիցք՝ 0px; տառաչափ՝ 0px; լայնություն՝ 40px; բարձրություն՝ 40px; ֆոն՝ url("http://test ..png ") առանց կրկնելու ոլորում 0px 0px թափանցիկ;) .share a.vkontakte ( ֆոն՝ url("http://test..png ") առանց կրկնելու ոլորում -168px 0px թափանցիկ;) .share a.google ( ֆոն՝ url ("http://test..png ") առանց կրկնելու ոլորում -252px 0px թափանցիկ; ) .share a.livejournal (ֆոն՝ url("http://test..png") առանց կրկնելու scroll -336px 0px թափանցիկ; ) .share a.twitter ( background: url("http://test..png") no-repeat scroll -42px 0px transparent;) .share a.mail ( background: url("http : .share a.pinterest ( ֆոն. url("http://test..png") առանց կրկնվող ոլորման -210px 0px թափանցիկ; ) .share a.liveinternet (ֆոն՝ url("http://test..png «) առանց կրկնվող ոլորման -378px 0px թափանցիկ; ) .share a.evernote ( նախապատմություն՝ url("http://test..png") առանց կրկնելու ոլորում -420px 0px թափանցիկ; ) .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 ( ֆոն՝ url("http://test..png") առանց կրկնվող ոլորման -546px 0px թափանցիկ; ) .share a.digg ( background: url("http://test..png") առանց կրկնվող ոլորման -588px 0px թափանցիկ;) .share a.spring (ֆոն՝ url("http://test..png") առանց կրկնվող ոլորման -630px 0px թափանցիկ;)
Կոդի բացատրություններ..share դասը սահմանում է բլոկի ընդհանուր տեսքը, յուրաքանչյուր կոճակի չափը, լիցքը և սահմանում է միատեսակ ֆոն: Եվ հետո յուրաքանչյուր հղում ունի իր դասը, և յուրաքանչյուր նման հղում, ֆոնային հատկության միջոցով, նշանակվում է կոճակի տեսք: Կոճակները ներկայացվում են որպես css sprite, և յուրաքանչյուր կոճակ ունի 40px լայնություն և 40px բարձրություն, որոնց միջև կա 2px լցոն, ինչը թույլ է տալիս ճշգրիտ սահմանել պատկերը յուրաքանչյուր կոճակի համար: Այսինքն՝ առաջին կոճակը նշված է որպես 0, իսկ երկրորդը՝ 42, և այլն։ Կոդում այս արժեքները նշված են նարնջագույնով: Սփրայթի հղումը նույնպես ընդգծված է նարնջագույնով, դուք այն փոխում եք դեպի ձեր սփրայթ տանող ճանապարհը:
Սա ավարտում է ձեր սոցիալական կոճակների բլոկի ստեղծման ողջ գործընթացը: Դուք կարող եք ապահով կերպով անցնել ստուգմանը:
Եվ ես ունեմ նաև վիդեո ուսուցում, որտեղ տեսողականորեն ցուցադրվում է ամբողջ գործընթացը, բևեռը ցույց է տալիս հենց կոճակների աշխատանքը: Դիտեք և իրականացրեք ձեր կայքերում և բլոգներում:
Հիմա այսքանը: Նա գլուխ հանեց առաջադրանքից. Մաղթում եմ բոլորիդ հաջողություն և տեսնել ձեզ նոր հոդվածներում և վիդեո ձեռնարկներում:
