Social Media Widget Plugin Tutorial

Hello, Iím MaAnna, and in this video Iíll show you all of the features of the Social Media Widget plugin and how to get the most from it This plugin provides an easy to use widget that makes it simple to display social media and RSS feed icons in your header or sidebar, or anywhere on your site that has a widget-ready area

Iím on the demo site of the Prelude premium theme, thatís available exclusively to BlogAid training clients and here you can see two examples of the Social Media Widget in action The first is at the top right of the header and in this instance Iím using the smaller icon set thatís available in the widget The second example is here in the sidebar where Iím using a few of the medium size icons that come with the widget You can also see that this instance of the widget has a title and a little bit of text above the icons Letís go to the widget page and show you how this plugin is configured

The Social Media Widget plugin can be found in the WordPress repository Once youíve installed and activated it, youíll find it listed in your Available Widgets area You can use it multiple times too, just Iíve done in this tutorial, by having it display in both the header and the sidebar Once you drag it over to one of your widget ready areas, you can begin to configure it Letís use the one in the primary sidebar to show all of the basic settings

Click the down arrow to expand the widget Now, itís got a lot of input fields, but donít let that worry you Most of them are just the social media platforms this widget supports natively The General Settings area is where you input the title heading and any text that you want to display Letís return to the preview page so you can see exactly where both of these are again

Hereís the title And hereís the widget text Letís return to the widget settings Next is an icon alt and title tag This is what appears when someone hovers over the icon

Letís see that See, when I hover over the Facebook icon, it puts the alt text in front of the platform Itís the same when I hover over the Google Plus icon, except that the platform name changes The next four settings affect the look of the icons The first is the size

The defaults are 16 pixels, which is the size I used in the header The next is 32 pixels, which is the size I used in this sidebar widget And the last default size is 64 pixels Letís return to the preview page so you can see the two sizes Iím using again The header has the 16 pixel icons

The sidebar has the 32 pixel icons Letís change those to 64 pixels so you can see the difference Iím updating the size Then saving Then updating the preview window

Those are pretty big icons, but the nice thing is, if youíre only going to display a few icons, they really do a good job of taking up space in the sidebar This big size is also good for drawing a lot of attention to entice folks to connect with you on social media The plugin also comes with several icon sets besides the default one that I am using in this tutorial Letís have a look at a few, starting with the cutouts This widget has a lot of input fields, so itís a long scroll to get down to the Save Changes button

Letís see that Iím updating the preview window And there they are Almost like shotgun holes I used this icon set on one of my author client sites whose characters have a bad boy reputation

Itís a great fit Letís see another set Letís try the Sketch icons Iím updating the preview page And there they are

If you have a whimsical or artistic site, this might be very appropriate If youíre not happy with any of the built-in icon sets, you can bring your own To do that, select Custom Icons here Then scroll down to the bottom of the right column and input the Custom Icons URL and then the path Examples are given in the input fields

If you need help with this, you can consult the README text file that is in the pluginís folder But, youíll have to either get to that via your hosting control panel or by using an FTP program It would much easier to simply visit the developerís site Youíll find a link for that in the description of the plugin on the admin plugins list page This plugin comes with input fields for most every popular social media platform, like Facebook and YouTube

But, if you canít find one you need, you can add up to six custom icons If you choose that option, youíll need to upload the icons and then provide the full path to that graphic over here in the third column Notice that there are three input fields for each icon including the name, where the graphic is located, and the link for the profile that it represents Youíll want to make those icons the same size as the Icon Pack youíre using, meaning either 16, 32, or 64 pixels Letís have a look at the other two options that will affect the display

The icons are animated when hovered over The fade in is a little hard to see, so letís choose something fun, like the Bounce option Letís have a look at that See, they bounce up when hovered The Opacity setting is really handy if these icons are sitting on a background other than white

It will really help them blend in Letís set it down to 60% so you can see the difference Iím updating the preview window And you can see how much more of the background comes through now The next two settings you definitely want to leave at the default

You want to have nofollow for tracking purposes And then have them open in a new window because when folks visit their favorite social media platform, they tend to get distracted and may never return to your site if youíre depending on them to hit the Back button on their browser Then the last setting is to align the icons left, center, or right, and Iím sure you donít need a demonstration of that All of the other input fields in this first and second column are the social media platforms that this widget has an icon for All you have to do is input the URL to your profile

You can see that I have my Facebook and Google + profile URLs in here, and thatís why those icons are displaying in the widget If the input field is blank, no icon is displayed Except for one Letís return to the preview to show you that Itís the email icon and until you fill it in with a link, it doesnít work, even though itís displayed

So, you have two choices here You can either input the link to the email subscription for your siteís RSS feed, or you can input the path to your Contact page The way to do either, is to go to the Email URL input field, delete the mailto, and input the correct URL Now, you could leave the mailto in there and input your contact email address, but I hope you like spam if you decide to do that Just above the Email URL is an input field for your RSS feed

This is a super place to put it, but check your theme first to ensure that itís not already built-in and displaying somewhere like in your header or main navigation bar The URL you want to use for this field is your Feedburner feed or your siteís raw feed A Feedburner feed is far superior If you need help with finding your feed or burning it through the Feedburner service, be sure to see these two posts on BlogAid on how to Locate the RSS or Atom Feed for Your Blog and How to Use FeedBurner with Your RSS Feed Have fun discovering all the wonderful platforms this little plugin supports

It will give you a ton of ways to connect with your readers and engage in ways that bring them back to your site I hope youíve enjoyed this video tutorial on the Social Media Widget plugin Itís the same type of information I teach in my one-on-one classes and full video tutorial courses Be sure to visit BlogAidnet for more resources, tips and videos to make your site better

Free Email Updates
We respect your privacy.

website security measures

affiliate marketing