Question

Im working for a company who’s website uses javascript to get facebook and twitter info and shows it in the footer. The issue is that it loads javascript APIs from these websites which can seriously slow loading times. The twitter API is used to filter out @replies and retweets. The facebook is a likebox.

If I was making the site from scratch I would import the tweets into a CMS and use PHP to filter out the retweets and @replies. As the html could be cached I think this would be the fastest solution. For the facebook profile pics im not sure if this could be handeld by a CMS so easily.

However the way the website is built there’s no PHP etc that I can use to do this so im looking for a work around.

As twitter has an RSS feed of tweets, I recon I could grab these tweets with javascript, filter @replies and retweets, then insert them onto the page. This is whats currently happening but I could do it without the Twitter API.

Another option is to create a separate site which is a CMS to import the tweets, filter them with PHP, and serve them up as html with appropriate caching for speed. Then I could include this page into the main site’s footer with an iframe. Ive heard bad things about iframes but I know google maps and adverts can be embedded with them and it doesn’t seem to cause any issues if done right.

Are their any issues with these solutions? Has anyone had to solve the same problem with the facebook like box?

Thanks

Answer 1

iframes can solve a lot of issues. Web designers tend to avoid them because they are not scalable an can cause visual issue and accessibility issues for screen readers.

Are you looking to just add a facebook like button without using their API? You can do this by getting an App ID (your company most likely has it) and then writing your link using their query string.

Create a variable that lists the URL and use encodeURIComponent

var FLike=" http://www.facebook.com/dialog/feedredirect_uri=THE_URL&app_id=YOUR_APP_ID&link=THE_URL_YOURE_LINKINGTO&name=TITLE_YOU_WANT_TO_DISPLAY"; document.write(encodeURIComponent(uri));

Then, use a simple JavaScript function to make it a popup (if you want)

function Like() 
{ 
window.open("FLike","Facebook","width=700,height=300,toolbar=0,resizable=0"); 
} 

And have an image (the like button) with an onClick event. This is a good work around if you don’t want to use their like button design as well.