Display Facebook events feed on website

Share |

Display Facebook events feed on website - From events created from profile, not the Fan Page

Many wordpress plugins at this point in writing did not seem to offer a solution to me. What I am trying to do here is to simply pull out a Facebook event feed and display them on my wordpress page. Meaning event feeds from Facebook with URL format http://facebook.com/events/123456789123456/ for example.

Many implementations out there work for events created from page events instead, those of URL format https://www.facebook.com/pages/Page-Name/123456789123456?sk=events
(A another version on my issue here: http://www.codeproject.com/Questions/348664/Trouble-with-embedding-facebook-events-on-wordpres)

I tried wordpress plugins like facebook-feed-grabber.0.6.zip and jsl3-facebook-wall-feed.1.3.1.zip but they did not do what I needed simply, which is NOT get feeds from Fan Page events.

My PHP implementation here:
1. Have a Facebook app ready for this (https://developers.facebook.com/apps)
2. Get a copy of the Facebook php sdk and put it in your desired folder (https://github.com/facebook/facebook-php-sdk)
3. Create a php file with these few lines below which will allow you to get the feed from your Facebook public event:

<?php 
require 'fb-sdk/src/facebook.php';
$facebook = new Facebook(array(
    'appId'  => 'REPLACE-WITH-FACEBOOK-APP-ID',
    'secret' => 'REPLACE-WITH-FACEBOOK-APP-SECRET',
));
$pageFeed = $facebook->api('REPLACE-WITH-FACEBOOK-EVENT-ID' . '/feed');
?>


(FACEBOOK-EVENT-ID will be 123 if your event url is http://facebook.com/events/123/ )

4. The $pageFeed is an array containing all your event feed details. You can then for example get your first event name with $pageFeed[data][0][name].

5. You can then manipulate this array as you wish and decorate it with some nice CSS styling

6. Finally, if you are using wordpress, you can use the iframe html tag to include this new php file into your wordpress page.

Captured details from Facebook public event

Images not showing in WP-carousel

Share |

Images Are NOT displaying in WP-carousel with Customized Content


I was looking for a simple but elegant image slider in wordpress, and WP-carousel seemed just the right fit for my needs. Simple, elegant, but customizable. I installed and activated this plugin with good hope, but alas I just could not get any image to display in my slider with the Customized Content Item. Whats happening here? Desperately searching in the settings yielded no result.

Adding Customized Content feature - SHOW IMAGES!

Its frustrating when you can't get what seems to be a great plugin to work, and just as frustrating when you finally find out the 'great' solution. As in the image above, when adding images, make the Video URL field BLANK (Can't over-emphasize it).

Leaving the default "http://" is a big no-no. Then will the images show up in the slider... oops...

Small issue, but quite an irritation to the first time user I should say. I definitely vote for this to be changed in their next release. WP-carousel do you hear me?

Found on: WP-carousel 1.1

Repair Mac OS X without installation DVD

Share |

Disk Utility - Repair Mac OS X without CD Drive / DVD

Because I frequently dual boot between Windows XP and my Mac OS, there comes a time when my Mac OS gets corrupted as well (there's no hard proof that dual boot causes this, but I would like to believe so since I have cross OS read/write operations on both).

Very well, start Disk Utility and uh oh, "repair" disk option is not available. I restart, and worse, the Mac OS startup screen just gets stuck at the circle animated wheel forever. Ok, I don't panic, went to do some searching on another pc, and tried starting Mac OS X with the "shift" keyboard button pressed down (this is said to run the "repair" disk option). Still no luck.

I CAN'T find my Mac OS installer DVDs.... I cannot run Disk Utility off it no matter how much it wants me so.

Mac OS had it all along. We just need to get into some command line stuff, and you thought Mac OS did not have this unglamorous side.

1. Restart your Mac and get into Single user mode by holding down Apple key+S all the way through the boot-up till you see the ugly black screen with text
2. After everything finishes loading, type in fsck -yf    (fsck stands for file system check). Remember to press enter after typing that of course.
3. Allow it to run and hopefully, you finally get to see the "Disk X appears to be OK." message.
4. Lastly, type "Reboot" to restart back into Mac OS X

Convert FAT32 to NTFS in MAC without WINDOWS

Share |

How to convert external/internal FAT32 drive partition to NTFS with only a MAC

Long story:
Yes its the all not missed 5 year glitch with the hard disk and its all crashing down on you. Now its time to get my Mac OS back up and running which is the easy part (as usual). It is when you want the windows part as well which is the show stopper. Not sure what your unique case is but for me, I needed to switch my FAT32 partition to NTFS, and I did not have any windows installed with bootcamp to use the DOS command line. My cd-drive was faulty, so I could not use my Installer CD either, and I did not want the trouble of removing my drive physically just to bring it to a PC. Many searches online tell you to use Disk Utility in mac, but I CAN'T find that bl**dy NTFS partitioning option. Are they lying? No 3rd party commercial apps for me either.

Disk Utility with NTFS support

Long story short:
1. Download NTFS support, install, restart: http://www.tuxera.com/mac/ntfs-3g-2009.11.14u1-mac_2009-12-07_170539.dmg

2. Open Disk Utility (in mac of course), and *tada* you will now see the option to partition your drive in NTFS format

On a side note: I also recommend WinClone to conveniently archive a clone of your windows partition, makes it easy to backup and restore without re-installing and setup every time.

Note: Against user feedback on this post, I should point out that I was performing this on a fresh windows installation, so any existing windows data will be lost.

Hello fellow readers,

I have noticed a sustained number of users (in terms of 3 figures) every consecutive month on this post. I am quite curious as to the actual reasons behind you searching for and landing on this post. And more importantly, if i can provide better or more useful information to you.

Do help with a short 3 question survey on how I can better help, or you could provide some feedback.

Link to short survey on my website.
All information captured is strictly anonymous and confidential.

 

Limit file upload according to file type extension with Regular Expressions

Share |

Yes its been a while since my last post. A day job keeps people busy. But nothing keeps me far from the web. The last time I saw some gibberish: /.+$/i 
What the... and its hard to search for too if you don't know that its called Regular Expressions (Doesn't seem all that very regular to me).


So, I was trying to allow users to do a file upload, but yet only restrict them to certain files types. Searching along the correct keywords and doing some quick learning did reveal some tricks. I do not seek to repeat the meaning of every expression here, this can be found easily. Rather, I will highlight a few pointers for those unacquainted.

Basically its a syntax, and the purpose is to do string matching. The combination of characters that you see in the gibberish above are actually rules to when tested upon your string of concern, results in a successful match, or a mismatch.

In the end, you realize that certain keyboard characters like full-stop (.) and the dollar sign ($) each represent a special meaning.

The full-stop: (Matches any single character except line break characters \r and \n. )
The dollar-sign after the full-stop: (.$ will return you a match for the last character in the string, and  ..$ will return you the last 2 characters in the string.)
The backslash: (If you want to actually test for a match of those special characters in your expression itself, and not use them programmatically. Used to escape those characters.)

I know it can seem confusing, but you can easily try it out here http://www.regular-expressions.info/javascriptexample.html for practice.

Finally for myself, I ended up with /\.wav\b|\.aif\b/


The \ escapes the full-stop that I want to match in my expression, and the \b means that I want a match of .wav file extension type at the word boundary of my file name (Assuming file name cannot be .wavRestOfFilename or .aifRestOfFilename). The | means a logical OR, either the left or right expression is accepted.

Therefore, I end up only matching files that end with file extension type of only  .wav or .aif.

Tada!


Quick links:
http://www.regular-expressions.info/reference.html
http://www.roblocher.com/technotes/regexp.aspx

Facebook gives Adobe Flash Player error message

Share |

Facebook gives error Flash message when sharing website link

I was getting pretty frustrated this time. After adding some new features to my client's site, Facebook started giving me this error flash message which was not there before. And it did not make sense because I already had an existing flash component on the site when it worked well.

Adobe Flash error when sharing link on Facebook

The most ridiculous thing was finding out that removing every single flash component on the site did not seem to improve anything. Until after some hair pulling and intensive searching, I finally found just the answer I needed.

Taking a lead from another site, I outline the steps below (which you can add to your home page):

This changes the Title that appears when you share the link:

<meta name="title" content="Title of Article Here" />

This changes the description:

<meta name="description" content="Description of article here" />

And this links to an image of your choice:

<link rel="image_src" type="image/jpeg" href="http://www.yourdomain.com/image/path.jpg"/>

The important bit that causes many people frustration comes here, because you have to proceed on to a Facebook tool called Lint, AFTER you make your above edits. This is to update Facebook's cache about your changes. Otherwise, it won't be reflected and you will end up pulling out hair like me.

Additional Links: 
Html special characters to place in your description. Eg Open and close quotes "".
Facebook Lint Tool
Facebook discussion thread on the thumbnail image when sharing

Add Addthis buttons Above, Not After each blogger/blogspot post

Share |

Add Addthis toolbar Above or before of each blogger post, not at the tail end!

*This post assumes you already have a blog on blogger.

Everyone is adding these social sharing toolbars these days, and what we shall look at here today is not whether their effects are useful, but rather its implementation.

Add blogger widget feature, but not what we want here.

Addthis.com has thoughtfully allowed us to conveniently add its toolbar as a blogger widget. After trying it out however, I realized that it uses javascript. And it puts the Addthis toolbar to AFTER every blog post automatically. But I wanted it BEFORE. After playing around, it seemed rather hard to massage into place, so I thought heck, lets start from scratch.


Steps to put Addthis where it belongs (at the start of every blogpost):
1. This time, select the "Website" option instead of the "Blogger" option from the Addthis website.

Select the "Website" option instead.

2. Copy the code from the right textbox.
3. Login into your blogger account and enter the desired blog's Design->Edit Html tab.
4. Remember to save a template backup if necessary.
5. Click Expand Widget Templates to reveal the full code.
6. Now search for the lines <div class='post-body entry-content'> and  <data:post.body/>
7. We want to stick the copied Addthis code in BETWEEN these 2 lines.
8. Click Preview or go ahead and Save Template if you are feeling confident today.

We are good to go once again.

Remember to click "Expand Widget Templates"

XGRCXDMVTM54