How do I add social share buttons in GeneratePress?

हम इस लेख में बार करेगे कि बिना किसी plugins के Generatepress वेबसाइट में add social share buttons in GeneratePress थीम में सोशल शेयर बटन जोड़ने के लिए, इन चरणों का पालन करें। यह गाइड कस्टम कोड html ,css ,php का उपयोग करके मैन्युअल रूप से सोशल शेयर बटन जोड़ने का तरीका बताता है। डेमो के लिए इस लिंक पर क्लिक कर के देख सकते है कि add social share buttons in GeneratePress without plugins केसे दीखते है

आप को social share button को वेबसाइट में ऐड करने कि प्रोसेस स्टेप बाय स्टेप बताई गई है इसे फॉलो कर के आप भी अपनी वेबसाइट में social share के आप्शन को जोड़ सकते है |

सबसे पहले, आपको सोशल शेयर बटन के लिए HTML कोड जोड़ना होगा। यह आपके पोस्ट कंटेंट में या उन्हें किसी खास स्थान पर रखने के लिए हुक का उपयोग करके किया जा सकता है।

Go to Appearance > Elements in your WordPress dashboard.
Click Add New and select Hook as the element type.
Enter a title for your hook (e.g., “Social Share Buttons”).
In the Hook field, select the appropriate hook where you want to place the social share buttons. For example, you can use generate_after_content to place the buttons after the post content.
In the Content field, paste the following HTML code for the social share buttons:

<div class="social-share-buttons">
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer">
    <img src="path/to/facebook-icon.png" alt="Share on Facebook">
  </a>
  <a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer">
    <img src="path/to/twitter-icon.png" alt="Share on Twitter">
  </a>
  <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="noopener noreferrer">
    <img src="path/to/linkedin-icon.png" alt="Share on LinkedIn">
  </a>
</div>

Replace path/to/facebook-icon.png, path/to/twitter-icon.png, and path/to/linkedin-icon.png with the actual paths to your social media icons.

Set the Display Rules to specify where you want the social share buttons to appear (e.g., all posts).
Click Publish.

Step 2: Add CSS for Styling the Buttons

इसके बाद, सोशल शेयर बटन को स्टाइल करने के लिए कुछ CSS जोड़ें। आप WordPress Customizer में अतिरिक्त CSS अनुभाग में CSS कोड जोड़कर ऐसा कर सकते हैं।

Go to Appearance > Customize > Additional CSS.
Paste the following CSS code:

.social-share-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.social-share-buttons a {
  margin: 0 10px;
}

.social-share-buttons img {
  width: 32px;
  height: 32px;
}

अब, अपनी साइट पर किसी पोस्ट पर जाकर सोशल शेयर बटन को क्रियाशील देखें। उन्हें हुक के साथ आपके द्वारा निर्दिष्ट स्थान पर दिखाई देना चाहिए, और उन्हें आपके द्वारा जोड़े गए CSS के अनुसार स्टाइल किया जाना चाहिए।

यदि आप और अधिक सोशल नेटवर्क जोड़ना चाहते हैं, तो बस चरण 1 में HTML कोड में उचित URL और आइकन के साथ अधिक तत्व जोड़ें।

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