Showing posts with label Facebook. Show all posts
Showing posts with label Facebook. Show all posts

Add Facebook Like Buttons In Blogger

How To Add Facebook Like Button In Blogger?

Follow below steps....
1.open facebook url in first steps shown in fig.
2.Paste your facebook page url which you want to create fb like button.
3.Click on get Code...
add fb like button in blogger id

4.Goto your blogger id.
5.Select layout option.
6.Select Add a Gadget button in shown in fig.
add gadgets in blogger

7.Select HTMP/Javascript option shown in below fig.
select html/javascript option in blogger

8.Paste you iframe Facebook code like shown in fig.
add facebook like button in blogger
html javascript option

9.Save it and you have done...

Add Facebook Comments System In Blogger

How To Get Facebook App ID?

This tutorial divided in some steps you need just follow these steps giving below.

  • First Go to Facebook Developers Page
  • Give you app name as your site title name etc and click on continue button as showing below

  • Now fill security check captcha   and then continue
  • Now you go on a new page here you can see your app id and we need it in next steps


How To Add Facebook Comments In Blogger?

  • First go to Blogger > Template > Edit HTML
  • Now search for <html  and just after it give a space and paste the below code
xmlns:og='http://ogp.me/ns#
  • Now search for <body> tag and just below it paste the following code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
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('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
  • Replace YOUR_APP_ID  with your Facebook Application ID 
  • Now search for </head> and just above it paste the below code
<meta property="fb:app_id" content="YOUR_APP_ID" />
  • Replace YOUR_APP_ID with your Facebook Application ID
  • Now search for  <b:includable id='comment-form' var='post'>  just after it paste the below code
<b:if
cond='data:blog.pageType == "item"'>
    <div
    style='padding:20px 0px 5px 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='550'
            />
        </div>
                </div>
                </b:if>
  • Now click on Save Template button and you are done !
  • Now you have successfully added Facebook Comments System in Blogger for result check preview of your site
If you like our tutorial then please share with your friends and give me your feedback via comments Take Care ! - See more at: http://www.googleagra.com

Facebook Popup (Like Box Widget) for blogger

Here's a fantastic way to increase facebook likes for your blog or website.  Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page.  The facebook widget will show up on your page about 30 seconds after the page loads.  This is a surefire way to dramatically increase your likes.

Add Widget to Your Site

Add the following code anywhere in the body section of your template. Or simply click the "add to blogger" button for blogspot blogs. 

How to Customize

  • Search for href=http://www.facebook.com/googleagra and replace it with your site's facebook page URL.
  • Change the 30 Second Time Delay by searching for the code below and changing the number 30000 to a greater or lesser number.
    1 second = 1000.  10 seconds = 10000. 60 seconds = 60000.

  • By default, the like box widget only shows up the first time the user visits your page.  If you would like the facebook box to popup evertime the page loads, then remove this line of code:

  • Display facebook widget when user visits your homepage: You can do this by surrounding the widget code with these conditional tags below. Go to Template > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag.  Make sure to include the conditional tags below.