Instagram का एम्बेड कोड 540px पर बँधा होता है और आपकी सामग्री के बाईं ओर चिपका रहता है, क्योंकि Instagram ये नियम एम्बेड पर इनलाइन स्टाइल के रूप में लिख देता है। कोड पेस्ट करें, चौड़ाई और संरेखण चुनें, और WordPress, Squarespace, Webflow, Ghost या सादे HTML में चलने वाला कोड कॉपी करें।
एम्बेड कोड या पोस्ट लिंक पेस्ट करें
Instagram का पूरा एम्बेड कोड डालें, सिर्फ़ blockquote, या केवल पोस्ट का लिंक - /p/, /reel/ और /tv/ सभी चलते हैं। जिन कोड से स्क्रिप्ट टैग गायब हो गया है या जो मार्कडाउन एडिटर से बिगड़कर आए हैं, वे अपने-आप ठीक हो जाते हैं।
चौड़ाई और संरेखण तय करें
चौड़ाई स्लाइडर को 326px से 540px के बीच खींचें, यही सीमा Instagram असल में मानता है, या "कंटेनर भरें" चुनें। बाएँ, मध्य या दाएँ चुनें - हर चौड़ाई पर मध्य बिल्कुल सटीक रहता है, क्योंकि मध्य में एम्बेड नहीं बल्कि उसका रैपर आता है।
लाइव प्रीव्यू देखें
प्रीव्यू लोड करके अपनी सेटिंग्स पर असली, तैयार एम्बेड देखें और डेस्कटॉप, टैबलेट व मोबाइल कॉलम चौड़ाई के बीच बदलें। हर बदलाव पर प्रीव्यू नए सिरे से बनता है, इसलिए जो ऊँचाई दिख रही है वही आपको मिलेगी।
कोड कॉपी करके पेस्ट करें
पूरा HTML कॉपी करें, स्क्रिप्ट टैग रहित संस्करण चुनें, या इसके बजाय एक ग्लोबल CSS नियम लें। WordPress में Text या Custom HTML व्यू में पेस्ट करें - Visual एडिटर स्क्रिप्ट टैग हटा देता है और एम्बेड नहीं दिखेगा।
आपका एम्बेड बाईं ओर रहता है क्योंकि Instagram की स्क्रिप्ट margin: 0 0 12px को सीधे एम्बेड पर इनलाइन स्टाइल के रूप में लगाती है, जिससे उसे मध्य में लाने के लिए दाएँ-बाएँ कोई मार्जिन नहीं बचता। इसका कारण आपकी थीम नहीं है, और कोई साधारण CSS नियम इनलाइन स्टाइल को नहीं हरा सकता। हल यह है कि एम्बेड को margin-left: auto और margin-right: auto वाले कंटेनर में लपेटा जाए, और यह टूल ठीक वही कोड बनाता है।
Instagram अपने बनाए iframe पर इनलाइन max-width लगाकर एम्बेड को 540px पर सीमित कर देता है, इसलिए चौड़े कंटेनर का कोई असर नहीं होता। समर्थित सीमा 326px से 540px है - 326px से नीचे एम्बेड छोटा नहीं होता, बाहर निकल जाता है। इस टूल में एक उन्नत विकल्प है जो !important से चौड़ा बॉक्स बलपूर्वक बनाता है, लेकिन Instagram इसका समर्थन नहीं करता और मीडिया अपने स्रोत रिज़ॉल्यूशन से बड़ा खिंचकर धुंधला लग सकता है।
आप CSS से ऊँचाई तय नहीं कर सकते, क्योंकि Instagram की स्क्रिप्ट अपनी सामग्री नापती है और लोड होने के बाद ऊँचाई खुद एम्बेड में डाल देती है, जिससे आपकी घोषणा रद्द हो जाती है। यह टूल इसे ईमानदारी से दो मोड में सँभालता है: "ऊँचाई गिनें" आपकी चुनी चौड़ाई पर मिलने वाली ऊँचाई का अनुमान देता है और कोड में कोई ऊँचाई नहीं लिखता, जबकि "अनुपात बलपूर्वक लागू करें" एम्बेड को असली आस्पेक्ट-रेशियो बॉक्स में रखता है, पर कैप्शन और नीचे का हिस्सा काट देता है।
नहीं - embed.js प्रति पेज केवल एक बार चाहिए, चाहे उस पेज पर कितने भी एम्बेड हों। अगर आपकी थीम या कोई दूसरा एम्बेड उसे पहले से लोड करता है, तो HTML साफ़ रखने के लिए "स्क्रिप्ट रहित" आउटपुट चुनें। अगर पेज पर कोई और उसे लोड नहीं करता, तो स्क्रिप्ट टैग रखें, वरना blockquote कभी असली पोस्ट में नहीं बदलेगा।
WordPress का Visual एडिटर स्क्रिप्ट टैग हटा देता है, इसलिए वहाँ पेस्ट करने पर लोडर चुपचाप निकल जाता है और खाली जगह या सिर्फ़ एक लिंक रह जाता है। क्लासिक एडिटर में Text टैब में, या ब्लॉक एडिटर में Custom HTML ब्लॉक में पेस्ट करें, तब एम्बेड दिखेगा। यही नियम हर उस एडिटर पर लागू होता है जो सेव करते समय HTML साफ़ करता है।
हाँ, Reels ठीक पोस्ट की तरह काम करती हैं - /reel/ या /reels/ लिंक पेस्ट करें, या Instagram द्वारा Reel के लिए दिया गया एम्बेड कोड, और वह मानक पर्मालिंक में बदल दिया जाता है। Reels 9:16 की लंबी मीडिया होती हैं, इसलिए कोड पेस्ट करने से पहले अनुपात वाले हिस्से में Reel आकार चुनें और अपनी चौड़ाई पर अपेक्षित ऊँचाई देख लें।
नहीं, कोड बनाने का पूरा काम आपके ब्राउज़र में होता है - आपका कोड पढ़ने और नया कोड बनाने में कोई नेटवर्क अनुरोध शामिल नहीं है। एकमात्र अपवाद लाइव प्रीव्यू है, जो आपके क्लिक करने तक बंद रहता है और असली एम्बेड दिखाने के लिए Instagram से उसकी स्क्रिप्ट इस पेज के एक अलग फ़्रेम में लोड करता है। प्रीव्यू न चलाएँ तो कुछ भी आपके डिवाइस से बाहर नहीं जाता।
कुछ काम नहीं कर रहा? बग रिपोर्ट करें
