Փորձ. Google+ Share կոճակ՝ սեփական ձեռքերով

Սովորաբար նման բզբզել/փորել/մշակել ես անում եմ սեփական կայքերի/բլոգների համար, ու հազվադեպ եմ գրի առնում, թե ինչ եմ արել ու ինչի համար (բացի տեղում կոդի մեջ արված մեկնաբանություններից): Այս անգամ որոշեցի նորմալ փաստագրել ու գրանցել արդյունքն անմիջապես բզբզել/փորել/մշակել պրոցեսի ընթացքում, նշել նաև արված սխալներն ու հնարավոր թե՛ դրական, թե՛ բացասական արդյունքը:

Քչերին է հայտնի, որ Google+-ն ունի նաև Share կոճակ, չնայած այն հաճախ փոխարինում է իր +1 կոճակի նմանատիպ ֆունկցիոնալությամբ (նույնն անում է Facebook-ը՝ Like կոճակին անցնելով): Բայց այս գրառման մեջ փորձենք ինքնուրույն Share կոճակ պատրաստել Google+-ում ինֆորմացիայով կիսվելու համար, որը կկարողանանք օգտագործել մեր սեփական կայքերում:

Իրականում վերջնական նպատակներիցս մեկը Diaspora*-ի համար Share կոճակ ստեղծելն է:

Ինչպես կտեսնեք, իրականում ամեն ինչ շատ ավելի պարզ է, քան թվում է առաջին հայացքից: Գնացինք:

1. Շան գլուխը թաղված է YouTube-ում

Իրականում գործող Google+ Share ֆունկցիա գոյություն ունի թե՛ Blogger-ում (ավտոպոստն ամեն գրառումից հետո), թե՛ YouTube-ում: Բայց եթե Blogger-ինը էջում բացվող դինամիկ շերտ (Layer) է, ապա YouTube-ինն անկախ պատուհան է, որն առավել հարմար է բզբզել:

Աջում կարող եք տեսնել պատուհանը, որտեղ պարզ երևում է URL կառուցվածքը, որից էլ կարելի է օգտվել.

https://plus.google.com/share?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhIwx7CXBdIE

(հղվում է https://www.youtube.com/watch?v=hIwx7CXBdIE էջին)

Ընդգծված մասը միակն է, որը մեզ պետք է, պարզապես պետք է ստեղծել նոր պատուհան (առանձնահատուկ կրեատիվների համար՝ DIV), որի հասցեն կլինի https://plus.google.com/share?url=ձեր_հղման_նորմալիզացված_տողը:

2. Ստանում ենք ներկա էջի հղումը (DOM/JavaScript)

Ներկա էջի հղումը տողի տեսքով կարելի է ստանալ document.location.href օբյեկտ/հատկությունից օգտվելով, բայց սա լավ է աշխատում միայն Gecko-ի վրա հիմնված բրոուզերների հետ: Համատեղելիության նկատառումով կօգտվենք window.location.href օբյեկտ/հատկությունից (ափսոս՝ որոշ նոր կայքեր պարունակությունը բացում են layer-ներում, ոչ թե պատուհաններում):

3. Ստանում ենք պատուհանի հասցեն (JavaScript)

Պատուհանի հասցեն ստանալիս մենք պետք է երկու գործողություն իրականացնենք՝ նորմալիզացնենք ներկա էջի հղումն ու նրան սկզբից կցել "https://plus.google.com/share?url=":

Նորմալիզացնելը (համոզված չեմ, որ ճիշտ տերմին եմ օգտագործում, բայց ինչ արած) ենթադրում է հղումը պատշաճ տեսքի բերել՝ կոդավորել հատուկ ու Unicode սիմվոլները: Դրա համար կօգտագործենք escape() ֆունկցիան.

escape (window.location.href)

Իսկ հիմա իրար կցենք տողերը (concat() ֆունկցիան).

var gplink="https://plus.google.com/share?url=";
var gpurl=escape(window.location.href);
var gpshare=gplink.concat(gpurl);

4. Կառուցում ենք պատուհանը

Share-ի պատուհանը բացելիս կօգտվենք window.open() մեթոդից: Մեթոդի պարամետրերի գրելաձևը հետևյալն է՝ window.open(URL,name,specs,replace): specs-ը որոշում է բացվող պատուհանի հատկանիշները, տեսնենք, թե ինչ է պետք մեզ անհրաժեշտ պատուհանը ստանալու համար.

width=600px, height=500px այն պահն է, որ ինչպես էլ հաշվարկես՝ վերջում սխալ ես դուրս գալու (տարբեր էկրաններ, ֆոնտեր և այլ հանգամանքներ):

location=yes կարևոր է, որ օգտագործողը միշտ, ցանկացած պարագայում տեսնի այն կայքի հղումը, որտեղ ներկայումս գտնվում է: Տեսականորեն՝ էթիկայի նկատառումներով, գործնականում՝ առնվազն phishing-ից ապահովագրվելու համար:

resizable=yes կարող եք no էլ դնել, որպեսզի պատուհանի չափսերը փոխել չստացվի, բայց երբեմն պատուհանը սխալ է արտապատկերվում, ու պարունակության մի մասն օգտագործողին հասանելի չի լինում: Անձամբ ես նախընտրում եմ հնարավորինս շատ իշխանություն տալ օգտագործողին, քանի դեռ դա իմ աշխատանքի ամբողջականությունն ու անվտանգությունը չի խախտում:

Մնացած կետերում պարզապես ազատվում ենք ավելորդ բաներից.

menubar=no

toolbar=no

scrollbars=no

status=no

Պատուհանը բացելու կոդը.

function myGplusShare()
{
var gplink="https://plus.google.com/share?url=";
var gpurl=escape(window.location.href);
var gpshare=gplink.concat(gpurl);
window.open(gpshare, '', 'width=600px, height=500px, location=yes, resizable=yes, menubar=no, toolbar=no, scrollbars=no, status=no');
}

6. Կառուցում ենք կոճակը

Կոճակը կկառուցենք սովորական input-ի միջոցով: Վերջնական տեքստը կստանա հետևյալ տեսքը.

<script type="text/javascript">
function myGplusShare()
{
var gplink="https://plus.google.com/share?url=";
var gpurl=escape(window.location.href);
var gpshare=gplink.concat(gpurl);
window.open(gpshare, '', 'width=600px, height=500px, location=yes, resizable=yes, menubar=no, toolbar=no, scrollbars=no, status=no');
}
</script>
<input type="image" src="https://www.gstatic.com/images/icons/gplus-32.png" alt="Share" onclick="myGplusShare()" />

Փորձարկում եմ.

Ինչպես տեսնում եք, ամեն ինչ հիանալի աշխատում է:) Շուտով կփորձեմ նույնն անել Diaspora*-ի վրա (եթե պլատֆորմը դա թույլ տա):

Վայելեք:)