वीडियो उपयोगकर्ता सगाई को बढ़ावा देने के सर्वोत्तम तरीके हैं। हाल ही में हमारे उपयोगकर्ताओं में से एक ने हमें एक लोकप्रिय साइट के समान वीडियो के शेयर बटन ओवरले बनाने के बारे में पूछा है। इस लेख में, हम आपको दिखाएंगे कि वर्डप्रेस में यूट्यूब वीडियो पर ओवरले के रूप में शेयर बटन कैसे जोड़ें।
यह कैसा दिखता है इसका उदाहरण:
YouTube वीडियो पर ओवरले के रूप में शेयर बटन जोड़ना
यह कई तरीकों से किया जा सकता था। हर बार जब आप कोई वीडियो जोड़ते हैं तो आपको हर बार एचटीएमएल कोड का टुकड़ा पेस्ट करने की ज़रूरत होती है। ऐसा करने के बजाय, हमने एक शोर्ट कोड बनाने का निर्णय लिया है जो इस ओवरले प्रभाव को स्वचालित करेगा।
बस एक साइट-विशिष्ट प्लग इन या अपने विषय के functions.php फ़ाइल में निम्नलिखित कोड को कॉपी और पेस्ट करें:
/// साइट का यूट्यूब शेयर ओवरले बटन
फ़ंक्शन wpb_yt_buttons ($ atts) {
// शोर्ट से वीडियो आईडी प्राप्त करें
निकालें (शॉर्टकट_ैट्स (सरणी (
'वीडियो' => ''
), $ एटीटी));
// प्रदर्शन वीडियो
// फेसबुक शेयर बटन जोड़ें
$ स्ट्रिंग। = '
‘;
// वीडियो कंटेनर बंद करें
$ स्ट्रिंग। = ”;
// वापसी आउटपुट
वापसी $ स्ट्रिंग;
}
// शोर्ट जोड़ें
add_shortcode (‘wpb- yt’, ‘wpb_yt_buttons’);
यह कोड एक शोर्टकोड बनाता है जो स्वचालित रूप से आपके वीडियो के लिए ट्विटर और फेसबुक शेयर लिंक जोड़ता है। ये बटन केवल तब दिखाई देते हैं जब उपयोगकर्ता अपने माउस को वीडियो पर लाता है। आप इसका उपयोग किसी भी अन्य सामाजिक मीडिया चैनल को भी जोड़ सकते हैं।
इस शोर्ट कोड का उपयोग करने के लिए, आपको बस इस तरह की शोर्टकोड में यूट्यूब वीडियो आईडी जोड़ना होगा:
[wpb-yt video = "qzOOy1tWBCg"]
आप यूआरएल स्ट्रिंग से यूट्यूब वीडियो आईडी प्राप्त कर सकते हैं। इस कदर:
अब जब आप एक वीडियो जोड़ते हैं, तो आप फेसबुक या ट्विटर पर वीडियो साझा करने के लिए अपने यूट्यूब वीडियो और सादा पाठ लिंक देख पाएंगे। आप देखेंगे कि ये लिंक बिल्कुल स्टाइल नहीं हैं।
तो इन लिंक्स को बटन बनाने की सुविधा देता है, इसलिए यह थोड़ा अच्छा लगता है। हम इन बटनों को भी छिपाएंगे और उन्हें केवल तभी दिखाएंगे जब एक उपयोगकर्ता वीडियो कंटेनर पर अपना माउस लेता है। ऐसा करने के लिए अपने बाल थीम के स्टाइलशीट में निम्नलिखित सीएसएस जोड़ें।
# साझा-वीडियो-ओवरले {
स्थिति: रिश्तेदार;
सही: 40px;
शीर्ष: -190px;
सूची-शैली-प्रकार: कोई नहीं;
प्रदर्शन क्षेत्र;
अस्पष्टता: 0;
फिल्टर: अल्फा (अस्पष्टता = 0);
-वेबकिट-संक्रमण: अस्पष्टता .4s, शीर्ष .25s;
-मोझ-संक्रमण: अस्पष्टता .4s, शीर्ष .25s;
-ओ-संक्रमण: अस्पष्टता .4s, शीर्ष .25s;
संक्रमण: अस्पष्टता .4s, शीर्ष .25s;
z- इंडेक्स: 500;
}
# शेयर-वीडियो ओवरले: होवर {
अस्पष्टता: 1;
फिल्टर: अल्फा (अस्पष्टता = 100);
}
.share- वीडियो ओवरले ली {
मार्जिन: 5px 0px 5px 0px;
}
#फेसबुक {
रंग: #ffffff;
पृष्ठभूमि रंग: # 3e5ea1;
चौड़ाई: 70px;
पैडिंग: 5 पीएक्स;
}
.facebook a: लिंक, .facebook a: सक्रिय, .facebook a: विज़िट किए गए {
रंग: #fff;
text-decoration: कोई नहीं;
}
#ट्विटर {
पृष्ठभूमि का रंग: # 00a6d4;
चौड़ाई: 70px;
पैडिंग: 5 पीएक्स;
}
.टीवीटर ए,। ट्वीटर ए: लिंक, .टीटीआई ए: एक्टिव, .टीटीटीआई ए: विज़िट किया गया, .टीटीटीआई ए: होवर {
रंग: #fff;
text-decoration: कोई नहीं;
}
बस इतना ही। अब आपको वर्डप्रेस में अपने यूट्यूब वीडियो पर शेयर बटन ओवरले होना चाहिए।
वर्डप्रेस में यूट्यूब वीडियो प्लेलिस्ट के लिए ओवरले के रूप में शेयर बटन जोड़ना
इस आलेख को प्रकाशित करने के बाद हमारे कई पाठकों ने पूछा, कैसे यूट्यूब प्लेलिस्ट और वीडियो के लिए काम करने के लिए इस कोड को संशोधित किया जा सकता है। यदि आप अपने WordPress साइट पर यूट्यूब वीडियो और प्लेलिस्ट को एम्बेड करते हैं, तो आपको इसके बजाय इस कोड का उपयोग करना चाहिए।
/ *
* साइट के शेयर ओवरले बटन
* यूट्यूब वीडियो और प्लेलिस्ट पर
* /
फ़ंक्शन wpb_yt_buttons ($ atts) {
// शोर्ट से वीडियो और प्लेलिस्ट आईडी प्राप्त करें
निकालें (शॉर्टकट_ैट्स (सरणी (
'वीडियो' => '',
'प्लेलिस्ट' => '',
), $ एटीटी));
// यह देखने के लिए जांचें कि क्या प्लेलिस्ट आईडी शोर्ट के साथ प्रदान की गई है
अगर (! $ प्लेलिस्ट == ''):
// प्रदर्शन वीडियो प्लेलिस्ट
// फेसबुक बटन जोड़ें
$ स्ट्रिंग। = '
‘;
// वीडियो कंटेनर बंद करें
$ स्ट्रिंग। = ”;
// यदि कोई प्लेलिस्ट आईडी प्रदान नहीं की गई है
अन्य :
// प्रदर्शन वीडियो
// फेसबुक बटन जोड़ें
$ स्ट्रिंग। = ‘
‘;
// वीडियो कंटेनर बंद करें
$ स्ट्रिंग। = ”;
अगर अंत;
// वापसी आउटपुट
वापसी $ स्ट्रिंग;
}
// शोर्ट जोड़ें
add_shortcode (‘wpb- yt’, ‘wpb_yt_buttons’);
उपरोक्त कोड का उपयोग करके आप शेयर बटन ओवरलेइंग के साथ प्लेलिस्ट भी जोड़ सकते हैं अपनी प्लेलिस्ट प्रदर्शित करने के लिए आपको इस तरह शोर्टकोड में वीडियो आईडी और प्लेलिस्ट आईडी प्रदान करना होगा:
[wpb-yt वीडियो = "exP9N3rIfV0" प्लेलिस्ट = "UUhA624rCabHAmd6lpkLOw7A"]
आप यूट्यूब पर प्लेलिस्ट पर जाकर यूआरएल की सूची आईडी को कॉपी करके अपने वीडियो और प्लेलिस्ट आईडी प्राप्त कर सकते हैं, जैसे:
यूट्यूब वीडियो पर शेयर बटन ओवरले में वर्डप्रेस पोस्ट लिंक जोड़ना
हम इस लेख को प्रकाशित करने के बाद, हमारे कुछ उपयोगकर्ताओं ने पूछा कि वे शेयर बटन को यूट्यूब वीडियो लिंक के बजाय उनके वर्डप्रेस पोस्ट की लिंक साझा करना चाहते हैं। ऐसा करने के लिए आपको वर्डप्रेस पोस्ट के पर्मलिंक के साथ साझा करें बटन में वीडियो यूआरएल को बदलना होगा। इस कोड का उपयोग अपने functions.php या साइट-विशिष्ट प्लग इन में करें:
/// साइट का यूट्यूब शेयर ओवरले बटन
फ़ंक्शन wpb_yt_buttons ($ atts) {
// शोर्ट से वीडियो आईडी प्राप्त करें
निकालें (शॉर्टकट_ैट्स (सरणी (
'वीडियो' => ''
), $ एटीटी));
// प्रदर्शन वीडियो
// पोस्ट पर्मालिंक प्राप्त करें और यूआरएल को एन्कोड करें
$ permalink_encoded = urlencode (get_permalink ());
// फेसबुक शेयर बटन जोड़ें
$ स्ट्रिंग। = '
‘;
// वीडियो कंटेनर बंद करें
$ स्ट्रिंग। = ”;
// वापसी आउटपुट
वापसी $ स्ट्रिंग;
}
// शोर्ट जोड़ें
add_shortcode (‘wpb- yt’, ‘wpb_yt_buttons’);
अपनी आवश्यकताओं को पूरा करने के लिए सीएसएस या शॉर्टकोड स्निपेट को संशोधित करने के लिए बेझिझक। आगे अपने वीडियो का अनुकूलन करने के लिए, आप अपने यूट्यूब वीडियो FitVids jQuery प्लगइन का उपयोग कर उत्तरदायी बना सकते हैं। आप वीडियो के अंत में दिखाई देने वाले संबंधित वीडियो भी बंद कर सकते हैं। या यहां तक कि यूट्यूब वीडियो थंबनेल से विशेष रुप से छवियों को बनाते हैं।
हमें उम्मीद है कि इस आलेख ने आपको वर्डप्रेस में यूट्यूब वीडियो पर ओवरले के रूप में कस्टम शेयर बटन जोड़ने में मदद की। हमें बताएं कि नीचे दिए गए एक टिप्पणी को छोड़कर आप कौन सा सोशल मीडिया चैनल अपने वीडियो में शामिल करने की योजना बना रहे हैं