Սկիզբ » Ուսումնական նյութեր » Վեբ » Google+ Share կոճակ՝ սեփական ձեռքերով

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);

 

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
Պատուհանը բացելու կոդը.
<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>&lt;script type="text/javascript"&gt;
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>}
&lt;/script&gt;
&lt;input type="image" src="https://www.gstatic.com/images/icons/gplus-32.png" alt="Share" onclick="myGplusShare()" /&gt; </em>
Փորձարկում եմ.
Ինչպես տեսնում եք, ամեն ինչ հիանալի աշխատում է:) Շուտով կփորձեմ նույնն անել Diaspora*-ի վրա (եթե պլատֆորմը դա թույլ տա):Վայելեք:)
Google+ Share կոճակ՝ սեփական ձեռքերով , 8.0 out of 10 based on 1 rating

Նշագրեր: , , , , , ,

Բաժին: Վեբ

Կիսվել , տարածել , պահպանել

VN:F [1.9.20_1166]
Rating: 8.0/10 (1 vote cast)

Մեկնաբանեք

Կհաստատվեն միայն մեսրոպատառ հայերենով գրած մեկնաբանությունները

210