अगर आप अपने WordPress Blog पर Floating Social Share Icons without Plugin लगाना चाहते हैं, तो अब यह आप बहुत ही आसानी से कर सकते हैं।
आपको Floating Social Share Icons without Plugin लगाना है तो सबसे पहले आपके पास GeneratePress Premium Theme होनी चाहिए।
अगर आपके पास GeneratePress Premium Theme नहीं है तो आप आप हमारे Telegram Channel से GeneratePress Premium Theme Plugin Download कर सकते हैं।
Floating Social Share Icons without Plugin
अपनी website पर Floating Social Share Icons without Plugin लगाने के लिए सबसे पहले आपको generate press premium theme install करके उसमें element section को enable करना होगा।
उसके बाद आप element section में जाकर एक नया hook created करेंगे –
- अब आपको hook के लिए एक title देना है।
- Hook के लिए हमने code दिया है उसे hook section में paste कर दें।
- थोड़ा scroll down करने पर hook setting में WP footer कर दें।
- Hook setting के थोड़ा नीचे execute PHP को भी enableकर दें।
- अब display rule में जाकर display की जगह आप entire site set कर दे।
Hook Code –
<?php
$currentUrl = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<div class="hc-social-icons">
<a href="https://telegram.me/share/url?url=<?php echo $currentUrl; ?>" id="tlgm" target="_blank">
<img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGZpbGw9IiMyOWI2ZjYiIGQ9Ik0yNCA0QTIwIDIwIDAgMSAwIDI0IDQ0QTIwIDIwIDAgMSAwIDI0IDRaIj48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMzLjk1LDE1bC0zLjc0NiwxOS4xMjZjMCwwLTAuMTYxLDAuODc0LTEuMjQ1LDAuODc0Yy0wLjU3NiwwLTAuODczLTAuMjc0LTAuODczLTAuMjc0bC04LjExNC02LjczMyBsLTMuOTctMi4wMDFsLTUuMDk1LTEuMzU1YzAsMC0wLjkwNy0wLjI2Mi0wLjkwNy0xLjAxMmMwLTAuNjI1LDAuOTMzLTAuOTIzLDAuOTMzLTAuOTIzbDIxLjMxNi04LjQ2OCBjLTAuMDAxLTAuMDAxLDAuNjUxLTAuMjM1LDEuMTI2LTAuMjM0QzMzLjY2NywxNCwzNCwxNC4xMjUsMzQsMTQuNUMzNCwxNC43NSwzMy45NSwxNSwzMy45NSwxNXoiPjwvcGF0aD48cGF0aCBmaWxsPSIjYjBiZWM1IiBkPSJNMjMsMzAuNTA1bC0zLjQyNiwzLjM3NGMwLDAtMC4xNDksMC4xMTUtMC4zNDgsMC4xMmMtMC4wNjksMC4wMDItMC4xNDMtMC4wMDktMC4yMTktMC4wNDMgbDAuOTY0LTUuOTY1TDIzLDMwLjUwNXoiPjwvcGF0aD48cGF0aCBmaWxsPSIjY2ZkOGRjIiBkPSJNMjkuODk3LDE4LjE5NmMtMC4xNjktMC4yMi0wLjQ4MS0wLjI2LTAuNzAxLTAuMDkzTDE2LDI2YzAsMCwyLjEwNiw1Ljg5MiwyLjQyNyw2LjkxMiBjMC4zMjIsMS4wMjEsMC41OCwxLjA0NSwwLjU4LDEuMDQ1bDAuOTY0LTUuOTY1bDkuODMyLTkuMDk2QzMwLjAyMywxOC43MjksMzAuMDY0LDE4LjQxNiwyOS44OTcsMTguMTk2eiI+PC9wYXRoPgo8L3N2Zz4="/>
</a>
<a id="wtsp" href="https://wa.me/?text=<?php echo $currentUrl; ?>" target="_blank">
<img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00Ljg2OCw0My4zMDNsMi42OTQtOS44MzVDNS45LDMwLjU5LDUuMDI2LDI3LjMyNCw1LjAyNywyMy45NzlDNS4wMzIsMTMuNTE0LDEzLjU0OCw1LDI0LjAxNCw1YzUuMDc5LDAuMDAyLDkuODQ1LDEuOTc5LDEzLjQzLDUuNTY2YzMuNTg0LDMuNTg4LDUuNTU4LDguMzU2LDUuNTU2LDEzLjQyOGMtMC4wMDQsMTAuNDY1LTguNTIyLDE4Ljk4LTE4Ljk4NiwxOC45OGMtMC4wMDEsMCwwLDAsMCwwaC0wLjAwOGMtMy4xNzctMC4wMDEtNi4zLTAuNzk4LTkuMDczLTIuMzExTDQuODY4LDQzLjMwM3oiPjwvcGF0aD48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNC44NjgsNDMuODAzYy0wLjEzMiwwLTAuMjYtMC4wNTItMC4zNTUtMC4xNDhjLTAuMTI1LTAuMTI3LTAuMTc0LTAuMzEyLTAuMTI3LTAuNDgzbDIuNjM5LTkuNjM2Yy0xLjYzNi0yLjkwNi0yLjQ5OS02LjIwNi0yLjQ5Ny05LjU1NkM0LjUzMiwxMy4yMzgsMTMuMjczLDQuNSwyNC4wMTQsNC41YzUuMjEsMC4wMDIsMTAuMTA1LDIuMDMxLDEzLjc4NCw1LjcxM2MzLjY3OSwzLjY4Myw1LjcwNCw4LjU3Nyw1LjcwMiwxMy43ODFjLTAuMDA0LDEwLjc0MS04Ljc0NiwxOS40OC0xOS40ODYsMTkuNDhjLTMuMTg5LTAuMDAxLTYuMzQ0LTAuNzg4LTkuMTQ0LTIuMjc3bC05Ljg3NSwyLjU4OUM0Ljk1Myw0My43OTgsNC45MTEsNDMuODAzLDQuODY4LDQzLjgwM3oiPjwvcGF0aD48cGF0aCBmaWxsPSIjY2ZkOGRjIiBkPSJNMjQuMDE0LDVjNS4wNzksMC4wMDIsOS44NDUsMS45NzksMTMuNDMsNS41NjZjMy41ODQsMy41ODgsNS41NTgsOC4zNTYsNS41NTYsMTMuNDI4Yy0wLjAwNCwxMC40NjUtOC41MjIsMTguOTgtMTguOTg2LDE4Ljk4aC0wLjAwOGMtMy4xNzctMC4wMDEtNi4zLTAuNzk4LTkuMDczLTIuMzExTDQuODY4LDQzLjMwM2wyLjY5NC05LjgzNUM1LjksMzAuNTksNS4wMjYsMjcuMzI0LDUuMDI3LDIzLjk3OUM1LjAzMiwxMy41MTQsMTMuNTQ4LDUsMjQuMDE0LDUgTTI0LjAxNCw0Mi45NzRDMjQuMDE0LDQyLjk3NCwyNC4wMTQsNDIuOTc0LDI0LjAxNCw0Mi45NzRDMjQuMDE0LDQyLjk3NCwyNC4wMTQsNDIuOTc0LDI0LjAxNCw0Mi45NzQgTTI0LjAxNCw0Mi45NzRDMjQuMDE0LDQyLjk3NCwyNC4wMTQsNDIuOTc0LDI0LjAxNCw0Mi45NzRDMjQuMDE0LDQyLjk3NCwyNC4wMTQsNDIuOTc0LDI0LjAxNCw0Mi45NzQgTTI0LjAxNCw0QzI0LjAxNCw0LDI0LjAxNCw0LDI0LjAxNCw0QzEyLjk5OCw0LDQuMDMyLDEyLjk2Miw0LjAyNywyMy45NzljLTAuMDAxLDMuMzY3LDAuODQ5LDYuNjg1LDIuNDYxLDkuNjIybC0yLjU4NSw5LjQzOWMtMC4wOTQsMC4zNDUsMC4wMDIsMC43MTMsMC4yNTQsMC45NjdjMC4xOSwwLjE5MiwwLjQ0NywwLjI5NywwLjcxMSwwLjI5N2MwLjA4NSwwLDAuMTctMC4wMTEsMC4yNTQtMC4wMzNsOS42ODctMi41NGMyLjgyOCwxLjQ2OCw1Ljk5OCwyLjI0Myw5LjE5NywyLjI0NGMxMS4wMjQsMCwxOS45OS04Ljk2MywxOS45OTUtMTkuOThjMC4wMDItNS4zMzktMi4wNzUtMTAuMzU5LTUuODQ4LTE0LjEzNUMzNC4zNzgsNi4wODMsMjkuMzU3LDQuMDAyLDI0LjAxNCw0TDI0LjAxNCw0eiI+PC9wYXRoPjxwYXRoIGZpbGw9IiM0MGMzNTEiIGQ9Ik0zNS4xNzYsMTIuODMyYy0yLjk4LTIuOTgyLTYuOTQxLTQuNjI1LTExLjE1Ny00LjYyNmMtOC43MDQsMC0xNS43ODMsNy4wNzYtMTUuNzg3LDE1Ljc3NGMtMC4wMDEsMi45ODEsMC44MzMsNS44ODMsMi40MTMsOC4zOTZsMC4zNzYsMC41OTdsLTEuNTk1LDUuODIxbDUuOTczLTEuNTY2bDAuNTc3LDAuMzQyYzIuNDIyLDEuNDM4LDUuMiwyLjE5OCw4LjAzMiwyLjE5OWgwLjAwNmM4LjY5OCwwLDE1Ljc3Ny03LjA3NywxNS43OC0xNS43NzZDMzkuNzk1LDE5Ljc3OCwzOC4xNTYsMTUuODE0LDM1LjE3NiwxMi44MzJ6Ij48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkuMjY4LDE2LjA0NWMtMC4zNTUtMC43OS0wLjcyOS0wLjgwNi0xLjA2OC0wLjgyYy0wLjI3Ny0wLjAxMi0wLjU5My0wLjAxMS0wLjkwOS0wLjAxMWMtMC4zMTYsMC0wLjgzLDAuMTE5LTEuMjY1LDAuNTk0Yy0wLjQzNSwwLjQ3NS0xLjY2MSwxLjYyMi0xLjY2MSwzLjk1NmMwLDIuMzM0LDEuNyw0LjU5LDEuOTM3LDQuOTA2YzAuMjM3LDAuMzE2LDMuMjgyLDUuMjU5LDguMTA0LDcuMTYxYzQuMDA3LDEuNTgsNC44MjMsMS4yNjYsNS42OTMsMS4xODdjMC44Ny0wLjA3OSwyLjgwNy0xLjE0NywzLjIwMi0yLjI1NWMwLjM5NS0xLjEwOCwwLjM5NS0yLjA1NywwLjI3Ny0yLjI1NWMtMC4xMTktMC4xOTgtMC40MzUtMC4zMTYtMC45MDktMC41NTRzLTIuODA3LTEuMzg1LTMuMjQyLTEuNTQzYy0wLjQzNS0wLjE1OC0wLjc1MS0wLjIzNy0xLjA2OCwwLjIzOGMtMC4zMTYsMC40NzQtMS4yMjUsMS41NDMtMS41MDIsMS44NTljLTAuMjc3LDAuMzE3LTAuNTU0LDAuMzU3LTEuMDI4LDAuMTE5Yy0wLjQ3NC0wLjIzOC0yLjAwMi0wLjczOC0zLjgxNS0yLjM1NGMtMS40MS0xLjI1Ny0yLjM2Mi0yLjgxLTIuNjM5LTMuMjg1Yy0wLjI3Ny0wLjQ3NC0wLjAzLTAuNzMxLDAuMjA4LTAuOTY4YzAuMjEzLTAuMjEzLDAuNDc0LTAuNTU0LDAuNzEyLTAuODMxYzAuMjM3LTAuMjc3LDAuMzE2LTAuNDc1LDAuNDc0LTAuNzkxYzAuMTU4LTAuMzE3LDAuMDc5LTAuNTk0LTAuMDQtMC44MzFDMjAuNjEyLDE5LjMyOSwxOS42OSwxNi45ODMsMTkuMjY4LDE2LjA0NXoiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPgo8L3N2Zz4="/>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $currentUrl; ?>" id="fbicn" target="_blank">
<img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGZpbGw9IiMwMzliZTUiIGQ9Ik0yNCA1QTE5IDE5IDAgMSAwIDI0IDQzQTE5IDE5IDAgMSAwIDI0IDVaIj48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjU3MiwyOS4wMzZoNC45MTdsMC43NzItNC45OTVoLTUuNjl2LTIuNzNjMC0yLjA3NSwwLjY3OC0zLjkxNSwyLjYxOS0zLjkxNWgzLjExOXYtNC4zNTljLTAuNTQ4LTAuMDc0LTEuNzA3LTAuMjM2LTMuODk3LTAuMjM2Yy00LjU3MywwLTcuMjU0LDIuNDE1LTcuMjU0LDcuOTE3djMuMzIzaC00LjcwMXY0Ljk5NWg0LjcwMXYxMy43MjlDMjIuMDg5LDQyLjkwNSwyMy4wMzIsNDMsMjQsNDNjMC44NzUsMCwxLjcyOS0wLjA4LDIuNTcyLTAuMTk0VjI5LjAzNnoiPjwvcGF0aD4KPC9zdmc+"/>
</a>
</div>
Floating Social Share CSS
अब आपको अपने social share buttons के लिए CSS and करनी होगी जो आप theme customisation के section में जाकर additional CSS की जगह add कर सकते हैं।
CSS Code –
.hc-social-icons{
position: fixed;
top: 30%;
left: 0;
display: flex;
flex-direction: column;}
.hc-social-icons img{
height: 30px;
margin: 4px;}
#wtsp{
background-color: #1ecc5e;}
#tlgm{
background-color: #29b6f6;
border-radius: 0 10px 0 0;
}
#fbicn{
background-color: #039be5;
border-radius: 0 0 10px 0;}
@media (max-width: 300px) {
.hc-social-icons {
display: none; }}
अब आपको अपनी website को Cache clear करके reload करना है आपकी website पर Hindi creator की तरह है floating social share button without plugin दिखने लगेंगे।