How to create a pretty social media widget in WordPress

Difficulty ⭐⭐⭐
Time required 🕖🕖🕖🕖 (30 mins)

Social media widgets appear anywhere on the Internet, and for a good reason. Social networks, like Facebook and Twitter, have the potential to direct millions of people to your site, and unless you are only writing for friends and close family, that’s ideally what you want.

WordPress.com offers a social media widget included with its free plan, but I believe we can do better than that.

In this article I’ll explain how to crate a prettier and completely custom widget, and to do that we will start from a bit of (HTML) code:

<a href="[[TWITTER-URL]]" target="_blank"><img title="Twitter" src="[[TWITTER-IMAGE-URL]]" alt="Twitter" width="50" height="50"/></a>

The code doesn’t do much at all yet, but after the right adjustments, it will display a clickable image that redirect your visitor to your Twitter page. For now, let’s copy the code in a text editor (for example Notepad in Windows, or TextEdit on MacOS).

If the code looks complicated to you, don’t worry, we won’t need to understand it all. We only need to concentrate on the bits marked with [[ double square brackets ]]. The brackets here are only used to define the bits in the code that will need to be replaced to get the widget to work.

The first of this special bits is called TWITTER-URL, and that will need to be replaced with the web address of your Twitter homepage.

The address to your Twitter homepage can be created by combining https://twitter.com/ with your Twitter handle. My Twitter handle is diegoboccaleone, so the full address to my Twitter page will be https://twitter.com/diegoboccaleone.

After I replace it in the fragment of code above I get:

<a href="http://twitter.com/diegoboccaleone" target="_blank"><img title="Twitter" src="[[TWITTER-IMAGE-URL]]" alt="Twitter" width="50" height="50"/></a>

Next, we need to find an image for our button and import it into our site. You are free to use the image you like, but for this tutorial I will use an image I prepared earlier:

https://diegoboccaleone.files.wordpress.com/2017/03/twitter_50px.png

#1 Copy the whole line above in your clipboard (select the text and use the shortcut Ctrl-C)

#2 Create a new article on your site. It doesn’t matter what it is called, we won’t save it, we only need it to add the Twitter image to the site.

create-story-382x215

#3 Click on the Insert Content button in the post editor:

add-image-382x215

#4 Once in the Media Library, click on the Add via ULR:

add-by-url-382x215

#5 Right click on the input box, and paste the URL we copied earlier:

paste-url-382x215

#6 After pasting the URL, click on the Upload button to upload the image:

save-url-382x215

Almost done, bear with me. Now that you have imported a Twitter image for the social link, you need to figure out the URL of the image in your site, so that it can be replaced in the bit of code included at the beginning of the article.

#7 While still in the Media Library, click on the Edit icon next to the Twitter image:

image-pencil-382x215

#8 The Edit button will open the asset properties panel, which also reports the URL of the image in the site. Use the Copy button to copy the URL:

Now we will need to replace the second value marked in brackets  in our code. I’ll report the fragment of code here, as we left it after our last change:

<a href="http://twitter.com/diegoboccaleone" target="_blank"><img title="Twitter" src="[[TWITTER-IMAGE-URL]]" alt="Twitter" width="50" height="50"/></a>

Now all we need to do is to replace the TWITTER-IMAGE-URL with the content currently in our clipboard, and get something similar to this:

<a href="http://twitter.com/diegoboccaleone" target="_blank"><img title="Twitter" src="https://diegoboccaleone.files.wordpress.com/2017/03/twitter_50px.png" alt="Twitter" width="50" height="50"/></a>

Note that the address in your site will be different. But there we have it, our first button social media button. That’s not a widget yet, but the harder part is done. Let carry on then.

#9 Close the Media Library and the post editor, without saving it.

#10 Open the customisation page for your theme:

#11 Click on the Widget section:

#12 Select one of the sidebar available in your theme:

#13 Click on the Add a Widget button:

#14 Find the Text widget and click on it (type Text in the text box at the top of the list to filter out other options):

#15 Type “Follow Me” in the title of the widget, and copy the final content of our code in the body:

If everything went smoothly, you should see a new widget on the page preview and a beautiful Twitter button in it.

Now save the widget and it’s done:

Don’t forget to test the new button to make sure that, once clicked, it opens the right page.

Of course, you can add more social media and more buttons to your Text widget. For example, this is the code fragment you can use for Facebook:

<a href="[[FACEBOOK-URL]]" target="_blank"><img title="Facebook" src="[[FACEBOOK-IMAGE-URL]]" alt="Facebook" width="50" height="50"/></a>

And this is the image path you can use with it:

https://diegoboccaleone.files.wordpress.com/2017/03/facebook_50px.png

I’ll let you figure out what to do with it, but if you need help (and even if you don’t) feel free to drop me a comment.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: