How to create follow us buttons in WordPress

Those who are new to WordPress would be scratching their heads to find codes for follow us buttons. Reason, there are loads of plugins which can do the work, but they come with some criteria. Either you have to attribute links to the plugin provider or you have to compromise with the speed of you blog or website. Anyways, you have to compromise with you blog or website. This is one of the drawbacks of plugins in content management systems like WordPress. If you install too much of plugins, your website or blog may also become vulnerable for hacking and other attacks. The best way to deal with this problem is to create your own code (learn coding). Most of the plugins are simple codes. Coding is not that difficult, if you make up your mind to learn it.

In this Do it yourself, we are going to create simple follow us buttons in WordPress. With few lines of code you can save storage space in your blog or website. This DIY is for starters who are new to WordPress.  So let’s go and make our hands dirty.

Requirement:

1.    Simple text editor like notepad in windows.
2.    Simple icon images of social networking sites Twitter and Facebook.

First, we have to get the icon images of social networking sites and upload them in our CMS. For this, you can type “Free icon images of social networking sites” in Google. There will be plenty of websites offering free services.

1.    You can go to sites like IconFinder and download the images. Make sure to check the size of the image. It should be 35 x 35, 64×64 or 128×128; it depends on how you want your website or blog to look.

2.    Next, compress the images as it can save some storage space.  You can check some online source like TinyPNG, as it will make your work easier. Otherwise, you can always use Microsoft office image editor.

3.    It is a good practice in SEO to give good image file names. So, make sure to use twitter, Facebook as respective names of their image files.

4.    Next, upload the images in WordPress. You can go to your Dashboard > Media > Add new > Select files. Click the upload image and make sure to fill all the necessary options like Alt text.  Alt text is used to render information about your blog or website to visually impaired audience and it is a way of giving information about your image.

endaksun_followus

So we have successfully uploaded the images in WordPress. Next, the main work comes in, coding part. For this I have used a simple text editor, Notepad.

1.    Open your Notepad, copy the codes that I have shown down below and save it in some folder.

<div>
<a href=””target=”_blank”><img title=”Twitter” src=”” alt=”Twitter” width=”35″ height=”35″ /></a>
<a href=””target=”_blank”><img title=”GooglePlus” src=”” alt=”GooglePlus” width=”35″ height=”35″ /></a>
<a href=””target=”_blank”><img title=”Facebook” src=”” alt=”Facebook” width=”35″ height=”35″ /></a>
</div>

Here

1.    A href= Url link of your social profile.
2.    Target= Code for opening the page in a new window.
3.    Title= Name of social media.
4.    Src= Url link of the social media icon that you have uploaded in your website.
5.    Alt= This text is used for visually impaired people or where image viewing is disabled. It describes what the image is for.
6.    Width= Width of social media icon image.
7.    Height=Height of the social media icon image.

2.    Place all the necessary codes between the double quotes. The final code should look this.

<div>
<a href=”https://twitter.com/xxxxxxxxxxx”target=”_blank”><img title=”Twitter” src=”http://www.xxxxxxxx.com/wp-content/uploads/2014/12/twitter.png” alt=”Twitter” width=”35″ height=”35″ /></a>
<a href=”https://plus.google.com/xxxxxxxxxxxxxxx”target=”_blank”><img title=”GooglePlus” src=”http://www.xxxxxxxxxxx.com/wp-content/uploads/2013/15/googleplus.png” alt=”GooglePlus” width=”35″ height=”35″ /></a>
<a href=”https://www.facebook.com/xxxxxxxxx-xxxxxxx”target=”_blank”><img title=”Facebook” src=”http://www.xxxxxxxx.com/wp-content/uploads/2012/11/facebook.png” alt=”Facebook” width=”35″ height=”35″ /></a>
</div>

3.    Now the final work, login to your WordPress website. You can go to Dashboard>Appearance>Widgets>Texts. Here Text is the area where you can put your custom codes.

endaksun_followus1

4.    When you will Click “Text”, you will get different widget areas where you can put your codes like example the side bar or the footer. Here you can choose anyone which will fit better for your blog.

endaksun_followus2

5.    For this article, I have chosen primary side bar.

6.    Here you will get the options to fill Title: add any phrase like Follow us or like us, it depends on your choice.

7.    Next in the second option content: add the codes that we have created and boom our work is done.

endaksun_followus3

8.    Check whether the codes are working, if not; Tweak it, coding is interesting, the Do-it –yourself motto.

endaksun_followus4

WordPress and other CMS have made our lives easier, we should be thankful for that. This is a simple code for Follow us buttons. If you find some errors or if the codes are not working, feel free to share your views in the comment section or mail me at : rafeanalytics(at)gmail(dot)com.

keep sharingShare on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Share on Reddit0Share on Tumblr0Share on StumbleUpon0Email this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *