Show your social media profiles on your blog without using a plugin
Social media has long since entered our daily lives. Who doesn't have an account on Facebook'u, Twiter. Instagram or another social networking site? Almost everyone has an account on at least one portal. Social media have also been used in business. There are new trainings, courses on the strategy of building relations or building business on social networks.
Probably more than once you have seen jump icons in sidebar (right column of your blog) with calls like Find me on ... or Follow me on .
Today I'm going to show like we can do it on our blog in a very simple way.
Way 1. wordpress plugins and linking our social media accounts
It seems that the easiest way to add social icons linking to our profiles from social networking sites is to use plugs WordPress. Although it is quick and easy it has a drawback. You have to remember that the more plugins you have installed on your blog, the maybe it takes longer to recharge the more so when plug contains many more functions than we need. What does that mean? A reader who will have to wait a long time for your bloghe may leave it because he will be annoyed by the situation. Loading speed websites also has an impact on positioning (you can read more here: https://www.seowordpress.pl/odchudzamy-wordpressa-zwiekszamy-predkosc-seo/).
Way 2: Embedded social icons in the template.
More and more templateThis template has already built-in features that allow us to add our profiles and display them in the sidebar. Choosing a template just to use this feature would be pointless. Therefore, we resign from social media plugins and templates. We will do it by pasting the proper HTML code.
Way 3: Adding social media icons with our profiles without plugins.
We select the social media icons and create the HTML code to display them
Step 1. At first, we will need social icons that we want to add to our blog. We can find graphic files online and it's completely free. I recommend you to search and choose icons from this site www.iconfinder.com/.
How to find and save icons on the disk.
- Type into the search engine on website "social media"
- Find the icon and click on it
- Look for ones that have 32×32, 48×48 and 64x64px for storage.
- Select size and click on the PNG button, a window will open to download the icon.
We need to check which size will look best in the sidebar, as a rule 64×64 icon looks best if we have 3 icons next to each other. If there are more of these icons will look better in a smaller scale so that all fit horizontally in one line.
My advice. Choose stylistic icons that match each other, for example
The icons are all the same shape. Instead of a set like this:
Each from a different parish in terms of typography or shape. When in search engineIf you like a style, you can click on the graphic and all the other related icons will be shown.
Remember! The image of your blog is very important, so choose your icons well
Step 2. Upload icons to your blog. How to do it?
- Select media tab => add new
- Upload previously selected icon image files.
Step 3. Copy and save where¶ links to the graphics you uploaded. Where do you get the links from?
Open the graphic e.g. in a new window and copy its addresswhich is located in the URL box on the right. Click on the name address and press ctrl+a then the whole link will be selected, which is longer than the one shown in the picture. Save all links in notepad, because we will need them later.
Step 4. Preparation of HTML code - icon display
Now our task is to write code that will display the social media icon, and when you click on it, it will open a new pagesThe user can upload their profile to the portal.
- View picture has this syntax
- Enter the size of the icons, by default I added them in size 68×68. If you chose a different size, change the data by entering your size e.g. 32 in height and width.
- We need between src="...." Paste the link to the icon e.g. Twitter
- In the alt paremeter, instead of "text" we can type for example "twitter account"
- In the tittle parameter, type for example Find me on Twitter
- The whole should look like this for a single social media profile
uploads/2014/11/twitter.png" alt="Twitter account" height="68" width="68" tittle="Find me on Twitter" />
Now your task is to prepare such code for the other icons you want to display.
Step 5. Preparing a link to profiles.
Now we need to prepare the HTML code which will be responsible for the function of clicking on the icon and opening the social media profile in a new tab. We add a link to the social profile instead of the url e.g. to google+ and the parameter responsible for opening the profile in a new window _blank. The whole thing should look like this:
Now your task is to create the remaining links for all selected via you social icons.
Step 6. Combine the image display code with the profile link
Now your job is to concatenate the img and a href codes for all the icons. The most difficult bit of work is behind us. Now it will be magically easy.We add the html code of the social media icons to widget on the blog. Select the Appearance => widgets tab from the menu on the left.
Select widget Text and drag it to the sidebar on the right. To make the icons look nice we will put everything between the
Paste all the html code we created earlier , add the widget title and save. It's ready! The end result looks just like the one on my blog:
Internal Links and Sematics
Link building has never been easier. Hundreds of link possibilities in one click.
Professional SEO platform
SEMrush offers solutions for SEO, PPC, content, social media and competitive research.