How to Make a WordPress Alexa Widget

Of the zillion WordPress plugins available, it baffles me that there’s nothing developed to replace the incredibly crappy looking Alexa Rank widget that is offered directly through Alexa.

Alexa RankTake a look at this ugly thing. Alexa seems intent on hanging on to those stylistically challenged colors and that 1990s font.  Even if you’re proud of your rank, this design encourages you to never brag about it on your site.

I have a couple money sites that are in the top 400,000 Alexa websites.  That’s not too shabby and I’m getting between 5,000 – 10,000 visits a month on each website.  Those aren’t huge numbers, but the sites are making me some extra money so I’m not complaining.

As such, I would like to display my Alexa rank on the websites.  The value?  People tend to spend more time on websites that look to be frequently visited.  Websites are like skating rinks in that way.

Alexa ranks all websites on the internet and the lower your number, the better your rank.  In our example above, “The Onion” is considered to be the 2,690th most popular site on the web, with over 28,000 other sites linking to it.

Alexa RankHere’s my Alexa design and if you view my sidebar to the right, you’ll see my new Alexa widget in action.  Now my minimalist design mentality would never allow me to come up with a mind-blowing design, but the point is that you can use any design you like with this method, so make your new form and use the following code to create your own unique look.  If you like my design, or you’re just feeling somewhat lazy, feel free to use my concept.

Here’s how to create your own WordPress widget for Alexa, using your own design and pulling their rank in.  This could easily be turned into an Alexa WordPress plugin, but since this is such a simple method, I don’t really see the point.

Making the Widget

First, you’ll  need to execute php code in your widget, so download and install the “PHP Code Widget” (if you do a search for that from your plugin page, it should be the first result).

Next up, we’ll employ a method of scraping that I use quite often for simple tasks as well as creating entire websites.

Go to your widget section and drag the new PHP Code Widget over to your sidebar.

Insert the following code and change YOURDOMAINNAME.com (line 2) to your domain name (example:  jeffkastner.com).

All we’re doing is a simple screen scrape of the Alexa page, putting it into memory (a variable called $thecontents) and then using the php preg_match function to only grab the portion we need (the actual Alexa rank number in this case).

We then bring our form in (everything between the paragraph tags <p> and </p>), style it appropriately and insert the number (now contained in $alexarank) with the “echo” command.

You’ll likely need to play with the style elements between the paragraph tags, to get the number displaying exactly where you need it on your site, since my website will have different style rules.

That’s it!  You now have your own custom created Alexa WordPress widget… and you learned how to grab any element you need, on any webpage, for future projects.

Enjoy.

3 Comments

  1. Thanks for the code. That’s a great trick! I’ve always wondered how someone scrapes a page. It is much easier than I had realized!

Submit a comment

CommentLuv badge

reverse phone lookupTattoo DesignsSEO
My New Amazon Script Is Close!
A new php script for sale is coming!
Sign up to get notified

..