Display Social Widgets For Blogger (Facebook, Google+ and 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.

How to display social widgets for Blogger

How to display Facebook like box in Blogger

Ready to use code:

1. Login to blogger and go to your Dashboard >> layout
2. Click Add a gadget, new pop up window opens
3. Find out HTML/JavaScript and click the + button
4. Paste the following i frame code in content area and save it.

1

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTechTuner4u&amp;width=200&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=109603472461097" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:280px; height:290px;" allowtransparency="true"></iframe>

Now you can see the Facebook like box in your Blogger blog. Make sure you change the ID “TechTuner4u” with your Facebook page ID.

Get your own code:

The above code fits perfectly for all the blogs if you want to add new features like streams, color, width and height then use this link Facebook like box and get your own code and paste it in HTML/JavaScript gadget and click save.

How to display Google+ badge in Blogger

Method – 1

Since Blogger is a free service owned by Google you can find Google+ badge in your gadget screen. Just enter your Google+ profile or page ID specify the size of the badge and pick the color. If the preview above is O.K then click save and refresh your blog to see the Google+ badge.

Method – 2

If you want the one like image above then click “add a gadget” and paste the following code in HTML/JavaScript content and click save. Make sure you change this ID “103580833761087808296” with your Google+ profile or page ID.

1	<!-- Place this tag where you want the widget to render. widget By Tech-Tuner4u -->

2	<div class="g-page" data-width="280" data-href="//plus.google.com/+Techtuner4uBlogspotdotcom" data-rel="publisher"></div>

3

4	<!-- Place this tag after the last widget tag. -->

5	<script type="text/javascript">

6	(function() {

7	var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

8	po.src = 'https://apis.google.com/js/plusone.js';

9	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

10

})();

11

</script>

Method – 3

If you want new design like cover photo, tagline color theme then use this link Google+ badge create a new style >> copy the code and paste it in HTML/JavaScript gadget in your Blogger and save it.

How to display Twitter tweets in Blogger

Login to your Twitter account and go to Settings >> Widgets and create a new widget. Now configure your username, theme color, link color, width and click create widget. Now you will see a code below the preview, copy the code and paste it in HTML/JavaScript content and save.

It’s all done! You have displayed Facebook like box, Google+ badge and Twitter tweets to your Blogger blog. Now visitors can like your page, circle your page and see the latest tweets from your Blogger blog. Happy blogging!