Recent Posts

Home › bLOGGER help desk › Google blogs › HTML widgets › social media plugins

Facebook widget for blogger

Saturday, January 25, 2020
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:
search body tag for facebook blogger widget
Once you have found the <body> tag, then just after it include the Javascript SDK on your page.
1
2
3
4
5
6
7
8
<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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;appId=837524639611911&quot;;
 fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Just like this:
facebook widget code
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
Please replace “your-fanpage-url” with your  fanpage URL. And replace “Your fanpage name” with your original fan page title.
Just like this:
second code for facebook widget blogger
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:
facebook likebox blogger widget 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&amp;width=300&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; margin-left:-6px; height:258px;" allowtransparency="true"></iframe>



</div>











</div>

Replace “your-fanpage-url” with your original fanpage URL and everything will look fine if you have done everything correctly.
facebook widget works

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:







<div class='fb'><a href="" target='blank' class='image'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hkqHXFc3hlF1yZs2cfuMeI98uZBxDFzMb0K_ID8hC_14ySFWRbtwlECY_PI9A6m7ZdlV2nWPJQInKwYfAh4pDhQpfR2thl3vQgmqmyOkCGAQdp5Dam7DXoPhLIbiVYbVn3ttdHss99s/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsnJQEOxUri_WKh8c9tNy7P7kUlQ5Vy40kyMv08MChKEJXXlsN_C2INLLftTIMTfbiz1s7KjimkjVlTcPDTBXqe6yTjQnCsz_1PXAdB1dbC5ZZnZbi_QXYVKTlUbG0qsSBrGgyAQT8N0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGc7815ZOb6JuOZt2B84NIN2QB5KWlwjj_76vJUctAUBrYiI0XSwGtSVIi0PIBVGIOv7LcEZ8qNKSCblherCKh7U9BE6Fs8Rj_btttJF12zIqll3Qd0n9LpziOY9mpvvoeCMCRoCDR0lg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkLwDkdf7l3ODulXSXEZ1RaK0TEcXdCV1QiSJqxUPqCc-IWFiMiVL-BEr9Uk39aU7KvWTHGePirnk3vOaOrUuIEFyyaQ5Zje1_hPym6hTDjAgBuFK6U0ZuQVsPKGZrNyVVgOqWhzpab8/s1600/pinterest-icon1.png" width="360" height="200" alt="" /></a>







<div class='fbtxt'>Pinterest</div>







</div>

And paste it on a HTML/Javascript widget, then paste this CSS style sheet onto the same widget.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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>
Put your social media fan pages’ URL into the “href” attribute.

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.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)