Monday, January 14, 2013

How to get the right picture to show in Facebook when you post a link



URL Linter Logo - Facebook DevelopersWhen posting links to Facebook from your blog or website it can sometimes be frustrating that the wrong pictures get displayed next to your link. This is partially because Facebook has an old version of your site cached in their que and is pulling older pictures.
There’s a great tool called Facebook URL Linter that helps fix this problem.
1. First, post your new content to your website, including any pictures you want included in the Facebook link. If you’re blogging, this may be a picture in your new blog post.
2. Visit Facebook Linter at http://developers.facebook.com/tools/lint and enter your URL. Again, if you’re blogging, be sure to enter the specific URL for that post.
URL Linter - Facebook Developers
3. Facebook URL Linter will spin its wheels for a few seconds and a new version of your site will be indexed in their cache.
URL Linter Complete - Facebook Developers
4. Post an update to your Facebook Wall and the new picture thumbnail should be available to choose from!
New Site Media Group Facebook Update

WordPress Plugin for Facebook Link Image Control

If your site is a self hosted version of WordPress like mine, you should also install this plugin: Add Facebook Share Thumbnail + Meta
This plugin allow you to specify some of the meta data and image information from your post that Facebook needs … very handy!
Many themes have the problem that they do not generate an appropriate thumbnail with according meta tag in your page head for use with Facebook’s “Share” function. So if someone pushes the share button on one of your posts or pages the suggested image would be everything but your post thumbnail.
There are some rules to follow for preventing this, and this plugin takes care of them!

Manually Control how Facebook Interprets Links

The most direct method of controlling the image Facebook scrapes from your site with posting a link is to use the Open Graphs tags.
Here is a quote from Facebook:
Open Graph tags are  tags that you add to the  of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
If you use Open Graph tags, the following six are required:
  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graph types.
  • og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name - A human-readable name for your site, e.g., “IMDb”.
  • fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
Check out Facebook’s Open Graph Protocol for more information.
I’ve implemented the manual approach in several cases with success.
Hope that helps!

thanks to : http://www.steinarknutsen.com/how-to-get-the-right-picture-to-show-up-in-facebook-when-you-post-a-link/

Monday, September 10, 2012

Powerful and useful CSS Framework with examples and tutorials

the powerful CSS Frameworks will help you to design adaptive Responsive Web Design , these tutorial and examples will guide you to design your site fullt optimized for desktop , tablet , mobile and print
In today’s post we present an overview of the 5 most popular CSS Frameworks;showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.
5 Popular CSS Frameworks + Tutorials & Tools for Getting Started
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.
Tutorials Explaining how to use 960 CSS Framework
  • A Detailed Look at the 960 CSS Framework
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.
  • 960 CSS Framework – Learn the Basics
    Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.
  • Fluid 960 Grid System
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

2. BLUEPRINT CSS FRAMEWORK

Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.
There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.
Tutorials Explaining how to use Blueprint CSS Framework and tools using it
  • BlueprintCSS 101
    Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.
  • A Closer Look At the Blueprint CSS Framework
    In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.
  • Blueprint CSS Cheat Sheet
  • Blueprint Grid CSS Generator
    This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.
  • PXtoEM
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.
  • Construct
    Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. THE JQUERY UI CSS FRAMEWORK

Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
4. YAML
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.
YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.
  • Flexible Layouts with YAML
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.
5. Yahoo YUI Grids CSS
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.
The YUI Grids Builder — a simple interface for Grids customization.
Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet
  • Intricate Fluid Layouts in Three Easy Steps
    This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.
  • YUI CSS Grids: awesome, but useless?
    Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””

WORTH CHECKING CSS FRAMEWORKS

typogridphy
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.
SenCSs
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.
A CSS Framework
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.
Tripoli
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.
BlueTrip CSS Framework
A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons.
Emastic
WYMstyle
Elements
Malo
LogicCSS

Sunday, July 15, 2012

Powerful and Best Tools to check your WebSite WebPage Performance

There are many online performance check service providers out there. all are providing Free web-based service that is great to hear , just see what they do. most of their services are similar and simpler that checking page loading speed , each images,html, css and js files loading time, they are advising and suggesting to improve the files and images once they complete the loading time checking. its a good point for all developers that they can improve their site even more and easy loadable. its good enough for web developing service provider to deliver good and best web pages. here we go for the List of Useful Tools.

Analyze and optimize your website with PageSpeed tools to implement the web performance best practices.
Fast and optimized pages lead to higher visitor engagement, retention, and conversions. The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.




2.YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights:


Google Chrome Store : https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh?utm_source=chrome-ntp-icon



3.Neustar Web Performance 

Traditional load testing is done inside the firewall. But many of today's applications are found externally—ad servers, news tickers or Web analytics engines. That's why Neustar takes your customer's perspective and tests from the inside out. It's the best way to see if your website is ready for peak usage.


Link ; https://browsermob.com/free-website-performance-test/



4.WebPageTest.org

Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Inline image 5

Link : http://www.webpagetest.org/


5.GTmetrix

GTmetrix can help you develop a faster, more efficient, and all-around improved website experience for your users.


Link : http://gtmetrix.com/


6.

We built this Full Page Test tool to help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you're not following, and so on. We have tried to make it useful both to experts and novices alike.

In short, we wanted it to be a free, easy-to-use tool to help webmasters and web developers everywhere optimize the performance of their websites.


Link : http://tools.pingdom.com/fpt/


7.site-perf.com

With Site-Perf.com, you get an accuraterealistic, and helpfulestimation of your site's loading speed. The script fully emulatesnatural browser behaviour downloading your page with all the images, CSS, JS and other files – just like a regular user. Spot bottlenecks, reach perfect performance and balance your site load with Site-Perf.com, a smart and flexible testing tool. Focus on important things while Site-Perf.com delivers the speed facts straight to your screen. Try it right now!

 


Link  : http://site-perf.com/


8. 

The page analyzer analyzes your web page performance by emulating how a web browser would load your page and all resources referenced in it. The page and the referenced resources are loaded and important performance metrics are measured and displayed in a waterfall diagram along with other per-resource attributes such as URL, size, compression ratio and HTTP status code. Each load time bar has parts of different color corresponding to a performance metric:




Link : http://loadimpact.com/


These are the most wanted tools that giving you useful result and ideas to improve your website to perform well.... hope this help you guys and your comments are welcome...

Monday, July 9, 2012

You do not have sufficient permissions to access this page : WordPress Error Fixed.

You do not have sufficient permissions to access this page : WordPress Error Fixed.

We have faced some issues with WordPress , here is another one and we fixed it, usually admin user or some other WordPress user will face this error (in this case) when they try to login . its a user role permissions , we can modify this in WordPress (wp-admin ) admin.php file .

 

be careful be alert . backup your WordPress database before modifications 

You do not have sufficient permissions to access this page

You do not have sufficient permissions to access this page

 

if your table prefix is different , you should follow your table prefix here  eg table_options means your row96 should be table_user_roles .

we faced this issue and we solved like this , may be you can try this out and update us. usually we faced this issue when we change the user values or change the table prefix .. be careful be alert . backup your WordPress database before modifications