facebook twitter flickr rss

Rewarding Those That Like You (on Facebook) - April 15th, 2012

Facebook Like Button

A client that I have been working for had an interesting request for me a couple weeks ago. He wanted to create a campaign for his Facebook page where an individual would get rewarded with a free music download for liking the page. This was already accomplished from the Facebook page, but I was curious if such a thing could be done directly from a web site, since Facebook’s button is generated through Javascript code.  What I really wanted to do was create a page redirect to this free music download page once the Like button was clicked.  Here are the steps I’ve done to make this work:

  1. Create an new application and get an app id by going here. Get started and follow the steps after clicking “Create New App”.
  2. Generate the Facebook button code by going here. After you’ve entered in the page you are putting the like button on, click on the “Get Code” button.
  3. When the box pops up, I selected “XFBML”. Also make sure to select the application you created in step one next to “This script uses the app ID of your app:”. Follow the steps that Facebook provides. You will need to add “xmlns:fb=”http://ogp.me/ns/fb#” to your <html> tag.
  4. After the first body tag, place the code that Facebook suggests. This is what I placed:
    <body>
    <div id="fb-root"></div>
    <script>
       (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Application ID that was created in the first step";
          fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>


  5. Don’t forget to add the Like button where you want it on the page. This code can be placed anywhere you want to appear on the page:
    <fb:like href="The address of the page the button sits on" send="true" width="450" show_faces="true"></fb:like>

  6. Now that all the Facebook code has been added to the page, you’ll need to add a little bit of code for the redirect. Looking at the script that was placed right before the body tag add these lines as shown in bold:
    <body>
    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
       FB.init({appId: 'Application ID that was created in the first step', status: true, cookie: true,xfbml: true});
       FB.Event.subscribe("edge.create", function(targetUrl) {
         window.location.href = "The address of the page you want to redirect to.";
       });
       FB.Event.subscribe("edge.remove", function(targetUrl) {
         console.log('edge.remove');
       });
    };

    (function(d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Application ID that was created in the first step";
          fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>


Posted in Web Media | No Comments »

Animated Tabbed Menu - October 9th, 2009

Although I’d like to claim it, the animated tabbed menu on the side is a modified version of Gaya Design‘s animated tabbed content script.  He has some really interesting and unique javascript-based solutions to web site funtionality.  I would recommend this guy’s site to anyone that is interested in cutting-edge techniques with jQuery.


Posted in Web Media | 2 Comments »

jPlayer is My New Best Friend - September 21st, 2009

I’ve been looking at alternatives to Flash for loading and playing sound files for a while now. Any iPhone user out there can tell you that they still do not support Flash even though there a lot of reports out there that Apple and Adobe are working towards an agreement. I’m somewhat impatient and want my audio clips to be as available to everyone as I can make them. Even iPhone users.

Unfortunately in my search I found no other real cross-browser solution except for Flash. I did find jPlayer though.

When developing this blog template I chose jQuery from all the other javascript frameworks out there because of its ease of use and flexibility. jPlayer is a plugin written for the jQuery javascript framework. It does use a hidden Flash file to play the music, but is controlled through javascript. Since I was already fairly familiar with jQuery, I went with this option. Also, the real beauty of jPlayer is the ability to easily style the player using HTML and CSS. Although WordPress offers some audio support, I wanted something that followed the look and feel of my site.

After incorporating jPlayer and testing it out on the iPhone, I was stunned. My mp3 files were opening and playing when I hit the play button. It appears jPlayer also detects Flash support, just like the SWFObject library. I’ve searched the site and tried to figure out the reason for this, but haven’t discovered it yet. I thought maybe it used the SWFObject library. If anyone knows, I’m curious.

So, I found a way to play my sound files over the iPhone and all is good in the kingdom. If you’re looking at ways to get your flash video or mp3 files to display on iPhone, I suggest checking out SWFObject. If you’re looking for a good customizable audio player that works with jQuery definitely visit Happyworm’s jPlayer site.


Posted in Web Media | 7 Comments »

Protected: This Time of Year - December 6th, 2008

This content is password protected. To view it please enter your password below:


Posted in Thoughts, Web Media | Enter your password to view comments.

You’ll Never Stop Googling Yourself - December 3rd, 2008

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 United States License.

Is it narcissitic to Google yourself every day? Not that I would be doing such things, but sometimes you have to indulge that attention-craving monster that the wonderful world of blogs, social networking sites, and photo sharing sites have created. One thing in particular that has increased my search rankings is the Creative Commons License. For artists, writers and photographers this could possibly be a good route to pursue when trying to create a presence on the internet.

The Creative Commons license was developed as a way to easily share your work on the internet while providing an alternative to the old copyright model. Think of it as copyright 2.0. With a license you can define who will be able to use your work and how it will be used.

I own a Flickr account and it has been one of best things I have done. It provides a community in to which I can easily share my photography. It also provides a way in which I can easily register my images under the Creative Commons License. Individuals and organizations actually use Flickr quite a bit to gather images and many are searching for photos that fall under this licensing. My images are free for any user to download (even in large size), but when using the images the user must give some credit to me for providing the image. You may think that giving away my photography for free may not be such a great thing. I think of it in terms of a portfolio builder. The good thing about the Creative Commons License is that you can choose how you want to license your images; you can limit your file sizes in Flickr as well. With this you can do it the way you want and reap the rewards.

Here are few sites that are using my imagery:

The Phillyist
Tipr.org
10e20
Michigan in Pictures
idealist.org
National Parks Conservation Association

There are several sites out there that allow you to easily license your images or you can always just embed their tags into your sites, but Flickr is the only one I have used on a regular basis. If anyone else has covered this topic ins other areas, I would be happy to link to your site. Anyway, I found this very useful in making my content more readily available on the web and I hope you might be Googling yourself more to see in what new ways your creations are being used.


Posted in Thoughts, Web Media | 1 Comment »