By exploring the WordPress repository and generating social share URLs for platforms like Facebook, Twitter, Reddit, LinkedIn, WhatsApp, and more, we offer WordPress users a code solution that seamlessly integrates with your site. This eliminates the need for any manual adjustments, providing your site’s visitors with a convenient means to share or appreciate the content.
Our solution revolves around a remarkably compact file, totaling less than 1kb, housing the entire collection of social share URLs. This minimal file size ensures a simple modification that won’t adversely impact your page loading speed. Recognize that sluggish site performance isn’t merely an inconvenience for users; it can also detrimentally affect your Google Site Ranking and the placement of your pages within the SERP (Search Engine Result Page).
Within this guide, you’ll gain insight into effortlessly crafting social share links or buttons for prominent platforms such as Facebook, Twitter, LinkedIn, and Reddit. These elements can be seamlessly integrated into your WordPress site, as well as in an HTML or PHP version. Facilitating content sharing is of utmost importance, as it contributes to enhancing your website’s overall popularity.
Discover the Optimal Locations for Placing Social Share Links
The conventional approach for situating social share links involves positioning them immediately above and below the main content of your webpage or blog post. This practice applies whether you’re operating within a WordPress environment or utilizing an HTML or PHP framework. By adhering to these straightforward steps, you can effortlessly generate your own social share URLs.
Step 1: Configure the Styling of Social Media Buttons
To initiate the styling process for your social media buttons, follow these steps:
- Log in to your WordPress admin panel.
- Navigate to “Appearance” and select “Theme Editor.”
- Locate and access the “style.css” file.
Once you’re in the “style.css” file, insert the provided code snippet designed for button styling.
.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: Integrate Share Button Where Desired
Embed the HTML code at your preferred location on the page, whether it’s at the top, bottom, or even both sides. Utilize the following code snippet for seamless integration:
<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: Substitution and Linking to Your Content
For 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 trust you find the aforementioned URLs valuable for your social sharing buttons. We warmly encourage you to share your button configurations on your website within the comments section. Your feedback is greatly appreciated, and we are eager to hear your thoughts and suggestions for crafting share links or sharing buttons for various other social networks.