Facebook, Twitter and Live Chat Buttons: Creating a Social-Savvy WordPress Site
It doesn’t matter whether blogging is your day job or on-again-off-again hobby. Whether you’ve just launched your startup and dream of making it big “one day,” or you're an established business with strict goals to meet this financial quarter, social media is one of the most effective ways to drive traffic to your website.
Facebook, Twitter, LinkedIn, Instagram, Pinterest, and the ever-growing list of social media platforms have become crucial to generating a buzz around your online activities. Today, social media can help you connect with an entirely new audience on a daily basis, and is a vital tool to keep your existing audience engaged with the content you’re posting.
In this tutorial, I’ll be covering all the major ways that you can add social media support to your WordPress website. I’ll show you how to add social share buttons that encourage visitors to spread your content across all the major social media channels, and social counters so that visitors can follow your accounts with the click of a button. Finally, I'll show you how to engage with your website visitors and potential new customers in real time, by adding Live Chat to your WordPress site, including Facebook Live Chat.
Head over to the CodeCanyon website, click the little Sign In button in the upper-right, and then enter your Envato account details.
Once you’re logged into your account, head over to the Easy Social Share Buttons for WordPress listing, click Buy Now and then follow the onscreen instructions to complete your purchase.
When prompted, download the plugin. When you unzip your plugin the resulting folder should contain several items, including an easy-social-share-buttons Zip file, which you’ll upload to your WordPress account.
Adding a Third-Party Plugin to WordPress
Once you have your plugin, the next step is adding it to your WordPress website:
Log into your WordPress account, if you haven’t already.
Select Plugins from WordPress’ left-hand menu, followed by Add New.
Select the Upload Plugin button.
Scroll to the If you have a plugin in a .zip format section, and select Choose file.
Select the easy-social-share-buttons.zip file.
Select Install Now. The Easy Social Share plugin will now be uploaded to your WordPress account.
After a few moments, you should see a Plugin installed successfully message click Activate Plugin and a new Easy Social Share buttons item will appear in WordPress’ left-hand menu.
Give the Easy Social Share Buttons menu a click, and you’ll be asked to participate in a short introductory tutorial. Most of the information in this tutorial is fairly self-explanatory, but it only takes a few minutes to complete, so it’s recommended that you opt into this tutorial.
Increasing Social Media Engagement
By default, this plugin provides social sharing buttons for all of the most popular social media networks.
When a user clicks one of these buttons, the plugin will typically generate a post containing the page’s title, URL and a snippet of that page’s content, although this can vary depending on the social network in question. The user can then post this content to their chosen social media platform, with the click of a button.
These automatically-generated social media posts aren’t always the best representation of your site’s content. For example, imagine you’ve just published a blog and want to generate some buzz on Twitter. You could use the standard post to Twitter button, but the tweets generated by this out-of-the-box button aren’t exactly optimized to drive user engagement!
You can encourage more people to interact with this Tweet, by adding hashtags, or tagging some relevant parties.
In this section, I’ll show you how to add social sharing buttons to your website, and then explore various ways that you can modify these buttons, to generate more engaging social media posts.
Adding Social Share Buttons to Your Website
Let’s start by adding some basic social sharing buttons to our website:
If you haven’t already, select Easy Social Share Buttons from WordPress’ left-hand menu.
Select Networks.
Scroll to the Social Networks section.
You should now see all of the social media platforms that’ll appear on your website, once you enable the social sharing buttons.
Several of the most common social media platforms are selected by default, but you can remove any of these sites by selecting their accompanying X button. To display buttons for any additional social media platforms, select Add More Networks and then select the desired network(s) in the subsequent window.
Once you’re happy with your selection, open the Additional Network Options tab. Here, you’ll be able to customize the posts that are generated by each button, modify the button’s appearance and placement, and perform any additional configuration that’s required to integrate with this particular social network.
In the following sections, I’ll show you how to setup and customize social sharing buttons for Twitter and Pinterest, but the steps should be largely the same for most social media networks.
How to Add the Twitter Button to WordPress
By default, the Post to Twitter button will create a tweet that includes the page’s title, URL and a preview of that page’s content. However, you can often increase user engagement by adding hashtags, and potentially some relevant handles to each tweet.
Let’s start by modifying our generated tweets to include a hashtag and a Twitter handle:
Select the Additional Network Options tab, if you haven’t already.
Select the following card Twitter: Configure additional options for this network. If you don’t see this card, then navigate back to Easy Social Share > Networks and make sure you’ve selected Twitter.
You can now add Twitter handles and hashtags to your Tweets:
1. Don’t Forget to Tag Yourself!
Every time someone clicks your website's Post to Twitter button, you can tag one or more Twitter accounts in the generated tweet. Most of the time, you’ll want to tag your own Twitter handle, so that anyone who’s interested in learning more can click through to your Twitter account, and start following you.
You also have the option to tag third parties, which can be useful if you’re affiliated with any additional Twitter accounts, or if you’re trying to catch the attention of a larger account that may be interested in your content. If you do tag a third party, then just be aware that this can result in them receiving dozens or even hundreds of identical tweets per day, which has the potential to become very annoying, very quickly!
To include a username in your tweets, find the Username to be mentioned field and then type the Twitter handle in question, without adding an @ symbol.
2. Connect With a New Audience via Hashtags
A few relevant hashtags can expose your website to a much wider audience, potentially earning you more clickthroughs, new Twitter followers, and more engagement in the form of likes and retweets.
To start, identify one or more hashtags that are relevant to your website, or create your own hashtag, for example turning your website’s name into a hashtag.
Next, find the Hashtags to be added field and enter your chosen hashtag(s), without the # symbol. If you want to use multiple hashtags, then you’ll need to separate each hashtag with a comma, for example: wordpress, tutorial, socialmedia.
The downside, is that these hashtags will be included in every tweet that’s generated via your website’s Post to Twitter button, so they won’t be unique to any specific webpage.
If you do want to use different hashtags for different pages, then one solution is to leverage WordPress tags. Every time you create a new post in WordPress, you may have noticed that you have the option to add tags.
You can configure the Easy Social Sharing plugin to use these WordPress tags as Twitter hashtags. Every time a user tries to share a specific page, Easy Social Share will generate a tweet featuring all of that page’s WordPress tags, formatted as hashtags.
While this can create more unique hashtags, it does require you to change the way you create your WordPress tags. Instead of tagging each new post with as many relevant WordPress tags as possible, you’ll need to limit yourself to one or two WordPress tags, to avoid generating Tweets that consist of dozens of hashtags.
If you think this approach might work for your website, then find the Use post tags as hashtags slider, and push it into the On position.
What if My Tweets Exceed Twitter’s 280 Character Limit?
Twitter has a 280 character limit, which can sometimes be an issue. Perhaps you add an extra WordPress tag to a post, or publish a blog with an unusually long title—in these scenarios, Easy Social Share may start generating Tweets that exceed the 280 character limit.
To ensure these Tweets are still engaging, it’s important that you specify how Easy Social Share should truncate these messages.
Start by finding the Twitter message optimization: Activate slider, and pushing it into the On position.
The Easy Social Sharing plugin provides several options for reducing the number of characters in a Tweet, so open the accompanying dropdown and review the following methods:
Remove hashtags, remove via username, truncate message
Remove via username, remove hashtags, truncate message
Remove via username, truncate message
Remove hashtags, truncate message
Truncate only message
Let’s imagine you select Remove via username, remove hashtags, truncate message. If a Tweet exceeds the 280 limit, then Easy Social Sharing will start by removing any usernames included in the Tweet’s text, but if the Tweet still exceeds 280 characters then it’ll also remove the hashtags, and will then potentially truncate the message text, until the Tweet reaches 280 characters or less.
As a general rule, truncating the message text should always be a last resort, so unless you have a specific reason not to, it’s recommended that you select either Remove hashtags, remove via username, truncate message or Remove via username, remove hashtags, truncate message.
If your message does get truncated, then it can sometimes appear as if the user randomly stopped typing mid-sentence. To avoid any confusion, you should also enable Add read more dots when truncate message, which will add ... to the end of each truncated message.
Finished Editing Your Twitter Settings?
When you’re happy with the changes you’ve made, click the red Update Settings button. Now, if you head to any page of your website and click the Twitter social sharing button, a new Tweet should appear in a popup, ready for you to share with your Twitter followers.
Promoting Your WordPress Website With Pinterest
Pinterest is a social media platform that allows users to pin the content that’s important to them, creating themed boards where each piece of content is represented visually, by a pinned image or GIF.
By adding Pinterest support to your website, visitors will be able to pin their favourite webpages, so they’re always within easy reach. This content will also appear in the user’s feed, where it’ll be visible to all of their Pinterest followers, who may then decide to re-pin this content or click through to your website.
In this section, I’ll cover a few different ways that you can tweak Easy Social Share’s Pinterest button. By the end of this section, you’ll have modified the type of images that users can pin, and you will have created a floating Pinterest button that appears whenever a user hovers over any of your images.
My Changes Aren’t Appearing!
Sometimes, the changes you make via Easy Social Share won’t be accessible until after you’ve cleared the cache.
Depending on how your WordPress account is setup, the process for clearing the cache may vary, but you’ll typically need to:
Choose Performance from WordPress’ menu bar.
Select Purge all caches.
If this doesn’t resolve your problem, then you may also need to bypass your web browser’s cache by performing a hard reload, sometimes known as a hard refresh.
The steps vary between web browsers, for example if you’re running Chrome then you can perform a hard reload using any of the following keyboard shortcuts: Ctrl-Shift-R, Shift-F5, or you can hold Shift while pressing Chrome’s regular reload button. If you’re unsure how to perform a hard reload, then your web browser’s documentation should have all the information you need.
Alternatively, if you’ve added a dedicated caching plugin to your WordPress account, then you can use this plugin to clear the cache. You’ll typically find plugin-specific cache settings by selecting Performance from WordPress’ toolbar, and then looking for any section that contains the word cache.
Control the Images Your Visitors Can Pin
Once you’ve added a Pinterest button to your site, visitors will be able to pin your webpages using any of the images available on that particular page. For example, if a webpage contains two images, then visitors can click the Pinterest button and then choose to pin either of those images.
Alternatively, you can tweak your Pinterest settings, to favour a page’s featured image. Imagine you have a webpage consisting of two “regular” images and a featured image; with this setting enabled, the user will be able to pin the featured image, only. This behaviour can be useful if your website contains lots of third party content, for example maybe you promote products as part of the Amazon Affiliates program, and want to ensure your visitors only ever pin images that represent your website’s original content.
If you enable this feature, then users will still have the option to pin “regular” images, for pages that don’t contain a featured image.
To favour featured images:
If you haven’t already, navigate to Easy Social Share > Networks and make sure the Social Networks tab is selected.
Select the following card: Pinterest: Configure additional options for this network.
Find the Disable Pinterest Pin any image section, and push its slider into the “Yes” position.
When you’re happy with your changes, click the Update Settings button.
Stick a Pin in It: Adding a Floating Pinterest Button
You can make it easier for visitors to pin your content, by creating a floating pin button. This button will appear automatically, whenever the user places their cursor over any image.
To add this floating button:
In WordPress’ left-hand menu, select Easy Social Share Buttons.
Select Social Sharing, followed by Pinterest Pro.
Find the Image Pin Button On Hover section, and drag its accompanying slider to the Yes position.
At this point, there are lots of ways that you can tweak the button’s appearance. Most of these settings are fairly self-explanatory, but to start you may want to consider:
Buttons style. Choose between displaying the P logo, plain Pin text, or a combination of the two.
Change the button’s size. Your choices range from XS to XXL.
Position over image. Specify where your floating Pin button should appear. I prefer to display this button in the center of the image rather than anywhere near the corners, as this makes the button easier to spot, particularly for larger images that don’t fit perfectly onscreen.
When you’re happy with your changes, click the Update Settings button. To test your Pinterest button, navigate to any page containing an image and try hovering over that image—a Pinterest button should appear, ready for you to pin this particular image.
Create Your Own Pinterest Descriptions
If you enable the floating pin button, then Pinterest will use each image’s alt text as its default Pinterest description.
By modifying an image’s alt text, you can help ensure that your pinned content is engaging, which increases the chances of re-pins and clickthroughs.
If you’ve enabled the floating button, then it’s worth reviewing the Alt Text attached to each of your website’s images:
Navigate to a page containing an image, and open that page for editing, as normal.
Select the image in question, and then click its accompanying Edit image icon.
In the subsequent window, find the Alt text field. This is the text that’ll be included every time someone tries to pin this particular image—make any desired changes.
Boost Your Social Media Following
There are two major elements to any successful social media strategy: encouraging people to share your content via social media, and acquiring new followers.
Easy Social Share can help boost your social media following, via follower counters. These counters form part of a sidebar, which displays the number of people who are currently following each of your social media accounts.
Every time a user interacts with one of these buttons, they’ll be taken to the related social media account, where they can review your social media activity, and hopefully hit that Follow button.
To add one or more follower counters to your website:
In WordPress’ left-hand menu, select Easy Social Share Buttons.
Select Social Follow & Chat > Social Followers Counter.
Push the Activate Social Followers Counter slider into the On position.
Scroll to the Social Networks section and select all the counters that you want to add to your website.
Once you’re happy with your selection, click the red Update Settings button.
Next, you need to activate each of the social media accounts that you just selected. In WordPress’ left-hand menu, select Social Follow & Chat > Social Followers Counter > Social Networks.
On this screen, you’ll see a card representing each of your chosen social media accounts. Click each card in turn and then enter the requested information, for example if you’ve just enabled the follower counter for Facebook, then you’ll need to provide your Facebook Page ID (if you’re unfamiliar with Page IDs, then we’ll be covering them in the following section).
Some networks give you the option to customize the follower counter’s appearance, for example changing its text or icon. Spend some time exploring the available options, until you’re happy with the button’s appearance.
When you’re happy with the information you’ve entered, click Update Settings.
Next, navigate to Social Follow & Chat > Social Followers Counter > Follow Me Sidebar.
Find the Display Social Followers As Sidebar slider and push it into the On position.
You can now configure how this sidebar will appear on your website. Most of these options are fairly self-explanatory. For example, you can change where the sidebar appears (Choose position on screen) and whether the follower counter animates when the user hovers over it (Apply Animation) so spend some time exploring these options.
When you’re happy with how the sidebar is configured, click the Update Settings button. A follower sidebar should now appear across your website.
How to Add Live Chat to Your Website
Increasingly, people expect an instant response to their questions and complaints, especially when they’re communicating online. While potential customers could contact you by sending a Tweet or posting to your Facebook page, this often adds a time delay which can result in a simple question-answer interaction taking hours, or potentially even days to complete.
In this final section, I’ll cover two ways that you can interact with visitors and potential customers in real time, by adding live chat functionality to your website.
Setting Up Facebook Live Chat
Facebook Messenger is a popular way to keep in touch with friends and family. If you’re in front of the computer, then you can leave Facebook Messenger running in your web browser and reply to new messages as they come in. If you need to step away from your Desktop, then you can still keep up with your messages by installing the Facebook Messenger app on your smartphone or tablet.
By adding Facebook Live Chat to your website, you can communicate with visitors and potential customers, just as easily as you chat with your Facebook friends.
The major drawback is that you cannot connect Facebook Live Chat to a personal profile, so you’ll need to own a Facebook Page that you can associate with your website. If you haven’t already, then you can first create a Facebook Page (or you could skip ahead to the next section, and find out how to add Skype to your website instead!)
Creating a Facebook App ID
When activating Facebook Live Chat, you’ll need to provide a Facebook App ID. Let’s generate this ID now:
When prompted, log in using your Facebook username and password.
Select the Add a New App button.
Enter a display name, which is the name that you want to associate with your Facebook application.
Enter your email address.
Click Create App ID.
After a few moments, you’ll be taken to the Dashboard for the application you've just created. Find your App ID in the upper-left corner, and make a note of it, as you’ll be needing this shortly.
Editing Your Facebook Page Settings: Whitelist Your WordPress Site
We also need to make some changes in our Facebook Page’s settings:
Make sure the Your Pages tab is selected and then select the page that you want to link to your WordPress account.
Select Settings from the menu bar.
In the left-hand menu, click Messenger platform.
Scroll to White-listed domains, and copy/paste your WordPress URL into this field.
Click Save.
While we have our Facebook Page open, let’s make a note of its ID, as we’ll be needing this information later:
In Facebook’s left-hand menu, select About.
Scroll to the bottom of the screen, and you should see a Page ID section. Make a note of this information.
Activating Facebook Messenger Live Chat
We can now enable the live chat feature:
Head over to your WordPress account.
Select Easy Social Sharing Buttons > Social Follow & Chat from WordPress’ left-hand menu.
Select Facebook Messenger Live Chat.
Find the following section: Activate Display Of Facebook Messenger Customer Live Chat. Push the accompanying slider into the On position.
Next, enter your page ID into the Facebook Page ID field.
Find the Facebook Application ID field, and enter the ID of the Facebook application you created in the Facebook for Developers console.
You now have the option to tweak Facebook Live Chat’s appearance and behaviour in lots of different ways, for example you can restrict the Chat feature to certain webpages, using Appear only on selected post types.
You may also want to acknowledge that you’ve received each message successfully, even when you’re not available to respond in-person, by creating an automated response using Logged in users greeting or Logged out users greeting.
Most of these settings are fairly self-explanatory, so it’s worth spending some time perfecting the way that Facebook Live Chat looks and functions on your particular website.
When you’re happy with the information you’ve entered, click the red Update Settings button.
Putting Live Chat to the Test
We can now test our website’s new Facebook Live Chat feature:
Navigate to any part of your website that’s configured to display Facebook Live Chat, and the familiar Facebook Messenger bubble should appear onscreen.
Give the bubble a click, to open the Facebook Live Chat user interface.
At this point, you may be prompted to Continue as… followed by the name that’s associated with your Facebook account; click Continue as…
Type your message into the chat window, and then click Send.
In a separate tab, head over to Facebook and log into your Facebook account.
Facebook should already be displaying a new message notification; open this message and you’ll see the text that you just entered into your website.
To send a reply, simply write your message as normal and then click Send. Switch back to your WordPress account, and this reply should have appeared in the Facebook Live Chat user interface, exactly as if you were talking to a third party.
How to Embed Skype in Your WordPress Website
The major drawback to Facebook Live Chat, is that it requires a Facebook Page. If you want to add a chat feature to your website but don’t particularly want to setup a Facebook Page, then you can use Skype Live Chat instead.
To add Skype to your website:
In your WordPress account, navigate to Easy Social Sharing Buttons > Social Follow & Chat.
In the left-hand menu, select Skype Live Chat.
Push the Activate Display Of Skype Live Chat slider into the On position.
Choose whether you want to restrict Skype Live Chat to certain pages, using the Appear only on selected post types section.
Select which chat button style you want to use: Chat Bubble, or Rounded Button with Text. If you opt for the Rounded Button style, then you can provide some text that’ll be displayed as part of this bubble, using the Custom chat button text field.
Finally, you’ll need to connect your WordPress website to your Skype account, by typing your Skype ID into the Your Skype User ID field.
Once you’re happy with the information you’ve entered, click the red Update Settings button.
Now, navigate to any part of your website that supports Skype Live Chat, and the Skype chat bubble should appear onscreen. Anyone who’s visiting your website will now be able to click this button, enter their Skype username and password, and exchange messages with the Skype ID that’s associated with your WordPress account.
Conclusion
In this tutorial, I showed you how to gain social media followers and boost user engagement across all the major media platforms, using Easy Social Share Buttons for WordPress. We looked at how you can make your WordPress website more social media-friendly, by adding sharing buttons and followers counters, and how you can connect with your website visitors in real time, via Facebook and Skype live chat.
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.
WordPressBest Instagram Feed Plugins for WordPress in 2019
WordPress PluginsBest Facebook, Twitter, and Instagram Plugins for WordPress
WordPress PluginsBest WordPress Social Media Plugins of 2019
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.