HTML/CSS, JavaScript, Web Development

Adding the Skype Share Button in WordPress

Sending
User Rating 5 (1 vote)

skype-share-button-

In today’s tech-savvy era, almost every person uses Skype to communicate with their loved ones. Not only people use Skype for personal communication but also use it professionally to conduct interviews, professional meetings or so much more. Today, it has become a necessity for many people around the world.

In fact, it is gradually becoming a part of social messenger where people video chat, and share things with each other.

Skype, the Microsoft-owned company has also added its own share button that enables users to share the content with their loved ones.

Why add Skype share button in your WordPress Website?

Social networking sites are on the rise. Almost every social network has millions of active users that show interest in various different subject matters. Moreover, according to a recent study, Facebook, one of the leading social platforms, drives more traffic than the search engine giant Google following other social networking sites such as Twitter, Google+, LinkedIn and more. These networking sites have become a crucial source of constant traffic to websites.
Today, the popularity of these sites have persuaded webmasters into putting more effort into promoting their products and services on such sites than search engines.

And with Skype having more than 40 million active users, you can’t miss out on an opportunity to target such a huge customer base. Therefore, it does make sense to add skype share button in your WordPress website.

How to add Skype Share button?

skypeshare

Today, in this article we are going to share the in-depth tutorial for adding Skype share button on your WordPress website.

Since WordPress comes with a wide variety of plugins to help you extend the functionality of your website, adding Skype share button is a matter of few clicks. However, we also do realize that there are various webmasters who are developers too and prefer writing the coding themselves instead of downloading a plugin and start tweaking it.

Thus, we are not only going to show you how to add Skype share button with a plugin but also WITHOUT it.

Adding share button with a plugin:

skype share plugin

The plugin we are going to use in this tutorial is Skype Share WordPress plugin. Before we dive into adding it, let’s explore some of the best features of this plugin to understand why we are using it.

First of all, Skype Share plugin is fully responsive which means whether you are surfing the website on your desktop or smartphone, it will always look awesome and offer the best user experience.
The plugin allows you to automatically shows the share button with the every post you publish on your website.
It is also highly customizable and allows you to change the style of the button according to your website requirements (square icon, circle icon, small button, large button)
You can also change the location of the button depending on your preferences i.e. bottom and top of the article, or separately add it on top of the article and bottom of the article.

Without further ado, let’s start the tutorial.

Firstly, you need to download and install the plugin in your WordPress website. You can either add it automatically from the dashboard of your site or manually by downloading it from the WordPress.org site and then uploading it from the dashboard.

Step 1:
Once you have installed and activated the plugin, you need to configure it. Click on settings → skype share button page. You will be redirected to the settings page of the plugin.

Step 2:
The settings page has some options to configure such as enabling share button, button style, show style button at, and share button language. Check enable share button first to customize other options. Once enabled, choose the size and location of the button accordingly. You can leave out the language option since the plugin automatically detects it.

Step 3:
Once you have changed all the options according to your website preference, you can hit save changes.

Congratulations, it’s added!You can now visit your site and check if everything is working fine or not.

Adding Skype share button WITHOUT plugin:
As we discussed earlier, you may want to add this button manually to your WordPress website. Well to add the share button on your site, you need to make certain changes in the coding of your themes files.

Copy and paste the following code in your header.php file in the <head></head> section.

<script>
// Place this code in the head section of your HTML file
(function(r, d, s) {
r.loadSkypeWebSdkAsync = r.loadSkypeWebSdkAsync || function(p) {
var js, sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(p.id)) { return; }
js = d.createElement(s);
js.id = p.id;
js.src = p.scriptToLoad;
js.onload = p.callback
sjs.parentNode.insertBefore(js, sjs);
};
var p = {
scriptToLoad: 'https://swx.cdn.skype.com/shared/v/latest/skypewebsdk.js',
id: 'skype_web_sdk'
};
r.loadSkypeWebSdkAsync(p);
})(window, document, 'script');
</script>

Now make changes in your archive.php, category.php, page.php, index.php, loop.php, and single.php. Make sure the code is added within the post loop.


<div class= 'skype-share' data-href= '<?php the_permalink(); ?>' data-lang='en-US' data-text= '<?php the_title(); ?> 'data-style='large'>> </div>

Here in this code you can customize the appearance, location and language of the button as we did with the plugin.
Data-lang → is used to change the language. By default it’s en-US, you can change it as per your needs.
Data-style → to change the size of the button i.e. square, circle, small or large.

Summing up:
We have explained both the methods to help you add the Skype Share button. Hope you have enjoyed this tutorial and would implement it on your website.

Share your Thoughts