Categories
Facebook How to Tips

How to clear Facebook Share’s Cache

Facebook share is good, simple, lets us share almost everything on web in seconds. But Facebook caches already shared urls/pages for better performance. This causes issues at time when we update the title, picture being shared or the description of the page because Facebook still shows the older version of the page.

For modifying which image, title and description FB chooses, read this

I will discuss three simple ways to force facebook to go and fetch the latest stuff from the page being shared.

Method 1 :

Facebook treats each url as unique and caches the page based on that url, so if you want to share the latest url the simplest solution is to add a query string with the url being shared. In simple words just add ?v=1 at the end of the url. Any number can be used in place of 1,

This method is fairly simple but it doesn’t retain the share count for this page, as it treats this page as a different url hence the count for this url will be restarted from 0. Plus if someone else shares the original url without the querystring the information will still be the old one.

Method 2:

Using url shortner services like bit.ly. shorten your url form bit.ly and then use the new url for Facebook share. This too is a simple and quite popular method but has the same issues as the first one.

Method 3:

Facebook has a tool called Debugger (formerly known as URL Linter). This tool gives us an idea about how a url will be shared on Facebook, what content, which image will be fetched. Further details about this tool can be found here.

We can use this tool for any url and it fetches the latest title, description, excerpt and other stuff that will be shown while sharing the link. If you use an already shared URL with this tool then Facebook fetches the latest content, and also updates it cache with the latest content.

With this methos the url remains the same hence the share count will persist and the content will be updated. Someone else sharing the url will also see the latest content now. So this method is of course the best.

The Debugger tool can be accessed here.

Found this post helpful? Want to return the favor? Use the button below :)




Categories
CSS How to Tips

CSS Clearfix Best Cross browser solution

Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.

Bad Solution :

<div style="clear:both"></div>

Perfect Cross Browser Solution:

add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-div of-course.

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
	overflow: visible;
}