How do you make a social network badge?

Question

You see them everywhere. Like the twitter and facebook buttons that show up on blogs and websites that display a number of "tweets" or "likes". All I need to be able to do is display a number from my MySQL database based on two variables (username and an ID). It would probably be useful to encrypt the variables somehow so that users can't just alter the badge's code and display another user's number. But more importantly, I just need to know how to use the HTML code like you find in social network badges and have it talk to a PHP script on my server which will calculate the number from the database based on the variables held within the badge.

Any clue where to start?

Edit: I'm not talking about the kind of badges like you find on stackoverflow, I mean the kind other sites let you paste on your blog/site. Like Digg lets you show that your site has been dugg 7000 times, etc.

Answer 1

You may wish to look up the GD library for PHP and related tutorials. Basically, all those badges consist of is a static image as the template with some dynamic text inserted on top, usually consisting of the username and a number (likes, tweets, etc..).

For the HTML code, you would do something similar to:

<img src="http://www.yourserver.com/yourscript.php?username=miki&amp;id=1337" />

This will send a HTTP GET request to your script, causing it to execute. Your script can then communicate with the database, fetch the user's information, use GD to insert that text into a template and then return that to the browser with the correct mime type and content.

Answer 2

You're talking about calling a remote script, essentially.

I assume you mean something like this - You are viewing your profile on your side. You have a widget that promises to display the total number of points you have, for example. You offer a "code" button like youtube embed or facebook "like" The user clicks this, gets a segment of code and is expected to be able to paste it anywhere on the internet where applicable and the code will generate an icon or something with presumably the username and their points.

First, you can do this several ways. The most cost effective, in my opinion, is to generate the user button on your server on update - like say your points meant "number of thumbs up your articles received" so it will be an interger value. Every time you get a thumbs up, you would re-cache the button and write it into a flat text file. If you're good, you would write it to an image and flatten it to a jpg or gif. If you don't know how to do that, you can write it to html and save the file as a user specific "slug" like md5(username).'.html' - that way every time the server is called, you don't need to pile on bandwidth with redundant queries and account look ups. You only serve the optimized image or html file.

Second - you can give the user an iframe that has the html in it. This is generally how facebook "like" does it for people that don't use the fbml method. Problem is, many sites see iframes as potential xss attack and will strip them out. So, in order to make use of the iframe you would need to have control of the domain, which may defeat the purpose of your request if the intention is to share your profile goodies.

Third, you can call a js file on your server that makes an ajax call to your database and serves the results. This is also most likely going to be seen as xss attack and you should probably not even give it much more thought.

I mentioned the iframe and js methods in case you were looking to provide an option for other people who run their own sites. The way "like" is used by site owners to show how many times their domain has been "liked" and so on. These people have control of domains so the iframe and js methods are logical.

So - This answer may not have much in way of raw code for you, but it should help you start. I would do the image method since it is safer. You would give the user an image tag with their slug in the src attribute. They can paste it anywhere and there is no way to re-write the number within the image. Most forums and places where you can just post to other people's sites allow images. Just do a google search on drawing images with php, as well as using the imagemagick library to merge text and images.