Facebook widget for blogger
Facebook is a fantastic and most popular social media website on internet with over more than 1.55 billion monthly active users. And because of the the great presence Facebook has on internet, we as bloggers can use it to drive traffic on our Blog. For that we need to engage our audience on Facebook, and for that we need an excellent Facebook widget.
So today I will share some powerful and stylish Facebook widgets for Blogger that you will love to install on your blog. But before moving any further let me tell you something about the widgets that I am just about to share.
These widgets include Facebook likebox for Blogger, Facebook follow us button including other social media buttons and some widgets that we created previously.
Facebook Likebox widget for Blogger
Facebook likebox widget is very useful for webmasters to engage their audience on their Facebook fan pages. Also it is a great way to promote your Facebook page and to get new likes and followers.
Facebook has deprecated the previous Likebox plugin after the release of Graph API v2.3. So now you have to use a more advanced and faster plugin that will not put any burden on your blog’s page speed.
Here is the complete guide of how to install this awesome Facebook widget on your blog.
First go to your Blog Dashboard->Template->Edit Html and search for <body> tag like this:
Once you have found the <body> tag, then just after it include the Javascript SDK on your page.
[code]
<div id=’fb-root’/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=837524639611911";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
[/code]
Just like this:
Now when the Javascript SDK is installed on your website, now you can easily put your Facebook widget any where on your blog. Ideally, you should put your Facebook likebox on sidebar. For that copy the code which is given below:
[code]
<div class="fb-page" data-href="https://www.facebook.com/your-fanpage-url/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/your-fanpage-url/"><a href="https://www.facebook.com/your-fanpage-url/">Your fanpage name</a>
</blockquote>
</div>
</div>
[/code]
Please replace “your-fanpage-url” with your fanpage URL. And replace “Your fanpage name” with your original fan page title.
Just like this:
Or if this process is a bit complicated for you then only copy the code which is given below and paste it on HTML/Javascript widget in Layout section as shown below:
[code]
<div style="background-color:#F0F2F2;width:300px;padding:10px 0 10px 10px;height:250px;border:0px solid #CCCCCC;">
<div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fyour-fanpage-url&width=300&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; margin-left:-6px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
[/code]
Replace “your-fanpage-url” with your original fanpage URL and everything will look fine if you have done everything correctly.
Facebook follow us buttons
One another way to attract new people towards your social media fan pages is to use follow us widgets.
We have build some awesome social media follow us buttons that are both stylish and attractive and are very easy to install.
Just copy the HTML that is given below:
[html]
<div class=’fb’><a href="" target=’blank’ class=’image’><img src="http://2.bp.blogspot.com/-ACIRMV7s8ZA/VTUZCKsA2bI/AAAAAAAAAVQ/_q-Npc9JzGk/s320/facebook-icon-circle.png" width="360" height="200" alt="" /></a>
<div class=’fbtxt’>Facebook</div>
</div>
<div class=’tw’><a href="" target=’blank’ class=’image’><img src="http://4.bp.blogspot.com/-992FVJlk_Lw/VTUaSodA9KI/AAAAAAAAAVc/TgFiXW9ikvw/s1600/twitter.png" width="360" height="200" alt="" /></a>
<div class=’fbtxt’>Twitter</div>
</div>
<div class=’gp’><a href="" target=’blank’ class=’image’><img src="http://1.bp.blogspot.com/-PcLuA6aPJaM/VTUekWSs1TI/AAAAAAAAAVo/4HrbZpnQKD0/s1600/google-plus-icon.png" width="360" height="200" alt="" /></a>
<div class=’fbtxt’>Google+</div>
</div>
<div class=’pt’><a href="" target=’blank’ class=’image’><img src="http://4.bp.blogspot.com/-iNxIZbbw7vQ/VTUgst3z8vI/AAAAAAAAAV8/BPWCSrvDbJ0/s1600/pinterest-icon1.png" width="360" height="200" alt="" /></a>
<div class=’fbtxt’>Pinterest</div>
</div>
[/html]
And paste it on a HTML/Javascript widget, then paste this CSS style sheet onto the same widget.
[css]
<style>
.fb {
background:rgba(87,104,176,35);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}
.fb:hover {
width:150px;
}
.tw {
background:rgba(14,174,284,1);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}
.tw:hover {
width:150px;
}
.gp {
background:rgba(202,58,48,4);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}
.gp:hover {
width:150px;
}
.pt {
background:rgba(192,24,16,1);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}
.pt:hover {
width:150px;
border-radius: 51px 50px 50px 50px;
}
.fbtxt {
margin-left: 50px;
margin-top: 11px;
color: white;
}
.image img {
height: 50px;
width: 50px;
float:left;
transition: transform 2s, width 2s, height 2s;
}
.image img:hover {
transform: rotate(360deg);
-webkit-transform:rotate(360deg);
width:62px;
-webkit-animation:example 2s infinite linear; /* Chrome, Safari, Opera */
animation:example 2s infinite linear
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
/* Standard syntax */
@keyframes example {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
</style>
[/css]
Put your social media fan pages’ URL into the “href” attribute.
Previous Widgets
Finally, we will like to share few widgets that we created previously. Have a look please:
Subscribe us widget for Blogger
Wrapping it up
Thanks for reading the article, please subscribe for more and follow us on Facebook, Twitter and Google Plus. Please let us now if there is any problem in installing any of the widgets.
Related Posts
-
5 SEO plugins that can save you from Panda penalty
2 Comments | Feb 3, 2015
-
How to get targeted visitors to your Blog who have alexa toolbar installed?
1 Comment | Feb 27, 2015
-
WordPress Social Plugins: 5 Cool Plugins to get more Social Media engagement
5 Comments | Apr 11, 2015
-
Author Box: An awesome Blogger widget
2 Comments | Apr 28, 2015
About The Author
Hasnain Haider Abbas
Hasnain Haider Abbas is a 25 years old web entrepreneur and founder of Articlesteller.com. In the early stage of his life, he fell in love with technology, His expertise is in SEO, Content writing, Social Media, Affiliate Marketing, Web development, and Business promotion.
Thanks so much. Your article will be very helpful! It certainly is exhaustive and thorough!
I am happy to see you happy..