👩‍⚖️ 📯 👮 हम साइट के लिए एक Instagram विजेट लिख रहे हैं। जिज्ञासु के लिए निर्देश। बाकी सभी के लिए टर्नकी समाधान 😷 💚 🧓🏿

हाल ही में, मुझे एक विजेट को एक Instagram साइट में एकीकृत करने की आवश्यकता थी। उपयोगकर्ताओं को नवीनतम प्रकाशित फ़ोटो देखने के लिए। शायद उन्होंने भी साइन अप कर लिया हो।

यह तुरंत स्पष्ट हो गया कि Instagram के पास आधिकारिक विजेट नहीं है। इसके अलावा, Instagram को विशेष रूप से एपीआई अनुरोधों के माध्यम से बातचीत की जा सकती है। आपके लिए कोई JavaScript लाइब्रेरी, कोड जनरेटर या डिज़ाइन नहीं है। सब कुछ अपने हाथों से करने की आवश्यकता है।

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

एक विजेट और बिल्ली के नीचे तैयार समाधान बनाने के लिए निर्देश।

एक छोटा नोट। इस लेख को लिखे हुए सात महीने बीत चुके हैं। इस समय के दौरान, विजेट को लगभग 80 संसाधनों पर स्थापित किया गया था, गिटहब पर एक रिपॉजिटरी बनाई गई थी, एक दयालु व्यक्ति ने मुझे एक निमंत्रण दिया, विजेट ने कैशिंग तंत्र को बदल दिया, अपनी वेबसाइट प्राप्त की, जिस तरह से लोगों ने इसे बिट्रिक्स एमएमएस के लिए एक प्लगइन बनाया, और मुझे अभी भी एनालॉग्स नहीं मिल पाए। नेटवर्क।

1. विजेट आवश्यकताओं:

शुरू करने के लिए, मैं चाहता हूं कि मैं किस तरह का विजेट बनाना चाहता हूं।

तो विजेट होना चाहिए:

इंस्टाग्राम आइकन;
शीर्षक;
प्रोफ़ाइल चित्र;
प्रोफ़ाइल के आँकड़े;
प्रोफाइल पेज पर जाने के लिए बटन;
क्लिक करने योग्य तस्वीरें;
फ़ोटो की अनुकूलन योग्य संख्या (कुल संख्या और प्रति पंक्ति कितना प्रदर्शित करना है);
विजेट की वांछित चौड़ाई के आधार पर रबर डिजाइन और ऑटो-स्केल तस्वीरें;
हैश टैग द्वारा आउटपुट तस्वीरें (प्रक्रिया में जोड़ा गया);
HTML कोड में एक लाइन में एक विजेट डालें।

यहाँ परिणाम है:

काम का प्रदर्शन>

तस्वीरों में उदाहरण:

और यहाँ इसे HTML में डाला गया है:

<iframe src='/inwidget/index.php' scrolling='no' frameborder='no'></iframe>

यदि आप रुचि रखते हैं, तो मैं आपको कार्यान्वयन विवरणों से परिचित होने के लिए आमंत्रित करता हूं।

2. इंस्टाग्राम पर साइट रजिस्टर करना:

Instagram के पास API प्रलेखन है यहाँ एक सीधा लिंक है:

http://instagram.com/developer/

सबसे पहले, हम "प्रोग्राम प्रबंधित करें" अनुभाग में रुचि रखते हैं। इसमें, आपको एक नया एप्लिकेशन (हमारी साइट) पंजीकृत करने की आवश्यकता है, जिसकी ओर से विजेट काम करेगा। इसलिए इस सेक्शन पर जाएं। "एक नया कार्यक्रम पंजीकृत करें" बटन पर क्लिक करें और फॉर्म भरें:

आवेदन का नाम - हमारे आवेदन का नाम। आप साइट का नाम लिख सकते हैं;
विवरण - आवेदन का विवरण;
वेबसाइट - हमारी वेबसाइट का URL;
OAuth redirect_uri - URL जिसे उपयोगकर्ता प्राधिकरण के बाद जाएगा। क्योंकि हमारे पास बस एक विजेट है और हम किसी को भी अधिकृत नहीं करते हैं, आप बस हमारी साइट के पते की नकल कर सकते हैं।

अगला, "रजिस्टर" बटन पर क्लिक करें।

पंजीकरण के बाद, हमें दो चाबियां मिलती हैं। हम ग्राहक आईडी में रुचि रखते हैं। हम भविष्य में उसके साथ काम करेंगे।

3. एपीआई के माध्यम से डेटा प्राप्त करना:

एपीआई के माध्यम से डेटा प्राप्त करने के लिए, आपको तथाकथित का उपयोग करने की आवश्यकता है। प्रलेखन में वर्णित "समापन बिंदु"। यह केवल URL की एक सूची है। प्रत्येक पता कुछ डेटा जारी करने के लिए जिम्मेदार है। डेटा JSON प्रारूप में दिया गया है। चूंकि मैं फ़ोटो और प्रोफ़ाइल आँकड़े प्रसारित करना चाहता था, इसलिए मैं तुरंत "उपयोगकर्ता" उपधारा पर गया। इसके लिए प्राधिकरण अनावश्यक है।

यह पता चला है कि किसी खाते के बारे में कोई डेटा प्राप्त करने के लिए, आपको इस खाते के पहचानकर्ता को जानना होगा। उपयोगकर्ता केवल अपना उपयोगकर्ता नाम जानते हैं, लेकिन अपनी आईडी नहीं। कहां से लाएं?

आप प्रोफाइल पेज के HTML कोड में पहचानकर्ता को देख सकते हैं, या आप इस URL पर अनुरोध भेज सकते हैं:

 https://api.instagram.com/v1/users/search?q=LOGIN&client_id=CLIENT_ID

जहां LOGIN वह Instagram उपयोगकर्ता नाम है जिसे आप ढूंढ रहे हैं, और CLIENT_ID वह कुंजी है जो हमें एप्लिकेशन पंजीकरण चरण में प्राप्त हुई थी। नतीजतन, हमें एक JSON सरणी मिलती है, जिसमें पहचानकर्ता के साथ उपयोगकर्ता अवतार URL भी होगा।

अगला, हमारी प्रोफ़ाइल से नई फ़ोटो की सूची प्राप्त करने के लिए, आपको इस URL पर GET अनुरोध भेजना होगा:

 https://api.instagram.com/v1/users/USER_ID/media/recent/?client_id=CLIENT_ID

USER_ID वह पहचानकर्ता है जो हमें पिछले अनुरोध से मिला था। आप अनुरोध में अतिरिक्त तर्क भी जोड़ सकते हैं। आप दस्तावेज़ पृष्ठ पर सूची पा सकते हैं।

खैर, प्रोफाइल आँकड़े प्राप्त करने के लिए अंतिम अनुरोध:

 https://api.instagram.com/v1/users/USER_ID/?client_id=CLIENT_ID

डेटा के साथ हल किया गया। कार्यान्वयन के लिए हो रही है।

4. विजेट कार्यान्वयन

मैं बुरी खबर के साथ शुरुआत करूंगा। इंस्टाग्राम एपीआई स्पष्ट रूप से साइटों के लिए सरल विगेट्स के बजाय पूर्ण अनुप्रयोगों पर केंद्रित है। दो समस्याएं यहां से आती हैं:

एक CLIENT_ID या अधिकृत उपयोगकर्ता से प्रति घंटे केवल 5,000 अनुरोध एपीआई में भेजे जा सकते हैं;
यह CLIENT_ID को स्वतंत्र रूप से उपलब्ध होने के लिए अवांछनीय है, जैसा कि कोई भी आपके एप्लिकेशन की ओर से डेटा के लिए अनुरोध कर सकता है।

क्योंकि विजेट देखने के लिए, आगंतुकों से प्राधिकरण मांगना, अनुरोध भेजने / प्राप्त करने में समय लगता है, और हमारी वेबसाइट पर प्रति दिन 700 हजार विचार (शाम को प्रति घंटे 80 000 अनुरोध तक) हैं, आपको एक डेटा कैशिंग तंत्र को लागू करने की आवश्यकता है।

नतीजतन, मैंने फैसला किया कि विजेट सर्वर द्वारा प्रदान किया जाना चाहिए। इसलिए, रिलीज PHP + HTML + CSS में होगा।

हम एक iframe के माध्यम से विजेट कनेक्ट करेंगे।

4.1 कैशिंग:

विजेट के पहले संस्करण ने MySQL डेटाबेस में कैश लिखा था, लेकिन फिर मैंने अपना विचार बदल दिया और कैश को फ़ाइल में स्थानांतरित कर दिया।

परिणामस्वरूप - उच्च गति, सेटिंग्स के साथ कम इशारे, और हर किसी के पास MySQL नहीं है।

कैश को JSON प्रारूप में संग्रहीत किया जाता है। प्रासंगिकता फ़ाइल के अंतिम संशोधन की तारीख से जाँच की जाती है। यदि कैश पुराना है, तो नवीनतम डेटा प्राप्त करने के लिए एपीआई से अनुरोध किया जाता है।

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

4.2 स्रोत कोड:

हम cURL अनुरोध भेजते हैं, कैश को डेटा लिखते हैं, HTML + CSS का उपयोग करके एक विजेट बनाते हैं, विस्तृत निर्देश लिखते हैं और कुछ और रातों की नींद हराम करने के लिए पूर्णतावाद करते हैं। परिणाम यह है:

गितहब भंडार>

सबसे दिलचस्प बात inwidget.php फ़ाइल में होती है

config.php - सेटिंग के लिए जिम्मेदार, और लेआउट के लिए template.php।

और, ज़ाहिर है, सब कुछ मुफ्त है। सभी लोगों के लिए।

4.3 किसी साइट पर विजेट कैसे कनेक्ट करें?:

कदम से कदम निर्देश:

Instagram पर अपनी साइट को पंजीकृत करें (लेख की शुरुआत में चर्चा की गई)।
विजेट का सोर्स कोड डाउनलोड करें ।
विजेट के साथ फ़ोल्डर को सर्वर पर अपलोड करें।
/ Inwidget / कैश फ़ोल्डर के लिए लेखन अनुमतियाँ सेट करें।
विजेट सेटिंग्स कॉन्फ़िगर करें (config.php फ़ाइल)।
निम्नलिखित कोड का उपयोग करके साइट में विजेट डालें:

विभिन्न विजेट डिस्प्ले के साथ उदाहरण डालें

 <!--   --> <iframe src='/inwidget/index.php' scrolling='no' frameborder='no' style='border:none;width:260px;height:330px;overflow:hidden;'></iframe> <!--   --> <iframe src='/inwidget/index.php?toolbar=false' scrolling='no' frameborder='no' style='border:none;width:260px;height:320px;overflow:hidden;'></iframe> <!--  1 --> <iframe src='/inwidget/index.php?width=100&inline=2&view=12&toolbar=false' scrolling='no' frameborder='no' style='border:none;width:100px;height:320px;overflow:hidden;'></iframe> <!--  2 --> <iframe src='/inwidget/index.php?width=100&inline=1&view=3&toolbar=false' scrolling='no' frameborder='no' style='border:none;width:100px;height:320px;overflow:hidden;'></iframe> <!--   --> <iframe src='/inwidget/index.php?width=800&inline=7&view=14&toolbar=false' scrolling='no' frameborder='no' style='border:none;width:800px;height:295px;overflow:hidden;'></iframe> <!--  preview --> <iframe src='/inwidget/index.php?width=800&inline=3&view=9&toolbar=false&preview=large' scrolling='no' frameborder='no' style='border:none;width:800px;height:850px;overflow:hidden;'></iframe>

आप स्क्रिप्ट को एक्सेस करते समय GET पैरामीटर के रूप में पास किए गए प्रविष्टि पैरामीटर को अनुकूलित कर सकते हैं:

चौड़ाई - विजेट चौड़ाई (डिफ़ॉल्ट 260px)।
इनलाइन - प्रति पंक्ति फ़ोटो की संख्या (डिफ़ॉल्ट रूप से 4)।
दृश्य - विजेट में प्रदर्शित करने के लिए कितनी तस्वीरें (डिफ़ॉल्ट रूप से 12 पीसी।, अधिकतम 30 पीसी।, कन्फ्यूजिंग।बीपीपी में तय की जा सकती हैं)।
टूलबार - अवतार और आँकड़ों के साथ एक टूलबार प्रदर्शित करें (सही / गलत मान, सत्य के लिए डिफ़ॉल्ट)।
पूर्वावलोकन - छवि का आकार और गुणवत्ता (छोटा - 150px तक छोटा, बड़ा - 306px तक बड़ा, पूर्ण आकार - 640px तक पूर्ण आकार, डिफ़ॉल्ट रूप से छोटा)।
लैंग - विजेट भाषा (आरयू / एन मान, डिफ़ॉल्ट सेटिंग्स config.php से ली गई है)। इस पैरामीटर की प्राथमिकता config.php में सेटिंग्स की तुलना में अधिक है।

फ़ोटो की चौड़ाई या संख्या बदलते समय, iframe का आकार बदलना सुनिश्चित करें।

वह, वास्तव में, सब है।

विजेट साइट: http://inwidget.ru

गिटहब रिपॉजिटरी: https://github.com/aik27/inwidget

पुनश्च: मुझे समीक्षाओं, टिप्पणियों और प्रतिक्रिया पर खुशी होगी।

ईस्टर अंडा!

यह मेरी बिल्ली है। विजेट की प्रत्येक पंक्ति इसके सतर्क नियंत्रण के तहत लिखी गई है। कई बार, कोटे ने प्रक्रिया को कीबोर्ड पर चलाकर समायोजन किया। अपने पालतू जानवरों के साथ अधिक समय बिताएं! उनके साथ अजीब क्षणों को पकड़ो। तस्वीरें अधिक ले लो!

हम साइट के लिए एक Instagram विजेट लिख रहे हैं। जिज्ञासु के लिए निर्देश। बाकी सभी के लिए टर्नकी समाधान