rtraction - London, Ontario - Web Design, Web Development and Strategic Consulting » php

Add Sharing to Your Webapps

gavinblair — Fri, 11 Dec 2009 22:34:16 +0000

When you post an article of any type on the web, it seems almost mandatory that you include “Tweet This!” and “Post to Facebook” links. Of course, you can get plugins that create sharing links automatically for most blog software (Sociable for Wordpress (this is what we use); Service Links for Drupal; Sexy Social Bookmark for Blogger; I could go on), and they usually cover more networks than Twitter and Facebook. However, some circumstances require a more do-it-yourself approach.

Adding “Share on Twitter” and “Post to Facebook” functionality to your web application is a snap! In this post you will learn:

-How to prefill a tweet for your user
-How to let your users share a link on Facebook, including page thumbnails and description
-How to harness the power of bit.ly’s API for short URLs and click tracking

Share on Twitter

" src="http://www.rtraction.com/blog/wp-content/uploads/2009/12/twitterurl.jpg" alt="twitter.com/home?status=" width="679" height="120" />

Use the following code to create a “Share on Twitter” link:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps - http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Share on Twittera>

Share on Twitter

That was easy! Try replacing your link text with a Twitter button:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps -http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="shareontwitter.png" alt="Share on Twitter" />a>

Twitter can’t make it much easier than that! When the user clicks on your button, they are brought to their familiar Twitter timeline, with the next tweet prefilled for them.

Facebook Share Link

" src="http://www.rtraction.com/blog/wp-content/uploads/2009/12/facebookurl.jpg" alt="facebook.com/sharer.php?u=" width="679" height="120" />

Use the following code to create a “Post to Facebook” link:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Post to Facebooka>

Post to Facebook

Too easy! Now replace the text with a nifty Facebook button:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="posttofacebook.png" alt="Post to Facebook" />a>

When the user clicks on your “Post to Facebook” button, a new window pops up, prompting them to share the link. The user can optionally update their Facebook status while they are at it.

What about Page Thumbnails?

That looks pretty good, but it could use a little more flair. Facebook attempts to add a thumbnail and a description to your link. Facebook scours your page for tags, and uses those for thumbnail options, in the order that they appear on the page. If you want a screenshot of part of your webapp to be the first choice, you’ll have to put the following code near the top (before any other tags) of your page:

<img src="screenshot.jpg" style="display: none" alt="" />

This will not be visible to users due to the inline CSS, but Facebook will pick it up.

What about Page Description?

Facebook uses the page’s meta description. Make sure the following code is present in the header of your page, between and :

<meta name="description" content="rtraction - Add Sharing to Your Webapps - Twitter and Facebook sharing links are a snap to build!" />

Now your Facebook share is complete with a thumbnail and description.

Shortened URLs with Bit.ly

Bit.ly’s API makes it easy to dynamically create shortened URLs. A big advantage of this is that you can make use Bit.ly’s click tracking.

You can learn how to use the Bit.ly API on your own, or use an existing library. There is a DLL file for .NET projects to use Bit.ly. This is untested by us, but the Hashbangcode Bit.ly PHP Class looks like a promising PHP solution. Let us know in the comments if you have tried this library!

If you have any other tips for creating share links, let us know in the comments.

New Kiva / Google Maps Mashup

gavinblair — Thu, 16 Jul 2009 19:42:38 +0000

Since 2006, our team has been supporting Kiva, a person-to-person micro-lending website that lets visitors help alleviate poverty by lending directly to unique entrepreneurs around the globe. It’s a great use of technology to help people, and it inspired me to create this neat little mashup.

Today we’re rolling out the first release of our Kiva/Google Maps mashup: NeedVision!

Similar to KivaWorld, NeedVision shows loans on a world map – but it’s much more! NeedVision allows you to search for available loans based on keywords and/or sector.

What’s more is that we’ve released the source code, so you can see how the Kiva and Google Maps API’s work, and how easy it is to create mashups like this.

Look forward to search caching and a mobile version in the near future!

Bugs? Comments? Feature requests? Put them in the comments below.

Gavin Blair, Developer
As someone who loves to help others, Gavin is not easily ruffled. Poorly designed software is one of his few pet peeves, and we can count on Gavin to find solutions and make improvements in all kinds of applications. In his own words, he likes to “fight the good fight for quality code.” He loves food and finding adventure in the kitchen, cooking with his wife. On one occasion, the combination of a white-hot skillet and no ventilation led to so much smoke they had to stop, drop and roll – but did end up eating “the best blackened catfish po’boy you can imagine.”

Howto Setup PHP (Apache, Mysql) on Windows

David Millar — Tue, 26 May 2009 13:31:41 +0000

First Grab the latest copies of the following:

Apache (MSI with OpenSSL): http://httpd.apache.org/download.cgi
PHP Windows Binary (Zip Package): http://www.php.net/downloads.php
MySql Community Engine (MSI): http://dev.mysql.com/downloads/mysql/5.1.html#win32
MySql Tools (MSI): http://dev.mysql.com/downloads/gui-tools/5.0.html

Once you’ve downloaded the latest files follow these steps below:

Install Apache
1. Network Domain: it doesn’t matter
2. Server Name: it doesn’t matter
Unzip PHP into c:\php
Install MySql
Install MySql Tools
Create a folder c:\websites (or call it what you want)
Go to My Computer -> Right Click Properties -> Advanced -> Environment Variables
1. Select Path -> Click Edit
2. Add a ;c:\php on the end
Restart your computer!
Browse to the Apache Folder (Should be in Program Files\Apache Software Foundation\Apache
1. Go into conf and open httpd.conf
2. Change the following and Save
  1. ServerRoot (Should be set to your Apache folder – nothing should be changed here)
  2. Listen (In the event you want your Apache WebServer to not run at localhost:80 – you can specify a specific ip/port here
  3. In the LoadModule section you might want to enable rewriter_module (not necessary!)
  4. DocumentRoot "C:\websites"
  5. <– This is about ~15lines below the document root (REQUIRED CHANGE)
  6. Under the DirectoryIndex save yourself some time and add index.php after index.html with a space separating them
All Done making configuration changes to Apache
Copy the index.html file in htdocs to c:\websites
Click on the Apache Server Monitor in your TaskBar and restart Apache (if you have any problems check the logs folder in the Apache directory)
Open your Web Browser and Browse to http://localhost – You should see ‘It Works’
1. If this failed to work – check the settings you’ve changed (typo’s will break things) also check the error logs in the apache\logs folder (Post any problems you can’t resolve in the comments)
Now that you have Apache working – lets get PHP working so you can start coding with php/mysql
Rename php.ini-distribution to php.ini
Open php.ini
Change the following and Save
1. max_execution_time (Suggested for development to increase to 60)
2. max_input_time (Suggested for development to increase to 120)
3. memory_limit (Suggested for development to increase to 256M – great for any type of video conversion)
4. error_reporting = E_ALL & ~E_NOTICE (Un-comment this and ensure other error_reporting lines are commented
5. display_errors = On
6. log_errors = On
7. session.save_path = "c:\tmp"
8. post_max_size = 16M (Suggested for development)
9. doc_root = (You can leave this blank)
10. extension_dir = "c:\php\ext" (Required)
11. upload_max_filesize = 16M (Suggested for development)
12. Un-comment the following extensions:
  1. extension=php_curl.dll
  2. extension=php_gd2.dll
  3. extension=php_mbstring.dll
  4. extension=php_mcrypt.dll
  5. extension=php_mssql.dll
  6. extension=php_mysql.dll
  7. extension=php_openssl.dll
13. If you have access to an SMTP server configure SMTP
Re-open the httpd.conf for apache and add the following lines after the end of the LoadModule section
1. LoadModule php5_module "C:/php/php5apache2_2.dll"
2. AddType application/x-httpd-php .php
3. PHPIniDir "C:/php"
Restart Apache
Create a file in c:\websites called test.php
Put in the file and save
Access http://localhost/test.php
You should see a dump of all the information – All the extensions you’ve loaded above should have a section within the information displayed (If you can’t find mysql on the page for example then the .dll did not load properly – Verify your Environment Path variable (restart if you change it) and try again)
Don’t forget to look at your log files if you’re having problems – and if php says it can’t load a module that exists in a specific path then it’s likely an Environment Path issue.
Happy Coding!