👐 🦁 💉 काचे पर एक परियोजना में सामाजिक बटन 😞 🐲 💖

InterSystems प्रौद्योगिकियों के लिए प्रोजेक्ट जॉब्स में से एक कार्य हमारी राय, सामाजिक नेटवर्क में मुख्य के लिए "शेयर" बटन का निर्माण था। और विशेष रूप से प्रत्येक रिक्ति के लिए यह आवश्यक है:

इसके लोगो में प्रवेश;
नौकरी का शीर्षक;
संक्षिप्त विवरण;
क्या सामाजिक से जानते हैं। नेटवर्क उपयोगकर्ता आया

ताज्जुब की बात है, यह जब AngularJS पर लागू किया गया तो ऐसा आसान काम नहीं था

समाज। नेटवर्क स्वयं साइट को पार्स कर रहा है और उससे जानकारी एकत्रित कर रहा है, जावास्क्रिप्ट को अनदेखा कर रहा है;
AngularJS पर खुले graprh ogp.me डायनामिक मेटा टैग का उपयोग करना मुश्किल है क्योंकि जावास्क्रिप्ट के बिना, केवल index.html टेम्पलेट दिखाई देता है, और पेज JSON फॉर्मेट में RESTful के माध्यम से पॉप्युलेट होता है, पंजीकरण के लिए क्लाइंट पर अंतिम पृष्ठ बनाने के लिए AngularJS द्वारा उत्पन्न विभाजन का उपयोग करता है;
यानी के बजाय
वांछित जानकारी:

वे केवल देखते हैं
मुख्य index.html टेम्प्लेट:
URL के माध्यम से सरल साझाकरण सभी आवश्यक जानकारी को स्थानांतरित करने की अनुमति नहीं देता है;
इसके अलावा, लगभग सभी सामाजिक। नेटवर्क पहले और, यानी के साथ शुरू होने वाले URL में अतिरिक्त पैरामीटर काटते हैं लिंक से सोसाइट.सीपी? आईडी = 555 और सामाजिक = वीके सोसाइटी बन जाएगा। आईडी = 555

नतीजतन, सभी आवश्यक कार्य एक अलग सीएसपी पृष्ठ (सीएसपी- कैच सर्वर पेज ) पर लागू किए जाते हैं। अधिकांश वेब परियोजनाओं के लिए तर्क सार्वभौमिक है और नीचे वर्णित है। सबसे अधिक बार, इस दृष्टिकोण का उपयोग बैनर सिस्टम में और बाहरी संसाधनों के संक्रमण को ठीक करने में किया जाता है।

इतना

हम सामाजिक देते हैं। एक मध्यवर्ती पृष्ठ पर नेटवर्क लिंक, उस पर हम उस जानकारी को रखते हैं जिसे हम साझा करना चाहते हैं, सामाजिक। नेटवर्क इसके लिए एक लिंक पोस्ट करता है, जब आप इस लिंक पर क्लिक करते हैं तो हमारा पेज उपयोगकर्ता को वांछित रिक्ति पर पुनर्निर्देशित करता है। इस दृष्टिकोण का लाभ गति है। समाज। नेटवर्क पूरी तरह से वर्णन और आवश्यक टैग की तलाश में साइट को पार्स नहीं करता है, लेकिन केवल आवश्यक जानकारी प्राप्त करता है, इसके अलावा, संक्रमण को रिकॉर्ड करना संभव हो जाता है, भले ही सामाजिक हो। नेटवर्क एक खाली रेफरल लौटाता है।

काम की संक्षिप्त योजना:

सामाजिक के लोगो के साथ प्रत्येक बटन। नेटवर्क:

आपके URL में निम्नलिखित तत्वों से मेल खाता है:

सामाजिक URL वह नेटवर्क जिसमें हम लिंक साझा करेंगे, उदाहरण के लिए www.facebook.com/sharer/sharer.php?u=
हमारे द्वारा बनाई गई social.csp फ़ाइल से लिंक करें
वैकेंसी पहचानकर्ता में दो भाग होते हैं - डेटाबेस और सामाजिक पहचानकर्ता में वैकेंसी आईडी। network id = {{vacID}} - facebook.com
डेटा की गिनती न करने वाले देव और उत्पाद परियोजनाओं के संस्करण, केवल संसाधन पथों में भिन्न होते हैं (http: // localhost :: 57772 /... / social.scp और cache-vacancies.intersystems.ru/soc.scp ) ताकि यह न हो इस कोड के कोड को फिर से लिखने के लिए, हम इस लाइन को रूटुरल करने के लिए पास करते हैं ताकि सोशल को दिए गए निरपेक्ष URL को बनाया जा सके। नेटवर्क, सामान्य रूप से, यह उस पृष्ठ पर पूर्ण URL निर्दिष्ट करने के लिए पर्याप्त है जिसे हम साझा करना चाहते हैं;
एक विशिष्ट रिक्ति को AngularJS नियंत्रक var vacID = $ मार्गपार्म्स.vacID में खाली करने के लिए पारित किया गया है;

स्रोत कोड

संपूर्ण परियोजना के पूरी तरह कार्यात्मक संस्करण (व्यवस्थापक पैनल, डेटाबेस संरचना और हैंडलर सहित) के साथ भंडार का एक लिंक पोस्ट के अंत में इंगित किया गया है। वेब पार्ट की संरचना एंगुलरजेएस के लिए अनुशंसित समान है। इसलिए, मैं पोस्ट विषय के ढांचे के भीतर, स्वतंत्र कार्यान्वयन के लिए और रिपॉजिटरी में अभिविन्यास में आसानी के लिए कोड स्निपेट देता हूं।

ग्राहक की ओर से:

Vacancy.html में AngularJS का उपयोग कर अंश:

<div class="span4"> <a style="text-decoration: none;" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u={{rootURL}}soc.csp?id={{vacID}}-facebook.com"> <img src="img/social_icons/Facebook.png"> </a> <a style="text-decoration: none;" target="_blank" href="http://vkontakte.ru/share.php?url={{rootURL}}soc.csp?id={{vacID}}-vk.com"> <img src="img/social_icons/VK.png"> </a> <a style="text-decoration: none;" target="_blank" href="http://twitter.com/share?url={{rootURL}}soc.csp?id={{vacID}}-twitter.com&text={{txtVacancyName}}  {{txtsoc}}"> <img src="img/social_icons/Twitter.png"> </a> <a style="text-decoration: none;" target="_blank" href="https://plus.google.com/share?url={{rootURL}}soc.csp?id={{vacID}}-plus.google.ru"> <img src="img/social_icons/Google.png"> </a> <a style="text-decoration: none;" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl={{rootURL}}soc.csp?id={{vacID}}-odnoklassniki.ru"> <img src="img/social_icons/OK.png"> </a> <a style="text-decoration: none;" target="_blank" href="http://connect.mail.ru/share?share_url={{rootURL}}soc.csp?id={{vacID}}-mail.ru"> <img src="img/social_icons/Mail.png"> </a> </div>

कंट्रोलर.जेएस में rootURL और VacID उत्पन्न करना

 function vacancyCtrl($scope, $http, $cookies, $window, configProvider, configProviderNA){ $window.document.title="   InterSystems"; //       if ($scope.rootURL == undefined && $cookies.login != undefined){ configProvider.getURL(function(data){ $scope.rootURL = data.URL; }) } //      -      if ($scope.rootURL == undefined && $cookies.login == undefined){ configProviderNA.getURL(function(data){ $scope.rootURL = data.URL; }) } /*    */ } function vacancyShowCtrl($scope,$http, $routeParams, $window, $cookies, configProvider, configProviderNA){ //    ; var vacID = $routeParams.vacID; /*    */ }

पेज - soc.csp की पूरी मध्यस्थता

 <!doctype html> <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> <script language="Cache" runat="Server"> //  REFERER //  id  set id=$piece($Get(%request.Data("id",1),1),"-") //    set ref=$piece($Get(%request.Data("id",1),1),"-",*) set vacancy =##class(Vacancy.Vacancy).%OpenId(id) //    w %request.GetCgiEnv("HTTP_REFERER") </script> <head> <!--   () --> <title>#(a.Name)#</title> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <!--   --> <meta property="og:title" content="#(vacancy.Name)#" /> <!--   --> <meta property="og:description" content="#(vacancy.AddInfo)#" /> <!--     --> <meta property="og:image" content=#(##class(WEB.JSON).GetDataFromGlobal("URL"))#csp/vacancy/WEB.Image.cls?id=#(id)#&counter=0&ref=#(ref)#" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content=" " /> <meta property="fb:admins" content="" /> </head> <body> <script type="text/javascript"> /* ..     .          .         */ document.location.href="#(##class(WEB.JSON).GetDataFromGlobal("URL"))#csp/vacancy/index.html#/vacancy/#(id)#"; </script> </body> </html>

कक्षा के पाठ का एक हिस्सा Vacancy.Vacancy.cls

 Class Vacancy.Vacancy Extends (%Persistent, %Populate) { ///   Property Name As %String(MAXLEN = 200); ///   Property AddInfo As %Text(MAXLEN = 5000); }

अब मैं समझाता हूं कि यह कैसे काम करता है, साथ ही कौन कौन से टैग का उपयोग करता है

, , ogp वाले , , ogp के टैग के हेडर में , , ogp
फिर हम रेफ़रर को 2 भागों में तोड़ते हैं, जिससे यह निर्धारित किया जाता है कि किस सामाजिक से। नेटवर्क हमारे पास आया। अगला, हम रिक्ति में रिक्त स्थान के डेटा को लोड करते हैं, जिसके बाद हम ब्याज के क्षेत्रों की ओर मुड़ सकते हैं और उपयुक्त टैग भर सकते हैं:

यदि रुचि है, तो हम इंटरसिस्टम प्रौद्योगिकी स्टैक के पहले इंप्रेशन को साझा कर सकते हैं, या किसी भी प्रोजेक्ट पर अनुभव साझा कर सकते हैं।

काचे पर एक परियोजना में सामाजिक बटन

इतना

काम की संक्षिप्त योजना:

स्रोत कोड

ग्राहक की ओर से:

More articles: