If you look through the WordPress repository without plugin and create social share URLs links Facebook, Twitter, Reddit, Linkedin, WhatsApp and more, we will provide code for WordPress users, no need to edit any thing your site visitors a way to share or like content on your site. We were building his entire social share URLs links only less than 1kb file these is small size, so this simple change and make social share URLs links affect your page load time, slow site load time isn’t just a bad behavior for users but it also affects your Google Site Ranking and SERP search engine result page listing.
In this article, you will learn how to easily create social share links or buttons for Facebook, Twitter, LinkedIn, Reddit and top social media platform that can be used in your WordPress site and also HTML or PHP version. It is important to make it easy for visitors to share your content because that will increase your website’s popularity.
Find Best Place you put Social Share Links
The most common place to put the social share links is just above and below the content of your page or blog post on your WordPress site or HTML or PHP framework. Simple follow this steps and you can create your own social share URLs links very easy.
Step 1: Set Styling the Social Media Buttons
Login to your WordPress admin panel → Appearance → Theme Editor → style.css
Place the code for styling the buttons, code is here for styling the buttons.
.shareon{ width: fit-content;float: left; margin-right: 15px; margin: 15px;}
.social-con{ width: max-content; display: inline-block; padding: 10px 10px 8px 10px; border: 1px solid gainsboro; border-radius: 2px; }
.social-con a{ display: inherit;}
.backco_ svg{ width: 23px; padding: 5px; border-radius: 2px; }
.facebook svg{ background:#3b5998; }
.twitter svg{ background:#55acee;}
.reddit svg{ background:#ff4500;}
.linkedin svg{ background:#007bb5;}
.whatsapp svg{ background:#12af0a;}
.telegram svg{ background:#2ca5e0;}
.pocket svg{ background:#ee4056;}
.blogger svg{ background:#fda352;}Step 2: Add Share Button Where you want
Place the code for html where you want your page on top or bottom or both side styling, Here is the code.
<h2 class="shareon">Share on: </h2>
<div class="social-con">
<a href="#facebook" class="facebook backco_" title="Facebook"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M17.78 27.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99 2.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123 0-5.26 1.905-5.26 5.405v3.016h-3.53v4.09h3.53V27.5h4.223z"></path></svg></a>
<a href="#twitter" class="twitter backco_" title="Twitter"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M28 8.557a9.913 9.913 0 0 1-2.828.775 4.93 4.93 0 0 0 2.166-2.725 9.738 9.738 0 0 1-3.13 1.194 4.92 4.92 0 0 0-3.593-1.55 4.924 4.924 0 0 0-4.794 6.049c-4.09-.21-7.72-2.17-10.15-5.15a4.942 4.942 0 0 0-.665 2.477c0 1.71.87 3.214 2.19 4.1a4.968 4.968 0 0 1-2.23-.616v.06c0 2.39 1.7 4.38 3.952 4.83-.414.115-.85.174-1.297.174-.318 0-.626-.03-.928-.086a4.935 4.935 0 0 0 4.6 3.42 9.893 9.893 0 0 1-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.953 13.953 0 0 0 7.55 2.213c9.056 0 14.01-7.507 14.01-14.013 0-.213-.005-.426-.015-.637.96-.695 1.795-1.56 2.455-2.55z"></path></svg></a>
<a href="#reddit" class="reddit backco_" title="Reddit"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.543 15.774a2.953 2.953 0 0 0-2.951-2.949 2.882 2.882 0 0 0-1.9.713 14.075 14.075 0 0 0-6.85-2.044l1.38-4.349 3.768.884a2.452 2.452 0 1 0 .24-1.176l-4.274-1a.6.6 0 0 0-.709.4l-1.659 5.224a14.314 14.314 0 0 0-7.316 2.029 2.908 2.908 0 0 0-1.872-.681 2.942 2.942 0 0 0-1.618 5.4 5.109 5.109 0 0 0-.062.765c0 4.158 5.037 7.541 11.229 7.541s11.22-3.383 11.22-7.541a5.2 5.2 0 0 0-.053-.706 2.963 2.963 0 0 0 1.427-2.51zm-18.008 1.88a1.753 1.753 0 0 1 1.73-1.74 1.73 1.73 0 0 1 1.709 1.74 1.709 1.709 0 0 1-1.709 1.711 1.733 1.733 0 0 1-1.73-1.711zm9.565 4.968a5.573 5.573 0 0 1-4.081 1.272h-.032a5.576 5.576 0 0 1-4.087-1.272.6.6 0 0 1 .844-.854 4.5 4.5 0 0 0 3.238.927h.032a4.5 4.5 0 0 0 3.237-.927.6.6 0 1 1 .844.854zm-.331-3.256a1.726 1.726 0 1 1 1.709-1.712 1.717 1.717 0 0 1-1.712 1.712z" fill="#fff"></path></svg></a>
<a href="#linkedin" class="linkedin backco_" title="Linkedin"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6.227 12.61h4.19v13.48h-4.19V12.61zm2.095-6.7a2.43 2.43 0 0 1 0 4.86c-1.344 0-2.428-1.09-2.428-2.43s1.084-2.43 2.428-2.43m4.72 6.7h4.02v1.84h.058c.56-1.058 1.927-2.176 3.965-2.176 4.238 0 5.02 2.792 5.02 6.42v7.395h-4.183v-6.56c0-1.564-.03-3.574-2.178-3.574-2.18 0-2.514 1.7-2.514 3.46v6.668h-4.187V12.61z" fill="#FFF"></path></svg></a>
<a href="#whatsapp" class="whatsapp backco_" title="WhatsApp"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M16.21 4.41C9.973 4.41 4.917 9.465 4.917 15.7c0 2.134.592 4.13 1.62 5.832L4.5 27.59l6.25-2.002a11.241 11.241 0 0 0 5.46 1.404c6.234 0 11.29-5.055 11.29-11.29 0-6.237-5.056-11.292-11.29-11.292zm0 20.69c-1.91 0-3.69-.57-5.173-1.553l-3.61 1.156 1.173-3.49a9.345 9.345 0 0 1-1.79-5.512c0-5.18 4.217-9.4 9.4-9.4 5.183 0 9.397 4.22 9.397 9.4 0 5.188-4.214 9.4-9.398 9.4zm5.293-6.832c-.284-.155-1.673-.906-1.934-1.012-.265-.106-.455-.16-.658.12s-.78.91-.954 1.096c-.176.186-.345.203-.628.048-.282-.154-1.2-.494-2.264-1.517-.83-.795-1.373-1.76-1.53-2.055-.158-.295 0-.445.15-.584.134-.124.3-.326.45-.488.15-.163.203-.28.306-.47.104-.19.06-.36-.005-.506-.066-.147-.59-1.587-.81-2.173-.218-.586-.46-.498-.63-.505-.168-.007-.358-.038-.55-.045-.19-.007-.51.054-.78.332-.277.274-1.05.943-1.1 2.362-.055 1.418.926 2.826 1.064 3.023.137.2 1.874 3.272 4.76 4.537 2.888 1.264 2.9.878 3.43.85.53-.027 1.734-.633 2-1.297.266-.664.287-1.24.22-1.363-.07-.123-.26-.203-.54-.357z"></path></svg></a>
<a href="#telegram" class="telegram backco_" title="Telegram"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M25.515 6.896L6.027 14.41c-1.33.534-1.322 1.276-.243 1.606l5 1.56 1.72 5.66c.226.625.115.873.77.873.506 0 .73-.235 1.012-.51l2.43-2.363 5.056 3.734c.93.514 1.602.25 1.834-.863l3.32-15.638c.338-1.363-.52-1.98-1.41-1.577z"></path></svg></a>
<a href="#pocket" class="pocket backco_" title="Pocket"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M16.005 6.244c2.927 0 5.854-.002 8.782 0 1.396.002 2.195.78 2.188 2.165-.015 2.483.116 4.985-.11 7.454-.75 8.204-10.027 12.607-16.91 8.064-3.086-2.037-4.82-4.926-4.917-8.673-.06-2.34-.034-4.684-.018-7.025.008-1.214.812-1.98 2.056-1.983 2.975-.01 5.952-.005 8.93-.007zm-5.037 5.483c-.867.093-1.365.396-1.62 1.025-.27.67-.078 1.256.417 1.732a529.74 529.74 0 0 0 5.09 4.838c.745.695 1.537.687 2.278-.01a473.74 473.74 0 0 0 4.93-4.686c.827-.797.91-1.714.252-2.38-.694-.704-1.583-.647-2.447.17-1.097 1.04-2.215 2.06-3.266 3.143-.485.492-.77.432-1.227-.027a87.392 87.392 0 0 0-3.39-3.225c-.325-.29-.77-.448-1.017-.584z"></path></svg></a>
<a href="#blogger" class="blogger backco_" title="Blogger"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M25.793 14.325l-.166-.344-.277-.214c-.363-.284-2.2.02-2.695-.43-.352-.324-.404-.905-.51-1.69-.197-1.527-.322-1.606-.56-2.122-.866-1.836-3.214-3.217-4.825-3.408h-4.367c-3.436 0-6.244 2.814-6.242 6.248v7.29c0 3.428 2.81 6.238 6.248 6.238h7.174c3.436 0 6.225-2.81 6.244-6.237l.04-5.048-.06-.277zM12.47 11.22h3.464c.66 0 1.195.534 1.195 1.188 0 .653-.54 1.195-1.2 1.195h-3.46c-.66 0-1.194-.542-1.194-1.195 0-.654.535-1.19 1.195-1.19zm7.038 9.526H12.47c-.66 0-1.194-.54-1.194-1.188 0-.654.535-1.19 1.195-1.19h7.04c.655 0 1.19.536 1.19 1.19 0 .646-.535 1.188-1.19 1.188z"></path></svg></a>
</div>Step 3: Replace and link to your content
Facebook Social Share URL:
https://www.facebook.com/sharer.php?u=[post-url]For WordPress Replace:
https://www.facebook.com/sharer.php?u=Twitter Social Share URL:
https://twitter.com/share?url=[post-url]&text=[post-title]&via=[via]&hashtags=[hashtags]For WordPress Replace:
https://twitter.com/share?url=&text=&via=Reddit Social Share URL:
https://reddit.com/submit?url=[post-url]&title=[post-title]For WordPress Replace:
https://reddit.com/submit?url=&title=https://reddit.com/submit?url=[post-url]&title=[post-title]Linkedin Social Share URL:
https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]For WordPress Replace:
https://www.linkedin.com/shareArticle?url=&title=WhatsApp Social Share URL:
https://wa.me/?text=[post-title] | [post-url]For WordPress Replace:
https://wa.me/?text= | Telegram Social Share URL:
https://telegram.me/share/url?url=[post-url]&text=[post-title]For WordPress Replace:
https://telegram.me/share/url?url=&text=Pocket Social Share URL:
https://getpocket.com/save?url=[post-url]&title=[post-title]For WordPress Replace:
https://getpocket.com/save?url=&title=Blogger Social Share URL:
https://www.blogger.com/blog_this.pyra?u=[post-url]&n=[post-title]&t=[post-description]
For WordPress Replace:
https://www.blogger.com/blog_this.pyra?u=&n=&t=WordPress Social Share URL:
https://wordpress.com/press-this.php?u=[post-url]&t=[post-title]&s=[post-desc]&i=[post-img]
For WordPress Replace:
https://wordpress.com/press-this.php?u=&t=&s=Evernote Social Share URL:
https://www.evernote.com/clip.action?url=[post-url]&title=[post-title]
For WordPress Replace:
https://www.evernote.com/clip.action?url=&title=Delicious Social Share URL:
https://delicious.com/save?v=5&provider=[provider]&noui&jump=close&url=[post-url]&title=[post-title]
For WordPress Replace:
https://delicious.com/save?v=5x&provider=&noui&jump=close&url=&title=StumbleUpon Social Share URL:
https://www.stumbleupon.com/submit?url=[post-url]&title=[post-title]
For WordPress Replace:
https://www.stumbleupon.com/submit?url=&title=I hope you finds all above URLs handy for your social sharing buttons. Please feel free to Share your button settings from your web site in the comments area. Let us know your comments and ideas for creating share links or sharing buttons on other social networks.