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)
escape (window.location.href)
Իսկ հիմա իրար կցենք տողերը (concat() ֆունկցիան).
var gplink=”https://plus.google.com/share?url=”;
var gpurl=escape(window.location.href);
var gpshare=gplink.concat(gpurl);
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=notoolbar=noscrollbars=nostatus=no
Պատուհանը բացելու կոդը.
<em>function myGplusShare()</em>
<em>{</em>
<em>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');</em><em>
}</em>
6. Կառուցում ենք կոճակը
Կոճակը կկառուցենք սովորական input-ի միջոցով: Վերջնական տեքստը կստանա հետևյալ տեսքը.
<em><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');
</em> <em>}
</script>
<input type="image" src="https://www.gstatic.com/images/icons/gplus-32.png" alt="Share" onclick="myGplusShare()" /> </em>
Փորձարկում եմ.
Ինչպես տեսնում եք, ամեն ինչ հիանալի աշխատում է:) Շուտով կփորձեմ նույնն անել Diaspora*-ի վրա (եթե պլատֆորմը դա թույլ տա):Վայելեք:)
Բաժին: Վեբ
