Showing posts with label box. Show all posts
Showing posts with label box. Show all posts

Saturday, April 30, 2016

How to Add Facebook Like box on Website or Blog


Facebook Like Box by Marks PC Solution


If you have a Facebook fan page or an official Facebook page of your blog or website, then you can place it in your site. Certainly this will ease your interaction with visitors or fans. Another issue you should keep in mind that it is also a part of SEO. Placing a like box may attract visitors to visit your site! 

Earlier I wrote about how to create a pop out like box in your site. And also discussed how to create Facebook fan page. Remember: You must have a fan page to create a Facebook Like Box. If you dont know please read this first: 

How to Create Facebook Fan Page


If youre ready then I can start. Read carefully. 

To add a like box in your website or blog you have to place two codes in two different places. These are as below: 

Code 1: Place this code on your page once, just after the opening <body> tag. If your site already has this code then you dont need to place it again. 

<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>


Code 2: Place this code on your page wherever you want the plugin to appear on your page.
<div class="fb-like-box" data-href="http://www.facebook.com/markstips" data-width="240" data-height="350" data-show-faces="false" data-stream="false" data-header="false"></div>

You know, the second code is the main code. And the first one is just to help the second one. If your HTML has already the first code then you dont need to paste the code again. 



Customization: The Red Parts of Code 2
  • Name: The word markstips should be replaced with your page name.  
  • Width: Current width is 240. You can increase or decrease. 
  • Height: Current height is 350. Change it if necessary. 

Tips: Try to place the second at the footer of your page. It will be helpful to load the site faster. Not only this code, you should place any Java Code at the bottom. If more java codes are placed at the header it will dramatically affect your sites loading time. 



Implementing the Code on Blogger: 

Code 1: Template > Edit HTML > Proceed > Now find <body tag by pressing Ctrl + F > After few lines paste the code from code 1 above > Save. If you placed any code like it earlier then you dont need to paste again. 

Code 2: Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the code from Code 2 above > Save. 


Now view your blog or refresh it. You will be able to see this within few seconds. If the server is down, then the like box may delay to appear on your site. Until then, keep waiting. 



Advice: If you dont think the like box not important for you, or if you think it consumes your site space then you can try this one: Pop Out Facebook Like Box. 

If this code is not working properly, or if you face any problem to implement the code, then try to make the code directly from Facebook Developers. 



Tips for Blogger



Stay with Marks PC Solution to get more interesting IT topics!




Read more »
Posted by at
Labels: , , , , , , , , ,

Friday, April 22, 2016

How to Add a Pop Out Facebook Like Box in Blog or Website







If you wanna add a Pop-Out Facebook Like Box in your website or blog, first you must have a Facebook Page. If you already have it then its OK. But if you dont have it, then create a Facebook Page with your FB account. 

Many websites or blogs have a Facebook Like box in their pages. But adding a Facebook Like box may consume valuable space. As a result, many people are no longer willing to add it. Pop Out  Facebook Like Box may be the solution of this problem. 

Im gonna share a small script with you. By this script you can easily add pop out like box in your site. Just place the below code in the header of your page. I believe this simple code should work for all. 

And if you use this code on blogger then follow the steps below: 
  1. First sign in in your blog and hit on the design button from the top right corner.
  2. Then choose the layout option.
  3. Here youll find several buttons to add a gadget. 
  4. You can choose anyone it doesnt matter. Click on Add a Gadget.
  5. Now youll see a list of gadgets. Choose HTML/ JavaScript. 
  6. Then copy and paste the below code in the content box > Save > Save arrangement.
  7. Now visit your blog and see the result. 

<script
   type="text/javascript"
   src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"
   fbpage=markstips></script>

NB: Replace the red part of the code with your Facebook page name. 

Customization: You cant directly customize this code.
Because this code is just a script. The original code is located in the server. If you wanna customize this code then you must upload the original code in your own server. You can download the code from the links below: 

 1. Code Script. 
2. Image 1 and Image 2. 

 And if you use your own server then replace the script tag with you own server. 
I mean- src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"


Stay with Marks PC Solution to get more interesting topics!




Read more »
Posted by at
Labels: , , , , , , , , , , , ,

Thursday, January 14, 2016

Replace your Traditional Comment Box with DISQUS!


DISQUS PNG Logo


Hi! Start writing after three days. Because I was so busy last few days, and dont get enough time and idea to write about. Today I will talk about how to replace the traditional comment box of blogs or website with a beautiful disqus comment box. 


You might notice many websites or blogs (WordPress, Blogger, Tumbir) doesnt have any traditional comment box. They use comment luv or disqus. Coomment luv is better than disqus but you have to pay for it. But youre getting disqus for free without charge! So why dont try it? 

By the way if you dont like to add any third party comment box then please read the post: Full Tutorial on Blogger Comment Optimization. This will help you to understand how to optimize the traditional blogger comment option. 

DISQUS works with almost any platform: 
  • Blogger
  • WordPress
  • Drupal
  • Tumbir
  • HTML & JS
  • Other Websites/ Blogs


If you wanna implement this comment option in your site first you have to register an account. Sign up here by email and then confirm it. Now do the following:
  1. After sign up, Go the dashboard. 
  2. Now you have to add your site by giving its Name, URL and Shortname and then continue. 
  3. Now you have to go to the Settings option to optimize the comment options.
  4. You can also use the tools option to import your existing comments into Disqus! 
  5. Now you have to find the code. It should be like that- Get this for your site or something like that. 
  6. Then you have to edit your sites template or code. If you are using blogger then please  Backup your Blogger Template avoid any accident so that you can get your existing template back without losing something.
  7. For WordPress site the Disqus have a plugin. You have to just upload a file into your WordPress site. Then it will be automatically added. 

I have another surprise for you! By implementing DISQUS on your site, you can publish Ads too! Go to the Discovery under settings option. There you will find four options. If you choose  any of the first three options other than Just Comments Ads will be place just below the comment box. Thus you can monetize your site too!  


I also implemented disqus on Marks PC Solution. But after using it for few hours I got disappointed. So I removed it. I like Commen Luv. But they have no free service. Comment Luv is really professional. I am gonna miss it! :(


Stay with Marks PC Solution to get more interesting IT topics!




Read more »
Posted by at
Labels: , , , , , ,
Subscribe to: Posts (Atom)