Social media and messaging apps are a great way to get traffic to your blog. In fact diversifying your traffic sources is important. It is desired to have balanced traffic from search engines, email newsletters, referral traffic from other web sites, traffic from social media.
In this tutorial you will learn how to add a share button to your blog without any plugin. We will add a very light share button that will not slow down your blog and will not use any server resources of your host. Share button which is not blocked by ad blockers with ability to share to any installed social media application on user device.
You will learn:
- Add share button without plugin to your blog.
- Measure traffic returned to shared content.
- Track number of shares.
Table of Contents
Add share button to WordPress
In this tutorial we are going to use native share functionality available to the user browser and device. More about native share and comparison with other sharing options explained below in this article.
Follow these steps to add a social share button to your WordPress website without plugin. Share button will be added as a regular widget and appear at the bottom right corner as a floating share button.
- Navigate to “Appearance” → “Widgets” page from WordPress dashboard.
- Click the “+” button inside the widget area and search for HTML widget using search box. Select “HTML” widget.
- Copy and Paste native social share button code inside HTML widget. Click the “Update” button to save sidebar changes.
Share button code and details:
- Share Button code
- How to use share button?
- Browser support
- View share button reports
- Define image for shared content
Native Social Share Button code
Copy the following code for the share button and place it in the HTML widget in WordPress.
<script>
/* veppa_native_share https://veppa.com/share-button/ version: 1.0 */
function veppa_native_share(){
if(navigator.share){
console.log('veppa_native_share:supported');
const sh = document.createElement("a");
sh.className = 'shhr-btn';
sh.href = '#shr';
const title = document.title;
const url = (document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href);
const urlshr=url+'?utm_source=share&utm_medium=social&utm_campaign=social';
sh.addEventListener('click', event => {
navigator.share({title:title,url:urlshr})
.then(() => {
console.log('Thanks for sharing!');
if (typeof ga === "function"){
ga('send', {'hitType': 'event','eventCategory': 'share','eventAction': 'native','eventLabel': url});
}else if (typeof gtag === "function"){
gtag('event', 'share', {url: url, event_category:'share', event_label:url});
}
})
.catch(error => {
// hide share button sh.remove();
console.log(error)
});
event.preventDefault();
});
document.body.appendChild(sh);
}else{
console.log('veppa_native_share:NOT-supported');
}
}
setTimeout(veppa_native_share,1000);
</script>
<style>
/* veppa_native_share https://veppa.com/share-button/ version: 1.0 */
.shhr-btn::before {width:16px;height:16px;content:'';background-size: 100% 100%;display:block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.6 512.6' style='enable-background:new 0 0 512.629 512.629' xml:space='preserve' fill='%23ffffff' width='512' height='512'%3E%3Cpath d='M0 256a99 99 0 0 0 167 73l148 67-2 16a100 100 0 1 0 18-56l-139-63c10-23 10-50 0-74l138-63a99 99 0 1 0-15-40l-148 67A99 99 0 0 0 0 256z'/%3E%3C/svg%3E");}
.shhr-btn{position:fixed;bottom:20px;right:20px;padding:7px;border-radius:7px;line-height:1;box-shadow: 0 0 5px rgba(0,0,0,.5); background-color:rgba(0,0,0,.5); z-index:9999;}
.shhr-btn:hover,.shhr-btn:active,.shhr-btn:focus{opacity:0.8;}
</style>
Change log
Version 1.0: (date 18.07.2022)
- Initial release
How site visitors will use native social share button?
Native social share button will appear in the right bottom corner on your blog. It is a floating button. Button will show only on supported browsers and devices.
We use the social share button on this website so you can see it in action here. Click on the button using various devices and see how it works. In the screenshot above you can see what happens when it is clicked on an android device and on Windows PC. Each system will show only installed applications that accept native share functionality of the device. You will not see the Facebook button if it is not installed on your device. You will see only installed applications on your device. This will be different for each device.
When you install a new application that supports accepting shares then you will see its share targets.
List of supported browsers and operating systems listed below.
Requirements to use share button
There are certain criteria for native share buttons to work. All of them are common for the majority of web sites and users visiting your website. Percentage of technology adaptation grows over time.
- Website must be served over a secure HTTPS connection. Which is also recommended for SEO.
- Users must use a supported web browser. Browser support as of June 2022 is 89% worldwide (source https://caniuse.com/web-share ). As of January 2021, it is available on Safari, Android in Chromium forks, ChromeOS, and Chrome on Windows. (source https://web.dev/web-share/ )
Track most shared posts and learn from them
Native share tracks usage of social shares in 2 stages. Google analytics used for tracking and reporting.
Stage 1: Share event when button clicked
Script sends a “share” event to Google Analytics (Universal or GA4 gtag) if it exists on the page. Share button click report can be found on Google Analytics.
How to view number of share button clicks?
- Navigate to “Behavior” → “Events” → “Top Events” page.
- Click on the “Share” event category.
- Click on the “Event Label” tab to view which pages are shared using native social share button.
You can see page URLs and share count for each page in the “Event Label” report for “Share” event category. Using this report you can analyze what factors lead to sharing a page. It can be page title, page content, media used in page, page article style etc.
Stage 2: Pageview when traffic come using shared link
Each shared page has a custom variable at the end added by native social share button script. It is UTM variables (Urchin Tracking Module parameters explained in Google and Wikipedia ) that will classify traffic from these URLs as social traffic in Google Analytics.
How to view traffic coming from shared content?
- Navigate to “Acquisition” → “All Traffic” → “Source/Medium” page in Google Analytics.
- Click on the “share / social” link from the table. It will show if you have any traffic coming with UTM parameters
?utm_source=share&utm_medium=social. - On the opened page click on the “Other” tab and click on the “Landing Page” dimension. Search for it if it is not visible initially. On the updated page you will see “Top pages” that get traffic from shared content using Native Social Share Button that we added.
From this list you can see which content gets more clicks. This will help you to focus on producing similar types of content to get more traffic from social media. It also shows which content should be shared for getting more traffic.
Generally traffic from instant messaging apps like Line, IMO, ICQ, Viber, Wechat, Whatsapp is counted as “Direct” traffic. We add the UTM variable utm_medium=social to this URL so that it will be counted as “Social” traffic instead of “Direct”. This way we can measure performance of shares which were previously not counted as traffic from social media. We will know which type of content is popular on Social Media and pay attention when creating new content or optimizing existing articles.
To summarize the above reports from images we can see that in one month there were 100 social media shares. 94 users came using those shares. 47 new users came. Total 170 sessions created, each session having 4.44 page views resulting in 754 page views generated from those shares. It also shows that we have 0.63% users come to our site clicking on shared content. It is better than nothing but to aim for a bigger percentage from social shares in future.
Usage of the sharing button varies for each niche and location. I have seen ecommerce sites getting more than 10% traffic from it.
Define which image will be shown with shared URL
Native social share button sends page title and URL for sharing. Each social media or instant messaging app then uses that URL to get more info about the page like the main image. You can decide which image will be shown on shared links using Open graph meta tags.
This website uses Rank Math SEO plugin for automatically using the featured image as an open graph image for the article. You can set different images for social media, preview which image will be shown when editing pages or posts in WordPress.
For pages without featured image you can set default social media image with Rank Math Setup wizard.
Native Social Share Button
Native social share button uses Web Share API to create share functionality using web browser features. It will trigger the native share functionality built into the user device. Users will be able to share any page on your blog to applications installed on their device.
Native sharing is fast, easy and convenient. Users will not be limited to only popular social applications (Facebook, twitter, Instagram, etc.) but can share to any installed application on their device.
- Benefits
- Why add social share buttons?
- Why use native share?
- Page Speed Report
- Compare Native vs. Regular share button
Benefits
Benefits of adding native share button without plugin:
- FREE and easy to set up.
- No plugin, no PHP, no coding skills needed.
- Super fast vanilla JavaScript + CSS.
- Native share on all devices.
- Use only installed social networks on your device.
- Track shares and traffic using Google Analytics.
- GDPR ready, no cookie used.
- Not blocked by ad blockers.
- 20% more shares.
- Supported by 95% mobile users and 80% desktop users.
- Users can customize their share target instead of being forced to use predefined social media.
Why add social share buttons?
Social share button makes sharing content easy and convenient. Most browsers have a sharing feature but it is hidden under the menu and it is difficult to find. Floating social share button is always visible and reminds site visitors that they can share this content with their colleagues and friends. Or they can save articles for later reading using the social share button.
Sharing content on social media brings traffic to a focused group of people. They are people who follow and value your content. They are happy to read your shared articles and learn from them.
When people find great content they want to share it with friends. Social share button gives them this possibility to share great content on your website fast and easily.
Why use native share?
Native share is the fastest way to share content. It integrates with the user’s device and uses native functions of the user device. Users can share to any application that accepts sharing. It can be social media, instant messaging, mailing, SMS, note taking applications etc.
Native share gives the possibility to share to any possible destination available on a user device. It is not limited to only top 5 social media services.
Fast Share Button according to Page Speed Report
Native social share button uses inline CSS and JavaScript. CSS has a share icon which is generated with an SVG image encoded as data URL. No additional requests made to the server for displaying the native social share button.
If you are wondering if this share button will slow down your page and lower your SEO ranking then check this report.
Here is a report from Google PageSpeed Insights, with a performance score 100, generated for our test page with native share button. Test page is an article with 2000 words without any external files. No images, no JavaScript, no CSS. Share button is generated with inline code (JavaScript + CSS) which is less than 400 bytes when compressed. Inline code means no need to make additional server requests for the social share button.
Report shows that the native share button will not affect your Page Speed in a negative way. Page speed is known as an SEO ranking factor. This shows that the share button is SEO friendly and will not slow down your web page.
Learn how to get 100 PageSpeed Insights score for pages containing youtube video embeds.
How is the native share button better than share buttons provided by social networks?
Native share uses functionality built into the operating system of the device. The share button provided by social networks uses big JavaScript files which are connected to their server and slows down your website. Having 5 share buttons for each network will 5 times slow down your site.
Let’s compare each solution by their differences. I will group the share button provided by social networks and by separate services as the same. Because they both use the same principle to work. They both rely on external service and load big files.
Native: Share button code provided on this page.
External: Share button provided by most WordPress plugins, external services and social networks.
5 criteria to compare Native vs. External (regular) share button:
- Speed related to file size and location
- Screen estate usage
- Number of share targets
- Bypass Ad blockers
- Traffic source attribution from social shares
Speed related to file size and location
Native (✔ Good): Super Fast. Small inline code less than 2 Kb in size (0.4 Kb when compressed).
External (❌ Bad): Slow. Uses external files JavaScript, CSS, images. Total size of files can be 200-500 Kb. Resources loaded externally will use multiple additional server requests. Big files and multiple requests will slow down your website. Also it is hard to rely on external resources if you need to comply with rules like GDPR.
Screen estate usage
Native (✔ Good): Small. Uses a single small share button in a fixed position in the right bottom corner.
External (❌ Bad): Big. Multiple share buttons each for different social networks. Buttons are branded and advertise their own social networks. Can appear in different locations. Because multiple buttons use more screen space, position is not fixed on the screen and requires scrolling to find buttons. Screen estate is very valuable on mobile devices and giving a big portion to multiple buttons that are not used much is not a viable solution.
Number of share targets
Native (✔ Good): Unlimited. You can share to any application installed on your device.
External (❌ Bad): Limited to only most popular social networks that has explicit service for accepting web form submissions. Most instant messaging apps do not have a web version or do not focus on accepting web form submissions. Share target in most cases less than 10.
Bypass Ad blockers
Native (✔ Good): Our native share button does not have any identifier that can be classified as an ad or sharing button. Also native share functionality does not rely on any external resource or service at all. This makes it a regular link on a website which cannot be related to social networks. For this reason it will not be blocked by any ad blocker.
External (❌ Bad): External share buttons have multiple identifiers that can be detected and blocked. Here are some of those identifiers: image name (like facebook, twitter, reddit, pinterest, whatsapp, parler, gab, gettr etc.), image URL, javascript url (like addthis, share.js, etc.), link destination (like facebook.com, twitter.com etc.), button class name etc. Users generally block social sharing buttons because they are slow and external sites track users even if they do not share anything.
Traffic source attribution from social shares
Native (✔ Good): We add traffic attribution code (UTM variables) to the shared URL in our native share button. Generally traffic from instant messaging apps cannot be properly measured because they do not send referrer info to web pages. Traffic without attribution will classify as Direct traffic in Google Analytics. With custom attribution code traffic will be classified as Social traffic. It cannot be attributed to exact applications.
External (✔ Good): Because share targets are very popular and they usually send referrer information with traffic it can be classified as social traffic in Google Analytics.
Case study Native vs. External social share
Here is a mention of a case study by Google on one of their event websites showing that native share (Web Share API) used 20% more compared to regular share buttons.
FAQ
Will the native social share button slow my WordPress site?
Native social share uses inline JavaScript and CSS. It is not using any server resources that can slow down your website, no database, no PHP, no external files, no image. You can test your site with google page speed before and after adding native social share button and make sure that your site speed is not affected by it.
Is native share blocked by ad blockers?
We coded and tested it to bypass all popular ad blockers used in desktop and mobile devices. Native social share does not include any identifier that can be associated with ads or social networks.
Can I show the number of shares for each article?
Showing the number of shares will require storing data in the database and connecting to social media servers with API if they allow it. Native social share does not have database connection or any other server side code. It uses JavaScript which runs on the client side only. For this reason it is not possible to show the number of shares per article.
For statistics and optimization you can see the number of shares and traffic from shared content in Google Analytics. Guide to view reports related to social shares explained above.
How to add a social share button if there is no widget area in my WordPress theme?
While you can add a native social share button to any widget area there are some themes that do not have any widget area. If you want to add native share button to a site without a widget then use a plugin to add custom JavaScript code to the WordPress. Advanced users can use Code Snippets plugin to add custom code to the front end.
How can I see a native social share button in action?
Native Social share without plugin used in this website. You can click the share button on the right bottom of this page to see it in action. If the button is not visible then try a different browser or device. Check supported browsers here.
Can I use native social share button on other websites?
Yes you can use it on any website that supports adding custom HTML code. It is similar to adding Google analytics code. I use it on websites powered by OpenCart eCommerce software, Classibase classified ads software, WordPress blogging software. It is easy to add and lightweight without any server side processing.
Final words on adding social share button without plugin
Social networks are an important traffic source because of high engagement and focused traffic. To get more traffic and reach more people it is essential to make content sharing easy. With a sharing button in a prominent location taking minimal screen area without using any server resources you can increase the number of shares and reach more people.
Being everywhere is a good plan for getting attention. Reminding your site visitors to share content that they like will help you reach their audience on any social network or messaging application. You are making it easy to share and your fans will make it easy to find your content.
HTML Widgets are always faster than plugins.
Use it if you want to keep your website fast and get more traffic through more social shares in previously untapped social networks and instant messaging apps. Native social share will give power to your WordPress website which was previously available only to mobile apps.
What is next:
- Using small widget is one way of reducing plugins in WordPress. View more ways to reduce plugins.
- Use page cache without plugin on Cloudflare CDN for free.
- Get more traffic from search engines using these optimizations.
Looking for my other projects? Check all my projects here.