Labels:

Add Facebook Comment Box To Blogger

Facebook Comment box helps your blog visitor to comment on your blog via Facebook account. Facebook comments also helps to increase your site traffic because if someone use its account to make comment then your commented post automatically comes in their news feed. Which increase chances for getting more visitors. As i already discuss about the advantages of adding Facebook Like Box and also using Facebook Like button in between articles. Facebook Comments box also help you to make your blog for user friendly if you have great visitors from Facebook. So if you want to add Facebook comment into your bloggers blog then follow below given simple steps carefully.

Steps To Add Facebook Comment Box

1. Create Facebook Application 
  1. First of all you need to create an app on Facebook. To create new app Visit here
  2. Just create app with valid App name, their is no need to add or change any another option and if you want then add. 
  3. After Creating new App change sandbox mode settings to OFF 
  4. Click on Save Button and Note down your App Id. 
2. Settings of Facebook Comment Box For Blogger 
  1. Open Your Blogger Template section of Blog
  2. Then Edit HTML 
  3. Now Search for <html and Replace it with below code
<html xmlns:fb='http://www.facebook.com/2008/fbml'

 Now search for </body> and paste below code just before it.

 <div id='fb-root'/>
<script>  
window.fbAsyncInit = function() {    FB.init({      appId  : &#39;Your-App-Id&#39;,     
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session     
xfbml  : true  // parse XFBML    });  };   
(function() {    var e = document.createElement(&#39;script&#39;);     
e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;   
e.async = true;     
document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());
</script>

Replace Your-App-Id with your app id.
Now Search </head> and paste below code just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Safe Tricks' property='og:site_name'/>
<meta content='Blog-Logo-Image' property='og:image'/>
<meta content='Your-App-Id' property='fb:app_id'/>
<meta content='http://www.facebook.com/SafeTricks' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace:-

Safe Tricks:-                With Blog Title Name
Blog-Logo-Image:-        With Logo Image
Your-App-Id:-               With Facebook App id
SafeTricks:-                 With Facebook Page Username

This above method will give better appearance to blog in Facebook News Feed when someone comment on your blog.

3. Setting For Comment Box Placement.

  • Now Search For this code <b:includable id='comment-form' var='post'> or code look like same.
  • Paste Below code Just after above searched code.
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script 
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' 
expr:title='data:post.title' expr:xid='data:post.id' 
width='530'/></div>
<div style='color:#fff; 
background-color:#3B5998;border: solid 1px #ddd; font-size:10px; 
padding:3px; width:520px;'>Facebook Blogger Plugin by <b><a 
alt='blogger templates' href='http://www.safetricks.com' 
style='text-decoration:underline; color:#fff;' target='_blank' 
title='blogger templates'>Safe 
Tricks</a></b></div></div>
</b:if>

  • In case if are not able to find above searched code or in case if comment box not appear then instead this code <b:includable id='comment-form' var='post'> 
  • Search for this code and paste above given coding just below it.
 <div class='post-footer'> 
  • This code may comes 2 times always choose code which comes second. 
  • Now to change width of comment box change values of  width='530' and width:520px 
  • Now Save Your Template Settings. Now Refresh your any blog post and see live Facebook comment box.
4. Steps To Hide Blogger Comment Box
  • If You want to hide your blogger comment box 
  • Then go Settings tab of blog >> Then  Post and Comments
  • Now Change Comment Location to Hide and then save settings.
I try to explain the whole process into 4 sub parts in which i explore about comment app creation, then design placement, then comment box placement and Blogger comment box hiding. I hope you will follow all steps as i mention carefully without any mistake.
In case if you face any issue while implementation feel free to share your comment. 
Read more »

0 comments
Unknown ● Saturday, October 11, 2014
Labels:

How to Add facebook recommendations bar to blogger


Facebook recommendations bar is a good social plugin which helps in increasing page views of your blog. It displays a floating box at the bottom corners of your blog. 

This box contains a list of most popular articles of your blog which have maximum shares on facebook. Adding this facebook recommendations bar to your blog is very easy. Just follow our simple guide and enjoy the awesomeness of facebook in your blog.
Adding facebook recommendations bar to blogger

Step  1: Login to your blogger dashboard.
Step  2: Select your blog and select Layout option.
Step  3: Select Add a gadget option in your blog’s layout.
Step 4: Select HTML/JavaScript from the list of the widgets.
Step 5: In the HTML/JavaScript paste following code and save.

 
<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-recommendations-bar" data-site="www.amazingtricksforblogger.blogspot.com" data-read-time="30" data-side="left" data-action="like"></div>


Customize facebook recommendations bar for blogger
1. Replace www.amazingtricksforblogger.blogspot.com with your blog address.
2. You can also change the location of bar from left corner to right corner of the screen by changing data-side="left" to data-side="right" in the above code.
Read more »

0 comments
Unknown ●
Labels:

How to Add facebook like, send, share button to blogger posts


You know at present Facebook is the most popular social networking website which provides lots of traffic to millions of websites or blogs. You can also use the power of social media traffic into your blog by adding facebook widgets in your blog. In here we will learn how to add different facebook buttons such as share buttons, like button or send button at different locations in blogger posts. In this guide we will add these buttons below blogger posts and below post titles also. You can add these facebook buttons to your blog according to your requirement.


Facebook share button - The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.

Facebook send button - The Send button lets people privately send content on your site to one or more friends in a Facebook message, to an email address, or share it with a Facebook group.

Facebook like button - FB Like button is the quickest way for people to share content with their friends. A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

Add facebook like button below blogger posts
Note: In every blogger template <data:post.body/> has more than one occurrences. If the following method does not work with the first <data:post.body/> then try the same method with next <data:post.body/> and so on.

Follow these steps

Step 1: Login to your blogger dashboard and select your blog.
Step 2: Select Template option and Click on Edit HTML.
Step 3: In the template code find <data:post.body/>
Step 4: Paste following code just below the above code and save the template.

<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 style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
Customize Like button – Change value of data-share=”false” to data-share=”true” to show both like and share buttons.

Add Facebook like button below posts titles in blogger
Step 1: In the template code find <data:post.body/>
Step 2: Paste following code just above it and save the template.

 
<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 style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>


Add Facebook share button below blogger posts
Step 1: Select Template option and Click on Edit HTML option.
Step 2: In the template code find <data:post.body/>
Step 2: Paste following code just below it and save the template.

 
<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 style='margin-bottom:20px' class="fb-share-button" data-type="button_count"></div>

Add Facebook share button below post titles
Step 1: In your blogger dashboard select your blog.
Step 2: Select Template option and click on Edit HTML.
Step 3: In the template code find <data:post.body/>
Step 4: Paste following code just above it and save the template.

 
<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 style='margin-bottom:20px' class="fb-share-button" data-type="button_count"></div>

Add Facebook send button below blogger posts
Step 1: Open your blogger dashboard and select your blog.
Step 2: Select Template option and click on Edit HTML option.
Step 3: In your template code find <data:post.body/>
Step 4: Paste following code just below it and save the template.

 
<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 style='margin-bottom:20px;' class="fb-send" data-colorscheme="light"></div>

Add facebook send button below post titles
Step 1: In your Template code find <data:post.body/>
Step 2: Paste following code just above it and save the template.

 
<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 style='margin-bottom:20px;' class="fb-send" data-colorscheme="light"></div>
Read more »

0 comments
Unknown ●
Labels:

New Style Facebook Comments Box for Blogger

Facebook has recently released many plugins for websites and blogs. Now they have released "Facebook Comment Box". That's awesome to creating comment system on your blogger/blogspot blog. With facebook comments box, Your bloggers user able to comment on your blog posts and those post comment automatically share on their facebook comment wall.

Follow these steps
  1. Login of your Blogger Blog.
  2. Go to Template Section.
  3. Click on Edit HTML.
  4. Click on Format Template.
  5. Press ctrl+F. Now search following code.. <data:post.body/>
  6. Now copy following code and paste below of  <data:post.body/>
<div id='fb-root'/>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
     <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>


Note
  • Replace 500 with your desired width box.
  • Replace 5 how much post you want to display.
  7.Click on Save template.

Done. Now your blogger user able to comment on your favorite blog posts.
Read more »

0 comments
Unknown ●
Labels:

How to add Pure CSS3 Social Icons under Every Post


Today I'm going to teach you how you can add Social Share Icons under Every Post using pure CSS3. Social network site play an very important role in publishing your site among readers. There are many social sites but in here I used most popular networks. These socials icons have a cool effect when mouse pointer in hovered over these icons. These icons are made up of CSS without use of any JavaScript which slows down your page speed. Clicking any icon will share your post in that particular site.

To add this social icons follow below steps
  1. Log in to your blogger dashboard first.
  2. Lick on Template and then on "Edit HTML".
  3. Now press Ctrl + F search for <data:post.body/> code and paste the below given code just below<data:post.body/>.
CSS Codes:

NOTE : There maybe more than one so make sure that you have selected the right code.
After adding the code save the template.

You are done now. Now you and your visitors can see and share your awesome posts with these cool social share icons which has great hover effect.
Read more »

0 comments
Unknown ● Friday, September 26, 2014
Labels: ,

Silver Salmon Button Drop down


Today I am going to teach you a another attractive menu bar. This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.


This is a live example of "Silver Salmon Button Drop down".


To add this navigation bar simply follow below steps. 
  1. Log in to your blogger dashboard.
  2. Then click on "Layout" and then on "Add a Gadget". 
  3. Now select a "HTML/JavaScript" and insert.
  4. Now copy and past below codes and save and then arrange it in an proper place. 
  5. Now you are done and check your menu bar.
CSS Codes:

Remember to insert your menu items like Home, Products and their links.
Read more »

0 comments
Unknown ● Wednesday, September 24, 2014
Labels: ,

Ash Apple Menu With CSS3

This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.

This is a live example of "Ash Apple Menu With CSS3"

To add this navigation bar simply follow below steps. 
  1. Log in to your blogger dashboard 
  2. Then click on "Layout" and then on "Add a Gadget".
  3. Now select a "HTML/JavaScript" and insert.
  4. Now copy and past below codes and save and then arrange it in an proper place. 
  5. Now you are done and check your menu bar.
CSS Codes:

Remember to insert your menu items like Home, Products and their links.
Read more »

1 comments
Unknown ●
Labels: ,

Black Apple Drop Down Menu


This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also

 This is a live example of "Black Apple Drop Down Menu"


 To add this navigation bar simply follow below steps.

  1. Log in to your blogger dashboard
  2. Then click on "Layout" and then on "Add a Gadget"
  3. Now select a "HTML/JavaScript" and insert.
  4. Now copy and past below codes and save and then arrange it in an proper place.
  5. Now you are done and check your menu bar.














CSS Codes:
 
Remember to insert your menu items like Home, Products and their links. 
Read more »

0 comments
Unknown ●
Labels: ,

Animated CSS3 Drop Down


This is a very attractive menu bar which is visitors prone to click on the menu.This is created by using CSS codes so pages will load quickly and help to navigate easily. 

this is a live example of navigation menu which is trying to add.

sdsdsd
CSS Codes:
 
Read more »

0 comments
Unknown ● Tuesday, September 23, 2014
Labels: ,

Light Opera Drop Down Menu


Drop down Navigation menu is an essential part of any blog or website. Alway try to use pure CSS, HTML, CSS3 and images for menus and Don’t uses JQUERY or JavaScript. 

 Follow below steps to insert drop down menu to your blog too.


  1. First of all log in to your blogger dashboard
  2. Then select Layout tab
  3. click on "Add a Gadget" link
  4. Select and insert "HTML/JavaScript" 
This is the live appearance of menu which is going to insert.


CSS Codes:
 
Remember : Change links and menu names to your blog's links and to related menu names
Now save your script and place by dragging to suitable place.

 Now you are done enjoy the menu.
Read more »

0 comments
Unknown ● Monday, September 22, 2014
Subscribe to: Posts (Atom)
Related Posts Plugin for WordPress, Blogger...
 
Amazing Tricks For Blogger © 2012 | Designed by Canvas Art, in collaboration with Business Listings , Radio stations and Corporate Office Headquarters