Wednesday 5 March 2014

How to put social media buttons in blogger


Social media marketing is an important tool for your business growth be it be a blog, website, sales, promotions, education, finance, lifestyle, politics, travel and lot more to mention (actually it applies to all fields). So, it's important that your business should be well connected with almost all the leading social networks. To be precise, not all social sites suits your business. For example if your blog is about local education, then you may go for Facebook, Google plus, linkedin. 

The remaining rulers like twitter, pinterest, stumbleupon, instagram etc won't be much beneficial. Like this for almost every category, only some social networks fits best for popularizing as well as marketing. Of course there may be some category for which all the networks work well. We will discuss about that later. For now we discuss on how to include our chosen social icons in our blogger pages just like shown below. In case of bloggers, including social media buttons help the visitors connect with you or your brand, thus directly helping you improve your blog's traffic and hence better SEO. 


For this you need to have small buttons like above. If you are unable to google it, download the below icons. The thing what we need to do is get html code for the pictures and putting the html code in the blogspot HTML gadget. Later we give a link to this. Understand this process step by step below.

 


Step - 1

For now we consider putting twitter button. Go to the following link - Photobucket. Its an online tool that dedicates unique html code for every picture. Ok, if you already have an account with photobucket, sign in. Otherwise if you are a first time user, signup quickly. It's not required to put profile picture and any other procedure, just sign up and do step -2.

Step - 2

After you sign in, goto 'Home' and click 'UPLOAD'. Then you will be taken to a page with button 'choose photos & videos' as shown in the second picture below. Click the button and choose the picture who want to upload from your system.



Step - 3

Then click 'view uploads' button there after which you will be taken to your image gallery. Select the picture that you uploaded just know and click it.


Step - 4

After clicking this, view to the right of the page to see the display 'Links to share this photo' as shown below. Click on it to get it copied automatically.


Step - 5

Now your work with photobucket is done. Login to your blogger account and goto Blog > Layout > Add a gadget. Click the 'Add a gadget' button which displays a list of gadgets. Scroll down to see 'HTML/JavaScript' gadget. Click it.

Step - 6

Now you should see a popup display with two options as shown below. Enter a beautiful title something like "Connect with us in social networks" or "Find us in ...". Just type your wished title and then paste the code in the 'content' space. Now click 'Rich text' link; only to see your twitter picture in the content space.


Step - 7

Open a new tab in your browser and then login to your (your brand's) twitter account. Copy the URL of your twitter home page.

Step - 8

Return to the blogger popup menu i.e HTML/JavaScript. Select the twitter image (by holding 'shift' and 'left arrow' button simultaneously in your system keyboard). OK, then click the small image link available (as highlighted in the picture). Doing this will display another popup menu where you need to paste your twitter home page URL.


Click OK and then click 'save'. Now, you successfully installed twitter icon in your blog.

Step - 9

To include other social buttons say Facebook, do the same process from step-2 to step-4. After copying the HTML code of the new image return to your blogger and goto layout. Then navigate to the HTML gadget that you created earlier (to include twitter button) and click edit, which will display the HTML popup menu again with twitter button.

Step - 10

Click 'HTML' link and paste the new code next to the previously saved code in the 'content' space. you may even give any number of space/gaps between them. Then, click 'Rich text' to see both twitter and Facebook buttons. Now copy your Facebook's homepage URL and link to the facebook button in the gadget. Click save.

By doing similarly, you can add any number of social buttons which will appear horizontally (in a line) as shown below. If you want to make them appear vertically, just open the HTML gadget by clicking edit button, click Rich text and then place your cursor between the first and second social button. Simply click 'Enter' button in your system keypad, which will then take the remaining buttons to the second line. 

That's it, you are done. Simple isn't it ?


Hope this helps.

Share your views about this topic by leaving a comment below. 

Sharing is caring. Like us in social networks to get updated with latest posts. Subscribe to our free email service in RSS feeder. 

Also see

    


No comments:

Post a Comment