iMod » Code

Oh, how I love developers

Chris M — Tue, 07 Feb 2012 22:04:41 +0000

Relate to this? ;)

Click to enlarge

PHP check a website’s Twitter mentions

Chris M — Mon, 06 Feb 2012 21:13:20 +0000

I started experimenting with social signals as ranking factors in Search Engines; by social signals I mean the count of mentions a website has on a social network such as Facebook, Twitter, LinkedIn, StumbleUpon, Google+ and so forth. I correlated a lot of metrics using a spreadsheet, which was time consuming so I decided to write a script to do it for me. I am 80% complete with the entire script so I’m not going to publish it all, but rather just a taste of what I’m doing.

The code below, when executed on Apache, will crawl Topsy and return the number of times a chosen website has been mentioned on Twitter. This code needs to be run in conjunction with a form that passes a text field with the domain name, so you may have to code that up quickly or later the code to bypass the domain inclusion.

Here’s the code:

$domain_name = $_POST['domain'];
$domain_name = strtolower(trim($domain_name));

echo "Results for " . $domain_name . ":

";

// build search queries
$topsy_twitter = 'http://topsy.com/s?q='.$domain_name;

// cURL contents of queries
$topsy_twitter_contents = grab_contents($topsy_twitter);

// Find match on Topsy for Twitter
if(preg_match('/Search results 1<\/strong>-10<\/strong> out of (.*?) tweets/sim', $topsy_twitter_contents, $regs)){
$indexed_pages = substr($regs[1], 0, stripos($regs[1], " "));
$indexed_pages = strip_tags(str_replace(",","",$indexed_pages));
echo "Twitter Mentions: " . $indexed_pages;
}else{
echo "Twitter Mentions: 0";
}

function grab_contents($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}

?>

As I mentioned, I’ve adapted this to cover an assortment of social networks and am deciding whether I should compile it into an advanced WordPress Social Metrics Plugin.. watch this space.

iMod

Search Engine alerts plugin for WordPress

Chris M — Sun, 05 Feb 2012 21:25:22 +0000

I wrote some code the other day that I felt was rather useful for people who are either launching a website or testing changes on a website in terms of getting ranked. What I mean by this is that when you launch a new website, you might want to know when Google is going to index your website, or if you’re testing out new things on your website and want to know when Google’s been past to test the changes.

The code is really straight forward, but I wanted to share it anyway in case there’s someone out there who could make use of it or further its development:

$to = ""; // insert receiving email address
$from = ""; // insert sending email address
$body = "";
$bots = array('Googlebot', 'Yahoo', 'MSN'); //add the bots you want

foreach ($bots as $bot)
{
if (eregi($bot, $_SERVER['HTTP_USER_AGENT']))
{
$subject = "BOT DETECTED: " . $_SERVER['HTTP_USER_AGENT'];
if (mail($to, $subject, $body, $from))
{
// nudda
}
}
}
?>

I then took the code and compiled it into a WordPress plugin with a couple options for those people who prefer not to delve around in code. You can download the pluggin by clicking here, simply extract it, upload it to /wp-content/plugins/, activate it and look for the options panel in WordPress to configure your settings.

I used it when launching a website a few weeks ago; the client wanted to know when his website was indexed, so I installed the plugin on the website and had full control over when Google was crawling his site. Needless to say, I was able to alert him almost immediately when his site was indexed – happy client.

There’s a more detailed writeup on the code here, if you’re interested.

Drop me a comment if you use it please!

iMod

CSS Ribbon Menu’s

Chris M — Sun, 05 Feb 2012 11:39:54 +0000

I reckon towards the beginning of 2011 Ribbon Menu’s became really popular and since then I’ve stumbled across hundreds of websites that make use of them. It isn’t always the menu per say, and often used to represent the ul li structures of sidebars, but nevertheless, ribbon’s are popular and this post will assist you.

The combination of CSS3 transitions and CSS2 pseudo-elements will allow you to create an awesome ribbon menu, but please note that IE8 and IE9 don’t support CSS3 transitions so the hover states won’t be animated.

Right, let’s get to it:

First things first, the HTML:

<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>

The next thing we need to do is write some CSS to style the forked ends:

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

Let’s setup the actual link styling:

.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}

And now the animated folds:

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}

.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

And there we have it, an awesome ribbon menu with transition animation!

This tutorial was created by Jack Moore.

iMod

New Developer Tools for Mozilla Firefox

Chris M — Wed, 01 Feb 2012 04:17:29 +0000

For those of you who are developers, and still use Firefox, you’ll be happy to know that Mozilla announced yesterday that they’ve rolled out a new developer too. Mozilla put together a video for all of us to have a look at it:

Some of the features are:

1. More built in tools for real-time editing.
2. Page Inspector allows you to look into a page’s structure.
3. Style Inspector allows for quick and easy style editing.
4. Scratchpad uses Eclipse Orion to give you syntax highlighting
5. A full-screen API for full screen web experiences.

Those aren’t shabby additions and some of them are definitely going to give Chrome’s developer tools a run for their money.

The tools come bundled with Firefox, so you’ll need to update to get them.

Over to you Chrome, let’s see how you come back!

iMod

Ajax simply explained!

Chris M — Mon, 23 Jan 2012 06:00:16 +0000

Just brilliant, click to enlarge!

iMod

Speed up your web design with CSS Refresh

Chris M — Thu, 19 Jan 2012 20:59:25 +0000

If you’ve ever built a website before you’ll more than likely know something about CSS, well at least I hope you do otherwise you might have been using tables ;) Naturally, when you make a change to the CSS files on your website, you need to refresh the browser to see the changes, right? Well, I’ve stumbled across something pretty cool, read on..

CSS Refresh is a really small and unobtrusive JavaScript file that monitors your CSS files, when you make a change, the JavaScript file automatically implements the changes and you need not refresh your browser – think of how much time that could save you! If I had a dollar for every time I’d pressed F5, I’d be writing this from my villa in France!

Getting started is really easy, you just need to follow 3 really easy steps which you find here: http://cssrefresh.frebsite.nl/#how

It’s a really useful little tool, give it a go!

iMod

Add the Google+ button to your blog posts

Chris M — Fri, 09 Dec 2011 18:47:37 +0000

We’ve all got “share on Facebook” or “Like” or “Tweet this” on our blog posts, but I’ve noticed a lot of people who don’t have Google+ share buttons and it’s incredibly easy to add them if you’re using WordPress.

Open up your functions.php file and add the following lines of code at the bottom of the file:

add_filter('the_content', 'wpr_google_plusone');

function wpr_google_plusone($content)

{ $content = $content.'
'; return $content; }

add_action ('wp_enqueue_scripts','wpr_google_plusone_script');

function wpr_google_plusone_script()

{ wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null); }

Save your functions.php file and enjoy allowing people to share your posts on Google+

iMod

Adobe drops mobile Flash, or are they?

Chris M — Sun, 13 Nov 2011 22:01:07 +0000

I’m not sure about you, but I’m really not a Flash fan. Despite our Internet lines getting faster and some incredible animation being possible, I just find that Flash is slow, doesn’t always work and hardly ever renders correctly on mobile devices.

Big news last week involved Adobe informing developers that the development of mobile flash browser plugins would be stopped. In other words, Adobe is dropping mobile Flash support, which means Flash will no longer be geared towards mobile devices. If Steve Jobs were alive, may he RIP, he would be smiling from ear to ear.

Here’s a quote:

“Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates.”

Adobe seems to have changed their focus, initially it was all about stopping flash, but now they’re saying that their development will focus on applications for mobile, expressive content on the desktop and increasing their investments in HTML5 in general.

If you’re interested in reading more information about this directly on the Adobe blog, here’s the link.

iMod

CSS Desk: quick and easy CSS testing

Chris M — Sun, 18 Sep 2011 13:18:24 +0000

I come from a programming background, desktop applications, websites and even some firmware stuff for electronic devices. I love programming, but as a day job it just doesn’t suite me unfortunately. So these days I don’t do too much coding, but from time to time I need to do some web stuff and when it comes to CSS, well, that’s a job for someone else ;)

CSS Desk is a web application I’ve used a number of times as it allows you to test your CSS on the fly instead of saving and refreshing a browser. So, if you need to hack some div structures together and see results quickly, then this application will be of use to you.

I must warn you, this is a great application, but it’s very basic, so I wouldn’t go as far as dealing with transparencies and so forth, and you’ll have to use absolute URLs for certain things, but if it’s something simple, then by all means this application will save you a nice amount of time.

Have you used CSS Desk before?

iMod