Display Social Widgets For Blogger (Facebook, Google+ & Twitter)

Displaying social widgets in a blog helps visitors to know that your blog has a profile on Facebook, Google+ and Twitter and so they get the latest updates straight from these social networks. This helps to build traffic to your blog.

In this post we will see how to get and display social widgets for Blogger. Facebook like box, Google+ badge and Twitter tweets for your Blogger blog.

Displaying Facebook like box, Google+ badge and Twitter tweets in Blogger is really easy. Just follow the steps.

Display Social Widgets For Blogger (Facebook, Google+ & Twitter)

Must Check Out Below Article!

Beginners Guide To Blogging

How To Display Facebook Like Box In Blogger?

Facebook like box is a great Widget for bloggers, which give you the opportunity to promote your personal blog or your website on social network.

Today, Social networks have grown so much on the Internet, even Google consider Twitter and Facebook a major Factor for Search Engine Optimization. So, adding like box in your blog sidebar is an excellent practice to convert your visitors into loyal readers, by simply follow you in one click. We show you how to create Facebook like box for blogger blog easily.

Now follow these simple steps

First, go to Blogger and log in to your account. After you complete login, Click the blog title in which you want to add the Facebook Like Box and enter the main dashboard.

Now, Click on layout, then go to your sidebar widget.

Now, you need to Add a HTML/JavaScript Gadget to your blogger, which we will use it to copy iframe script code to display our Facebook like box.

Last thing to do, is to copy this code and add it on HTML/JavaScript Gadget.

<iframe 
src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/TripleClicks1032&width=290&height=250&
amp;colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border: none; height: 250px; 
overflow: hidden; width: 290px;" >
</iframe>

Replace my Facebook page ID “TripleClicks1032” in the URL with your own ID of the page.

Go to your Facebook Page you will find the ID in the URL, Your ID should be as sequence of numbers or as username as you can see in below ScreenShot.

You can change the width and height of Facebook like box based on your Blogger blog template and click save the gadget.

Get Your Own FaceBook Like Box Code

The above code fits perfectly for all the blogs if you want to add new features like streams, color, width and height.

You can use this link Facebook Like Box and get your own code.

Now click on "Get Code" and copy it, later paste this code in HTML/JavaScript gadget.

Hit "Save" and refresh your blog or website. You will now see a stylish Facebook Like Box embed to your site.

Enjoy.

How To Add Official Google+ Badge / Widget To Blogger Blogs Or Websites?

Within one year, Google Plus has overtaken other social networking platforms by a fare large margin. If we see the statistics of the recent year 2012, then the facts are pretty much clear that Google+ is way ahead than others.

Therefore, connecting your blog with Google Plus is an ideal way of magnetizing more new readers, as well as building a strong relationship with your followers. For Example, when a person shared his post on Google+ then, it will send messages to all the followers about that latest post which will increase the viewership. For that reason Today, Google officially released yet another Google plus Perk: The follower gadget (only for BlogSpot enabled websites). Today in this article, we will learn more about the Google+ Follower Gadget and will also learn how to integrate it in our Blogger site.

Add Official Google Plus Badge / Widget To Blogger Site

Sign into Google+, and go to Google+ Badges Page. Now, in Google+ user section, you can choose your profile, page or community. In other options, you may select as of your need.

Note:- If you want to add badge for your community, then go to your community page, and copy the link, and paste that URL to Google+ user section.

Make sure, if you are using badge for your community pages, you need selected the correct URL of your Community Page.

For example, my community page URL is

https://plus.google.com/communities/101384761918164914602

If you have pasted the correct URL, you will see the preview in the right side.

Remember! The code you will get for your Google+ Badge is divided in to TWO PARTS. To understand these two parts, see the below screenshot.

Code Placements

First Part Of Code:- Place this part of the code where you want your Google+ Badge / Widget to be rendered.

Second Part Of Code:- Place this part of code between <head> and </head> tags (Meaning! after <head> while before </head>).

Code Configuration

First of all Sign In to your Blogger Account. Go to Blogger Dashboard, then Template, then click Edit HTML as you can see in below image.

Now click anywhere inside HTML Editor. Find the code (Using Ctrl + F keys) <head> or </head> as in below screenshots.

Search For <head>

Search For </head>

Now paste carefully the Second Part Of Code just below <head> tag or just above </head> tag. See the screenshot for both illustrations.

Paste Second Part Of Code below <head> tag.

Paste Second Part Of Code above </head> tag.

Now click on Save Template.

Now copy the First Part Of Code and paste it anywhere you want to display your Google+ Badge / Widget.

For Example

In Sidebar:- Paste First Part of Code into your sidebar widgets by going to Blogger Dashboard >> Layout >> Add A Gadget (choose from sidebars) >> HTML/JavaScript (Choose under pop up window) and paste your code and click on Save.

In Content Above / Below:- Sign in to Your Blogger Dashboard >> Template >> Edit HTML and find the code (Using Ctrl+F) <data:post.body/> and paste First Part Of Code just before <data:post.body/> to display your Google+ Badge / Widget above the content area.

If you want to show it below the content area, paste First Part Of Code below <data:post.body/> and finally click on Save.

Note:- If you are using customized template on your Blogger blog, you would see <data:post.body/> code two times in your template, so try for each and look at your blog to find out which is suitable for your blog. Mostly it works in second time code.

You're done. Enjoy.

Also Read Below Guideline

Display Recent Tweets In Blogger With Twitter Widgets

I hope you like this article, please share it to your friends and subscribe to our blog to get latest updates from us.