Blog Genes

Showing posts with label Social Media. Show all posts

Thursday, 17 October 2013

How To Add Facebook Like Button Below The Post Title And After The Post In Blogger ?

As we all know that Facebook is the largest social network today, So we all keep trying to promote our blogs or website on Facebook. Facebook can generate huge traffic for our blogs and that is why we can use it as a major traffic source. Facebook always provides new tools to its users that they can use for various purposes such as for judging their products, articles etc. that people are liking it or not. Facebook likes also shows the interest and confidence of users in your blog or website. Their Facebook like button is also an amazing tool that can generate so many like for our blogs or websites.

Facebook like button is small widget and that is its advantage as well as disadvantage. First we consider its advantage Facebook like button is a small widget so that we can place it anywhere in our blogs or website without loosing our precious space. And also we can place this widget on each and every page of our website for different articles. I have seen some SMS or messaging sites that use Facebook like button after each SMS that helps them in generating huge traffic to their sites.

Along with all these advantages it also has disadvantages, again its size is also a disadvantage because it is small and therefore if we do not place this button on right places then it makes no sense. So the thing we have to consider while using this widget is to place it on right places that can generate us maximum likes for our blog or website.

Also read: Facebook pop up like box widget for Blogger. - Recommended

In this tutorial i am going to show you how to place Facebook like button just below the post title and after the post body. Both of these places are most favorable for placing our like button. As in top position user can easily see it while reading the title and if we place it after the post body then after reading your post a user can give its opinion whether he/she is like it or not.

Below are the steps describing the procedure to create and the add your Facebook like button to Blogger:

How to create a Facebook like button for your blog or website ?

Go to Facebook developers page.
Then enter the required fields and click on Get code tab.

Then it will show you two separate section of codes as shown in screenshot below.

Now your like button code is generated, copy both the codes.
Here i am using the name CODE 1 for above code and CODE 2 for the below code, so see the above screenshot correctly.

How to add Facebook like button just below the post title ?

Log in to your Blogger Account.
Then go to Dashboard >> Template >> Edit HTML.
Now press CTRL+F and search the following code:

</body>

And paste the CODE 1 just above </body> as shown in screenshot below.

Now search the following code:

<data:post.body/>

Note: This code appears three times in the code, so you have to search the second one. And if after following the below steps your Facebook like button doesn't appears then search the third one and paste code just above it.

Now place your second code just above <data:post.body/>, as shown in screenshot below.

Now save your template and you are done.

How to add Facebook like button after your blog post ?

Follow the first five steps as mentioned in above procedure.
Now paste CODE 2 just below <data:post.body/>.
Then save your template and you are done.

How to show Facebook like button on post pages only not on Homepage ?

If You don't want Facebook like button to appear on Homepage then simply place the CODE 2 in between conditional tag.

For example:

<b:if cond='data:blog.pageType == "item"'>
CODE 2
</b:if>

Also read:

Facebook Popup Likebox Widget For Blogger

Every webmaster loves to promote his/her blog or website. Social media websites are the great source of generating traffic for your blog. As we all know that Facebook is the largest social networking website and therefore every webmaster is searching for new and effective ways to promote his/her blogs on Facebook.

Today developers are creating various cool social media widgets that can be helpful for you to promote your blog or website on different social networking websites. Facebook popup widget is one of the coolest widget that can increase Facebook likes for your website or blog. This Facebook popup widget is a fast loading, easy to install and good looking widget. I have tested this widget on various templates and using it on almost all my blogs and its actually helping me. So now, if you want to add this widget to your blog then just follow the simple instructions below:

Also read: Stylish scrolling Facebook like box widget for Blogger. - Recommended

How to add Facebook Popup Widget to Blogger ?

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
Then copy and paste the below code in HTML/JavaScript box.

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VPTSbfGYS0iUtsnvTAFK_SxuKRNSUHuV6X9fGcCqZ3x-d-QB1vhBu49t4EXcsnEunMzKY1DLsFkAVRhNked_XSm-0Nzj6NAaRnLA-cGL1Lrvx4ryx16AK5chJ7ZKcO48PqgQ8ofs4IrY/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/bloggenes&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit"><a href="http://www.bloggenes.com/2013/10/facebook-popup-likebox-widget-blogger.html">Facebook Popup Widget</a></span></center>
</div>
</div>

Now save the gadget and you are done.

How to add this widget on any website or other platforms ?

To add this widget on any website, just copy and paste the above code in body section of your website i.e. in between opening and closing body tag (<body> your code </body>).

How to customize it ?

Replace the code in red with your Facebook fan page URL.
By default, This widget appears only once in 30 days for a user. So if you want the widget to appear on every reload then search and remove the following code from the above code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Note: This widget appears only once in 30 days, so if want to see it again then clear your browser's cookie.

Also read:

Floating Twitter Follow Us Badge Widget For Blogger

Twitter is also a great platform to promote your blog/website, the number of followers shows how much people believe in you and your blog. This twitter follow us badge is a decent widget that can get you some followers. You can use this widget to either promote you or your blog on twitter. The best thing about this widget is it does not take too much space, it is simple and precise and therefore it merges with your blog template.

This widget is just like other floating widget but it looks great, generally this widget looks great on website that has light background, However you can use this on blogs with dark background. This widget is very easy to install and customize.

To install this widget just follow the simple instructions given below:

Log in to your Blogger Account.
Go to Dashboard >> Layout >> Add a gadget.
Then select HTML/JavaScript from the list.
And then copy and paste the below code in HTML/JavaScript content box.

Now click on Save tab and you are done.

Customizations:

Just replace my twitter name shown in red with your twitter name.
If you want to change the default text "Follow us" to "Follow me" then simply replace Follow us shown in green with follow me.
To change the color of widget replace the HTML color code shown in blue with your HTML color code or default color name.
If you want that your widget to appear on the left side of the page then replace "r", shown in blue with "l".
To adjust the position of the widget simply change the value "136",shown in orange with your desired value.

Also read:

Do You Like This Article Updated Subscription And Follow Widget For Blogger

Generally we use social like, follow and subscription widget to promote our blogs on various social networking sites as well as to increase some visitors and for this we require some good widgets that can attract our users. So, this is a widget of choice, this widget is not only attractive but it is also full of features such as like, follow and subscription tools. The best thing i like about this widget is that it is attractive plus its placement, this widget is mainly designed to place it just after the post so that as your reader ends his/her reading they can see a sentence asking them "Do you like this article/story ?". If your blog post is good then they will definitely like, follow or subscribe it.

As we know everybody is in hurry so many times visitors like your post but don't click on like button. This is due to a non attractive widget or wrong placement of your widget. I like this widget very much and would recommend everyone to use it on their blogs/websites. I have removed each and every error from the code and tested it on my other blogs, you can see a demo of this widget by clicking the demo link given below:
Live Demo
The installation and customization of this widget is very easy. You can install this widget to your blog by following the easy steps given below:

Log in to you Blogger Account.
Then go to Template >> Edit HTML.
And then search this code:

<data:post.body/>

NOTE: This code appears three times in your template's Edit HTML section, so you have to find the second one. And if it doesn't work then find the third one.

Then copy and paste the below code just below/after it.

<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5sX3isRKJJFKns7sLla86kuWx1ns9qYWTthaqtre9RQpittVpBq5R2BADaRPdmH5DXwxQGTCFkBexwWaWnRDMAjN-9uRHw4lWg-IJ_qMAnEkRKwA-RbTA9ZZ13a-deVgYbMhl7YVHSQf/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: Lucida Fax,arial,sans-serif, verdana; color: red;'>Do You Like This Article?</span>
<tr>
<td>
<div id="fb-root"></div>
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-href="http://facebook.com/thebravesandsmarts" data-width="300" data-show-faces="true" data-send="true"></div>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Subscribe To Free Email Updates !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=btsnts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='thebravesandsmarts'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4a_0gSc7-P9IgbJ0lIUow_rRzCQ8L1wKgeXS1JQ6xidDkhoqTmTM8xR5aTWH85e51SxIiPTOA8s9H4bs1SJHoww97vCStSH3pLgyh2Fo-BeWF84klQQiW2MA_q7Ku5dY19bzl-NoefMr/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/TheBrvsAndSmrts' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcJsY00TFS9z1Ur8surSgixswYtT9bo2cmWx358DyG-CMOSrelQ5_wq0gU4C7zunKoWxQdl1EThiUj26s-hWrcdVzd1EX9EoElqSPlthCLfRErnygpX8ClWHjbvfSVKAImVmoLI05sSI5/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz72fa8j25sxmxLZRSEK4ZTnGP1XYTPm6Gg_5c36IT0MBqG5MhvyEQJWEYokwkzqiLlBM38RNdbfgGlPRBMjDwpFD2Vz_5NnTMycNuqahzPbv1VTOzn3Pg9ufSwEOF05XL9kGIx-XKpa9z/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table>
*Don't forget to click the confirmation link( in your email) to verify your entry!
</div></div>
</b:if>

Then Save your template and you are done.

Major/Necessary Customizations:

Replace the text in red color with your Facebook page id .
Replace the text in green with your Twitter username .
Replace the text in sky blue with your Feedburner id .

Some Other Customization:

These are not necessary but if you want then you can change this widget according to your requirements:

To change the background color pf the widget just replace the text shown in pink with default color names or HTML color codes .
To change the width of the widget just change the pixels value in yellow .
To change the background color on hover or mouse over just replace the HTML color code in light grey with your HTML color code or with default color names .
To change the font style just remove the text italic shown in grey color .
To change the font size just replace the pixel values shown in orange .
To change the font family just replace the text Lucida Fax shown in pink with your desired font family for Eg. Arial, Lucida Handwriting etc .
If you want to change the default Text with your own then simply replace "Do you like this article ?" shown in purple .
If you want don't want to show faces and Facebook send button then replace the text "true" with "false" shown in blue . Also if you want to change the length of Facebook button widget then just change the value shown in blue color .
If you want to replace the text "Get subscribe to free email updates", simply replace it with your own text shown in light/faded red color .

Also read:

Black Social Media Vertical Bar Widget For Blogger

black socia media vertical bar widget for blogger

Today there are lots of social networking websites available online where we can promote our blogs/website to get more traffic. We often see various social sharing widgets on different websites but if you want that your website look different than others then its a great widget for you. This widget contains only the leading social networking website buttons and hence it does not take too much space on your website/blog. Today there are many websites available online that can provide you such sharing buttons, one of the best website that i know is Add This but the problem with these websites they provide you only few choices and that are all common. So if you want to decorate your blog with something different then you can try this. This widget is really easy to install and does not takes your much time in installing and customizations.

To install this widget just follow the below steps:

Log in to your Blogger Account.
Go to Layout >> Add a gadget >> HTML/JavaScript.
Then copy and paste the below code in HTML/JavaScript box.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiux6g2upgG8y3x5aL2I70tmgBj8W36BLdBgeD2O0ljnetq_clhcaDFuP9CqLormAiuWdhADfJNWDLzq0xgWnuEMUAyPdxIuaRL67Fg2YdogKgGgR5uobSQBiy9oW45i-FvaNOZ4xK2U4lO/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BWZGXjlLB5aYRz7y1KbJ3ukfB3dIpP9Q9rse1PP6vIWN3mAxAn3S-a05ZzuUPFZJj07Z8-o0Nh2WRVQfKB6dATiqKLK6IFEUybfQb64yXO5qEbgOv1_OWvyBGrRawaR0RhPRuS-s42gZ/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.barconteblogger{margin:0px 0 0 43px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeCDY3HPf5GuKdOk-PS5Em7LxBec-YsCOcm_hVE_zM4IQkCTzyEbrx3RaQOWX4mVhOd9eoh5qDp4nvUZHaVfM-mBQpUJSE0Jn641-f0c30kLLklNUtsl1_q1Je5G8MpPdi9jOU2k561Na/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuRtjEaAQQooBHcYv4oBp7Rl5bRGHSbgMWhP-LkUa3i7GFnMONs_YB56OJEYFyUh8ROdXUfPjMlcO08In-UC7XY1KefcQwEsxXBLdwBaBnQPqLK2da7qixBQ4COl8uGhIt-X8Z5aE0xFE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.barcontetwitter{margin:0px 0 0 43px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmnepAEIIGoft8pg-_l_KlgqwiTIG8XMPL1kqdyJLGFZ0s5Mr_vZHMnjzizvd9uP6EN2Bd5r99rn7AuOxR4sCt_49vvN5-7IDX3AZDkW9UXtHkuLQWS2h74x0ukk9iVwU6L-RvPQSkout/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uMIlYr8-xhjdzHuuxS48DUJH3yHuQTERcv32JFwCFfyY0-EIX2XYo3_DMfSJBYM8RjGNQE__30pbtWRFgTOAdpxQIbKk2dgICe3yxzwTBcNWw_2tyrrNhoitLBFIc-VyNh45v43tUtYE/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.barcontefacebook{margin:0px 0 0 43px}

.barquestionmark{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbpGItb8u74-ONEbGbBBSagylsC97tXGwk3RVWNdDrOknf0dOx_fgquKFFGY7ntSyQsRrtraX-kT0dpaww_bchnWoqFbjedHoL2vUgn7SDRuUS7-xfUH0lyjNUgkqlvWxrzLvhtYqLuY/s1600/rss3.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

</style><br />

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><a href="https://www.facebook.com/thebravesandsmarts" target="_blank"><img alt="Like The us on Facebook" title="Like us on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVm6rCETiRpIlkRwx80dLl8Ihd_hOtogV2kgeBeXSvwco5uABXG7s2xGCj9tTOS6egKlRYmtj7Xec4A45JhVhKMOU9hvgZfNqk9H5MCxq_-x00-i_FSG_TvR4VX8feVNYR59QprM4vdZR4/s1600/FB-open-new.png"/></a><br />
</div></div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a href="https://twitter.com/TheBrvsAndSmrts" target="_blank"><img alt="Follow us on Twitter" title="Follow us on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCcQ7IdnrnYNBnFkMISJ2qJbrEVahfVnexYF5sgC74vJjNrztYFyHG6vNSn67-RUgCgtLHgnbEQPpz4ccxKQdqQ6Z5aQpeHAi2Sue9LCb2FslckRPSZRn-WomEj7IqcLR5yjG9CZ1Bgkl/s1600/TW-open-new.png"/></a><br />
</div></div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><a href="https://plus.google.com/103268075528632314965/posts" target="_blank"><img alt="Recommend The Braves And Smarts on Google Plus" title="Recommend The Braves And Smarts on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOFEfNmhcE7Ev0xqDKjdPb6za-ZVGnaLLW51Ni58V6TpJKC1uqCmDx8JPx0bCymxRP44qb4_D8qO_B7Yehe63EA-Rcnn1jbd1_GlL0uoecln1rgPc1Gb2jDU56YUPO34Lvqk-n8JrUhM1/s1600/G+-open-new.png"/></a><br />
</div></div>

<div class="barquestionmark"><a href="http://feeds.feedburner.com/thebravesandsmarts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyza4XNaw7VHMDtlrirDhYRWmTJkh1c_tGAxUM44iMY3dUlNZ7XOMpSCfzfxZW35nzUGS3ywvRV9AQRcHvB_iB4Hiqhyphenhyphen7LN4nsScuq-Y6p2a8MqgqrTd_pCp2nY1zntyDj7IVSe55RNXdx/s1600/blank.png" alt="Subscribe in reader" title="Subscribe in reader"/></a><br />
</div>

Then replace the colored texts with your fan pages name and id's.
Now click on save tab and you are done.

Also read:

How To Create A Facebook Badge For Bog / Website ?

Facebook Badges are very good widgets to show your profile and page status. Nowadays, many webmasters use these Facebook badges on their websites or blogs to connect with their audience. Facebook badges not only make your website attractive but they also show your visitors that how socially you are engaged with your audience. These badges show your current status that help your audience in understanding that what is going through your mind.

These badges also show what you like and follow. Another great thing is, you can create photo badges on Facebook that can give you more online presence. One more thing, if you don't want to share you social profile then you can crate a Facebook badge for your website that will only show the professional things to your audience.

Facebook provides four different kind of badges that you can use on your website or blogs to socially connect with your visitors:

Profile Badge: This badge is usually used by the webmasters to share their Facebook profile and status with their audience. This badge mainly includes your name, email and current status.

Like Badge: This badge is mainly used for showing your favorite pages, communities etc to your audience, that is, if you like something and want to share it with your audience then this badge is great choice.
Photo Badge: This badge is generally meant for showing your Facebook photos on your website or blogs. This badge provides you an option to show up to 8 latest photos that you have uploaded on Facebook. You can show your photos in rows as well as in columns, its totally your choice whether to arrange them in row or in column(s).
Page Badge: This badge is used for showing your Facebook fan page on your website. This badge is mainly used for promoting websites or blogs.

Now, i think i have described everything about the Facebook badges, so, now i am going to show you how to create these badges and add them to your blog or website.

Steps to create a Facebook Badge :

Log in to your Facebook Account.
Then go to Facebook Badges page.

Then select any of the badge out of four badges, here, i am taking Facebook profile badge.
If you want to add the badge to your Blogger or TypePad blog then there are easy installation buttons available.

But if you want to add these badges to any other platform then choose other option and copy the code.

Now paste the copied code to your blog or website at desired location. For WordPress add your code in Text Widget under Dashboard>>Appearances>>Widgets>>Text Widget, and save it.

Also read:

Add Meta tags to Blogger for better SEO (Recommended)
Scrolling recent posts news ticker widget for Blogger

How To Add A Stylish Floating/Scrolling Facebook Like Box To Blogger With Customizations?

Hi friends, Today there are many stylish social widgets are available which help you to connect your blog or website to social media and one of these social widget is "Scrolling Facebook Like box ". Facebook scrolling like box is a great widget to increase your blog traffic.

This widget does not consumes any space in your blog, it only appears whenever a visitor touches the Facebook badge, this Facebook like box widget is easy to install and customize, so you can make it perfect for your blog by little efforts. This Facebook scrolling like box is surrounded by blue border which makes it different from other scrolling widgets. This widget looks like the Wordpress scrolling Facebook plugin which is also an amazing widget, this widget gives the same feeling like Wordpress plugin. The widget is perfectly working, i have tested it on some different templates but the results was same for every template i.e. working.

In this tutorial i am going to show you how to add this widget to your blog and also i will show you some customizations so that you can change this widget as per your requirements.

Also Read: Facebook Pop up like box widget for Blogger.

Live Demo

You can add this widget to your blog in following simple steps :

Log in to your Blogger Account.
Go to Dashboard >> Template >> Edit HTML.

Now, Search for this code:

</head>

And Paste this J- Query code just above it and click on the "Save Template" tab as shown in screenshot.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

To Enlarge the images please click on them.

Note: You can leave the above steps if you have already installed the script.

Now again go to Dashboard >> Layout >> Add a gadget.

Then select "HTML/JAVASCRIPT" and paste the below code in it as shown in screenshot.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHC7wjL4yov3wR9RQH0CkIwoJFi_GEyHcibtEMlljsx321-ZxLU7AFDbtE_Ae7VHPH7FhJlkC_6f7y7llS7Mlr7DnkZhyphenhyphenl1y1XdB5DlPS3id0jV5UiPXX4cvzbUrsp13w0aZaiNefz6WE/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBlogGenes&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://www.bloggenes.com/2013/07/how-to-add-stylish-floatingscrolling.html" target="_blank">Get This!</a></span></div></div>
     </div>
</div>

Now save it and you are done.

Customizations:

Replace the Name in red with your Facebook fan page name.

Note: You have to use your Facebook fan page name as shown in your Facebook fan page URL. See screenshot below.

To Enlarge the images Please click on them.

Replace the image URL shown in green above if you want to add your own Facebook logo.

Note: If you want to use the logo shown in screenshot use this url :

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2UXu2Zpe334pyN9vHI5lfzcVIftZ2Stswxl7Dw2WlXTK80962G_AnkGSzDIkyMwObsIXKYj3UPC1IQPXqsHT5WJxkveCob_s-vZJWF_kW-QDrHVtEOcCdbBo1LjGr9DgmdENxUM2BHw/s50/113543-facebook-facebook-logo-purple.jpg"

Replace the HTML color code shown in pink with your own color code or default color name to change the border color.

To change the border width replace the pixels value shown in blue color.

To change the background color of the widget change the HTML color code in purple .

Facebook like box background color change

Also Read:

How To Add A Facebook Like Button To Layout/Sidebar In Blogger ?

In our previous tutorial we have discussed about how to add a Facebook Like Button below your posts header and after the post but today i am going to show you some easy steps to add this Facebook Like Button to your layout section i.e. in sidebar or you can say that as "Add A Gadget".

Facebook like button always helps us to increase the traffic of our blog and also we can use it as a system which judges our blog post that is, people are liking our posts or not. The main advantage of Facebook like button is that it is small and hence it does not takes much space of your blog/website like other big widgets. So, if you don't want to place any big social widget that can acquire your precious space then simply use smaller widgets that are as effective as the big widgets and one of such widget is Facebook like button.

Placing Facebook like button in layout section that is in sidebar or footer section will save your space that you can use for advertising purpose. But even if you don't want to loose any space then you can use other widgets like Facebook pop like box widget, scrolling Facebook like box widget etc which don't acquire any space of your blog/website. Both of these widgets doesn't consume any space and they are as effective as any other widget that you place in your sidebar or footer section to increase your social presence. The above two widgets are optional, now back on topic, adding Facebook like button to layout is very easy it just takes few minutes.

Below are the steps describing how to add Facebook like button to layout/sidebar in blogger:

Step 1: Go to Facebook Developers page.
Step 2: Now, paste your fan page URL as described below and do other customizations as per your requirement.

To Enlarge the images please click on them.

Step 3: Then click on "GET CODE" tab and a window will pop up with following four options:
Step 4: HTML5, XFBML, IFRAME, URL.

Facebook like button IFRAME code.

Step 5: Select "IFRAME" and copy the entire code.


To Enlarge the images please click on them.

Note : This IFRAME code doesn't work for Facebook Send button. hence select only Facebook like button during customization.

Step 6: Now, log in to your Blogger Account.
Step 7: Go to Dashboard >> Layout >> Add a Gadget.

Step 8: Now, select "HTML/JAVASCRIPT" and then paste the copied code in it and click on "Save" button and you are done.

Tutorial Last Updated on October 2014.

Also read:

How to add Twitter flying bird to Blogger ?

Hi Friends, Today in this tutorial i will teach you how to add a "Facebook Like Button" to your blog. Social networking site are always a great source of traffic and you can earn lots of visitors to your blog through these sites and this like button helps you to promote your blog on Facebook. You can place this Facebook like button anywhere in blog but people generally place it just below the header or after the post. In this tutorial i will explain you some easy steps to add this widget just below your header or just after the post or on both top and bottom of the post.

Also read: How to create a Facebook Badge for blog or website ?

Below are the steps describing the procedure to add the Facebook Like button to blogger:

Step 1: Go to the Facebook Developer page.
Step 2: Add your Facebook fan page URL as described below and you can also customize the button as per your requirement as there are many customization options are available.

To enlarge the images please click on them.

Step 3: Now, click on the "GET CODE" tab.
Step 4: Then a window will pop up and you can see there are two codes available.
Step 5: Copy these codes.

To Enlarge the images please click on them.

Step 6: Now, Log in to your Blogger Account.
Step 7:Go to Dashboard >> Template >> Edit HTML.
Step 8:Then a window will pop up and first you have to search this code given below :

</body>

Note: you can search this code using CTRL + F , but in new blogger this CTRL+F feature is not working properly so you have to search it manually.

Step 10: Paste the Code 1 just above this closing body tag.

Step 11: Now, search this code given below :

<data:post.body/>

Note: this code appears three times in template's Edit HTML code , so you have to search for the second one.

Step 12 :Now, paste the second code i.e. Code 2 just above or below( For placing the Facebook like button below header paste the Code 2 above <data:post.body/> this code and if you want the Facebook like button on bottom of your page then paste the Code 2 just after <data:post.body/> this code ) this above code.

To Enlarge the images please Click on them.

Step 13: Now, Click on "Save Template" tab and you are done.

Demo

Also Read:

How To Add A Facebook Likebox To Blogger ?

Today Facebook is the most widely used social networking website, it has huge number of users and because of this every webmaster and businessmen try to promote their blogs, websites, products etc on it. Every webmaster knows the potential of Facebook and other social networking sites like Twitter, Google plus etc and therefore they keep on trying attractive widgets on their blogs and websites so that they can earn the maximum traffic from Facebook and other social networking sites.

Although Facebook is a very well known social networking website and doesn't require any promotion because most of the people who use internet know about it as they know about Google but still they like to promote their website and therefore they keep on innovating new things like providing better security and privacy to its users, developing new widgets for webmasters etc. So one of the widget that is most widely used by the webmasters is Facebook Like box Widget, this is a widget of choice as it easily merges into your sites layout and also shows the number of fans your blog,website. So maintaining a fan page on Facebook is good for every webmaster to earn some extra traffic and also to show that how popular you are on social networking websites.

So if you want to add this decent widget on your blogger blog then you can follow this tutorial. Adding this widget to blogger blog is quite easy and doesn't take much time.

You can add this widget to your blog in few easy steps mentioned below :

Step 1: Go to Facebook developers page or copy and paste this link to your browser's address bar " https://developers.facebook.com/docs/reference/plugins/like-box/ ".

Step 2: Now, enter your Facebook Page URL and Customize your Facebook like box for other settings as there are many customization options are available like width, height, color, border etc.