background top

Add Sharing to Your Webapps

Written by gavinblair | Posted in Devit! | 3 Comments »
December 11th, 2009

Share via Twitter and Facebook

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

twitter.com/home?status=<Your Tweet>

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 Twitter</a>

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>

Share on Twitter

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.

Prefilled Tweet

Facebook Share Link

facebook.com/sharer.php?u=<Your URL>

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 Facebook</a>

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>

Post to Facebook

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.

Post to Profile - No Thumbnail or Description

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 <img> 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 <img> 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.

Post to Facebook with Thumbnail

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 <head> and </head>:

<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.

Post to Facebook with 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.

bit.ly 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.

gavinblair

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."

New Kiva / Google Maps Mashup

Written by gavinblair | Posted in Devit! | 1 Comment »
July 16th, 2009

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!

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.

faceGavin 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.”
api

gavinblair

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

Written by David Millar | Posted in Devit! | 3 Comments »
May 26th, 2009

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:

  1. Install Apache
    1. Network Domain: it doesn’t matter
    2. Server Name: it doesn’t matter
  2. Unzip PHP into c:\php
  3. Install MySql
  4. Install MySql Tools
  5. Create a folder c:\websites (or call it what you want)
  6. Go to My Computer -> Right Click Properties -> Advanced -> Environment Variables
    1. Select Path -> Click Edit
    2. Add a ;c:\php on the end
  7. Restart your computer!
  8. 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. <Directory "C:\websites"> <– 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
  9. All Done making configuration changes to Apache
  10. Copy the index.html file in htdocs to c:\websites
  11. 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)
  12. 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)
  13. Now that you have Apache working – lets get PHP working so you can start coding with php/mysql
  14. Rename php.ini-distribution to php.ini
  15. Open php.ini
  16. 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
  17. 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"
  18. Restart Apache
  19. Create a file in c:\websites called test.php
  20. Put <?php phpinfo(); ?> in the file and save
  21. Access http://localhost/test.php
  22. 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)
  23. 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.
  24. Happy Coding!

David Millar

Millar, as he is known around the office, is a rock-solid, workhorse coder. If anyone really understands what a chunk of code is doing it’s him. Family, friends, sports, and his wife are the most important things in life to him. He plays sports weekly and golf in the summer when he’s not busy hanging out with friends and family. These days Millar can be found being entertained by his puppy "Stella" who can be best described as a ball of energy and smarts.