Ruhani Rabin » Development

How to Add Facebook Social Comment Box on any Website or WordPress

Ruhani Rabin — Sun, 19 Jun 2011 16:00:51 +0000

Facebook Social Plugins are a set of plugins that enables social interactions on your website. Not to mention the huge user base Facebook has developed along the time. Previously, it was a pretty much a hassle to go through the Facebook connect implementation for a website. Now with Facebook Social Plugins things are much more simpler to implement and use. Lets take a look how easily we can implement a Facebook Social Comment box for virtually any website that allows HTML and Javascript.

Here are the steps:

Create a Facebook Application for your website. This step is required and all the fields must be filled up.

Site name : Your Site Name
Site URL: http://somewebsite.com/
Locale: English (or your preferred language)
Now you need to fill up a Captcha to confirm creation of the Facebook Application for your site.
Once you click Submit on step 2, you would be able to see the confirmation page with your Application ID and Application Secret. You can modify your existing Applications at My Apps page.
Now go to Facebook Social Comments site. Fill up the URL where you want to put your comment box to. Enter the number of Default comments to be shown and finally enter the width of the comments box.

NOTE: The URL can be a single HTML or Dynamic page too (eg. http://somewhere.com/test.html).
Once you are done with step 4, you can click the Get Code button to get/copy the necessary codes for your site.

.
Create a empty HTML file on your website (eg. index.html). Then paste the code in between and section of the HTML file. Save the file and upload to your server.

NOTE: Your Website APP ID is pasted inside the meta property for facebook underneath the tags.
Open the file you have just created using your browser, you should be able to start posting comments on that page. Yes that’s about it.

I must also say this is just a simple implementation of Facebook Social Comment at your website. There might be more options available for you to implement if you go through the documentation.

How to Implement the Comments Box on WordPress:

Follow the Procedures mentioned on the previous steps and after then
Look for the file comments.php inside your themes folder (the name of the theme depends on which WordPress theme you are using)
Open and edit the file using a text editor. Modify the code you have found on the previous implementation (Which is for using it on a standard website) as below.

NOTE: You need to change the part href=”ID); ?>”
Paste the code into upper part of your comments.php file. Save and Upload it back to your server.
You should be able to see the Facebook Dynamic Comments for all your WordPress posts.

Where do you manage/moderate and administer your comments?

Facebook Comments Moderation Page

Do not post Test comments on this post because it confuses other people who are reading this post.

Eventually your test comments will be blocked and Banned.

Test it on your own site. Thanks.

This article is an upgrade of the previous Facebook Connect Comment Box article for your website.

16 Ultimate Chrome Extensions for Web Designers and Developers

Ruhani Rabin — Sun, 29 May 2011 19:33:15 +0000

There was a time when Firefox was the best choice for the web designers and developers to test and build their site. Firefox is built on to extension framework so the expandability of extensions was pretty wide. Now Chrome is also supporting extensions and that made many developers to move to Chrome for their development, test and design needs.

This topic is the rundown of the Ultimate list of Chrome extensions that a Developer or Designer would love to have.

1. Firebug Lite

Firebug Lite allows you to inspect the HTML, CSS and JavaScript code live in any page, You’re also able to edit the code and test the new changes immediately. It was originally a Firefox extension, and the Chrome version came later.

2. Web Developer

Web Developer Toolbar by Chris Pederick was originally a very popular Firefox extension, but it’s also available for Chrome now. It does a whole lot of things with CSS, HTML, forms, and images. You just click a button in the top-right corner of the browser to view all the options.

3. Chrome Sniffer

Have you ever wondered what technologies, frameworks, and open source apps a website is using? Experienced web developers can find this out by studying the site’s source code, but if you want a more convenient and quick way of doing this, then check out Chrome Sniffer. Chrome Sniffer lists all known JavaScript framework/libraries (jQuery, MooTools, etc.) and CMS (Drupal, WordPress, etc.) that a website uses.

4. Eye Dropper

EyeDropper enables you to identify any color on a website you’re viewing. It comes with a color picker tool that will tell you the pixel’s HTML color code and RGB levels. Once you’ve picked a color you’ll also see where it belongs on the included color wheel.

5. Pendule

Pendule is a pop-up control panel loaded with tasks helpful to designers. Almost similar like the Web Developer Toolbar, it can serve as a all in one extension for web designers. A few of its notable features: a pixel ruler, an eye dropper, a color picker, and several script validators. You can also use it to reload or disable CSS, view JavaScript and hide images.

6. Pixlr Grabber

You can use this extension to select any area of the visible screen — either a custom space or the entire web page — to export to an image file.You can also share the screenshot to Pixlr imm.i or modify it in Pixlr’s editor. It’s a good tool for analyzing your own work or admiring the work of others.

7. Speed Tracer

Speed Tracer records how much time your web app spends on various tasks and tries to figure out where the bottlenecks in performance are. You can use that information to speed up the user experience. The extension can tell you how much time the browser is spending interpreting JavaScript, for example.

8. Lorem Ipsum Generator

This extension is to create random, dummy text on the fly so you can fill out your designs and get a sense for the aesthetics when no copy has been written for the site yet. It just takes a couple clicks, and it’s not complicated at all. It’s a web designers favorite filler, it’s simple, minimalist and isn’t memory hungry.

9. IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome.

10. Aviary Screen Capture

This quick screen capture add-on is a must-have for bloggers and designers alike! It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers and bloggers.

11. Ultimate Chrome Flag

This extension shows a country or region flag indicating the location of the website you’re visiting. And the following information will be shown in the popup:

Country or region name
Domain name and IP address
Geo information
Google PageRank
Alexa Rank
WOT (Web of Trust) information
Copy domain name and IP address to clipboard

On the popup, click domain name, Geo, Alexa Rank or WOT will go to corresponding site to view detailed information of current site.

12. Chrome SEO

The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.

13. Resolution Test

Resolution Test is an extension for testing web pages in different screen resolutions, with an option to define your own custom resolutions. This is very handy in making sure that your web design looks great under different monitor sizes.

14. Quick Markup: Screen capture & Brainstorm

Capture webpage freely or open your local image, mark up with shape, text, icon and mind mapping information, one-click upload to share. Support PNG and shortcuts. Useful in organizing ideas and works, planning and tracking projects, solving the problem of image-based information exchange.

15. jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery commands in the context of the current web page. It’s a great extension for learning and experimenting with jQuery.

16. SEO Site Tools

A well-formed web page with great markup ultimately leads to awesome search engine results. However, if you would like to evaluate your website in terms of known search engine optimization factures, try out the SEO Site Tools, a Chrome extension that gives you a plethora of useful tools and features for evaluating SEO. It can pull tons of on-page and off-page metrics, social media information, and more.

Do you know about an extension that helped you out in your design or development on Google Chrome? Feel free to share with us. Just let me know in the comments section.

Standards of RSS Feed Icon

Ruhani Rabin — Fri, 23 Mar 2007 14:14:54 +0000

By identifying your syndicated content with the standard feed icon, you're helping to…

Eliminate confusion brought on by acronyms.
Break down the international barriers.
Bring feeds to the forefront.

Standardize

Mozilla Foundation recently posted usage guidelines with accompanying FAQ for the feed icon. They've also branded two versions of the icon as being the canonical icons – one that you see here and a smaller 14×14 version that more closely resembles the original Firefox Live Bookmarks icon.

Both icons are now part of the download package offered here.