How to customize your social media icons in your wordpress.com blog

SOCIAL MEDIA ICONS

I’ve got a g+ page, a Twitter account, and an Etsy shop, now I want to publish on the homepage of my wordpress.com blog the links to my social media pages with my cutes small social media icons, how to do? Some template have widgets included already, but not mine. With this simple tutorial we aim to provide a solution in a few simple steps to solve this problem.

PREMISE

Given that solutions can be different from theme to theme, we must also bear in mind that wordpress.com, in its completely free version does not allow access to the css style sheets of the page, then you need to purchase Custom Design to customize the theme look, in order to achieve a result that will fully satisfy. However, you may publish a simple html widget, with a little of inline css style, this is allowed in the free version of WordPress blog. This tutorial is aimed at beginners, but we will ask to make a copy and paste of html code and paths, urls pointing to your images and pages.

STEP # 1 – You need icons.

You Need icons of your social media websites, image files, in PNG format if it’s possible, and you have three solutions:

  • Draw your own icons (Are you familiar with any graphic software such as Illustrator or Photoshop)
  • Find them on the web
  • Buy them from one of the links we have discussed in this article: http://wp.me/pW01G-Ka or from some microstock site.
Social media icons

Social media icons – iconsets

STEP # 2 – Upload the images in “MEDIA”

Now you have your icons and have to publish them on the web, nothing could be easier in wordpress. From your dashboard, go to media management, you find it on the left column of the dashboard in the “MEDIA” (FIGURE 1). Upload all the icons you need (but only those that you need, otherwise you will find pages of icons in media management) (Figure 2). Now you must manage each image (Figure 3), click the “EDIT” button of any icon, at the right side of page you’ll find the URL of image (Figure 4), for example http://myblog.wordpress.com/media/24/3/f.png, copy the entire URL including http:// and paste it into a notepad document, then do the same for all of the icon you should use.

Figure 1 – Go to Media managemet

Figure 1 – Go to Media managemet

Figure 2 – Upload icon files

Figure 3 - Click on Edit to go to the image page

Figure 3 – Click on Edit to go to the image page

Figure 4 – Copy image URL

Figure 4 – Copy image URL

STEP # 3 – Copy links of your pages

On the same text document where you have pasted urls of the images you have to paste, always neatly one per line, urls of your pages, for example, go on your Twitter page and copy the address, maybe look like http://www.twitter. com /myprofile, and paste it on the document text always complete of http://. Well, now do the same for all your other social pages.

STEP #4 – Create the widget.

Now go back to dashboard, on left column you will find “APPEARANCE” and then, putting the mouse over the item “WIDGET”, click on the widget. You are in the widget page, on left you will find a list of all widgets you can turn on-off, to the right a pre-set list of areas where you can edit the widget, typically you’ll find “sidebar widget area” ,”First footer widget area” ,”Second footer widget area” As the name implies, the sidebar appears on the side, usually on the right, and footer in the bottom of the page of your blog. You have to drag the “text widget” in your choice, typically the sidebar.

Figure 5 - Drag and drop Text widget in to Sidebar widget area box to activate it

Figure 5 – Drag and drop Text widget in to Sidebar widget area box to activate it

Figure 6 – Paste your code in to the widget

Figure 6 – Paste your code in to the widget

STEP # 5 – Create the widget content

We are well under way, copy and paste the following html in the widget:

<a href=“my-link”>
<img scr=“my-icon-image”>
</a>

need to copy once for each link you want to put, obtaining a list of links of this type:

<a href=“my-link”>
<img scr=“my-icon-image”>
</a>

<a href=“my-link”>
<img scr=“my-icon-image”>
</a>

<a href=“my-link”>
<img scr=“my-icon-image”>
</a>

Now you just need to copy links you have on your text document within html tags, making sure that each link corresponds to its icon.
In the first line with the url of the page,
in the second row with the <img scr … will paste the url of the image.
The urls must be included in quotation marks “http://www.mypage …”
(Misplaced or mismatched quotation marks are one of the single most common coding errors in HTML.)
Example:

<a href=“https://www.facebook.com/my-page”>
<img src=“http://myblog.files.wordpress.com/2014/03/fb.png” />
</a>

<a href=“https://www.twitter.com/my-twitter” >
<img src=“http://myblog.files.wordpress.com/2014/03/twitter.png” / >

</a>

<a href=“https://www.googleplus.com/my-page” >
<img src=“http://mioblog.files.wordpress.com/2014/03/googleplus.png” />
</a>

Done, save the widget and go to the home of the blog to see the result.

STEP# 6 – More style!

You may not be satisfied, the icons are too big, attached to each other and want to add margins, here is an html a bit ‘more complex that will help you have a little’ order in your widget. Briefly, you can increase or decrease margins between the icons changing the css parameter margin-left, or you can set the icon size by changing the html size in pixels, both width and height, it is recommended that you don’t set these parameters to a higher number of pixels than the image actually measure not to lose the quality of the image, for example, if an icon real size is 78px x 78px, you can set 50px X 50px, but it is not advisable to display it 100px X 100px. for example:

<a href=“https://www.facebook.com/my-page target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>
<img src=“http://mioblog.files.wordpress.com/2014/03/fb.png width=”60px” height=”60px” />
</a>

<a href=“https://www.twitter.com/my-twitter target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;” >
<img src=“http://mioblog.files.wordpress.com/2014/03/twitter.pngwidth=”60px” height=”60px”/ >
</a>

<a href=“https://www.googleplus.com/my-pagetarget=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>
<img src=“http://my.files.wordpress.com/2014/03/googleplus.pngwidth=”60px” height=”60px” />
</a>

You can copy the HTML code above and paste it into your widget, taking care to replace the links that need to go to your pages and URLs of your images / icon.

Conclusions

Now you have your widget with social media icons, however if you want more freedom to modify the layout, the width of the columns, the color of the boxes, and much more , you should have to buy, as mentioned above, the custom design, which allows you to write in the style sheets of the page, allowing you more advanced and complex customizations. You can also give a title to your widget, such as us, or leave the field empty title if you want to leave the icons without any text.

Tags: , , , , , ,

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: