Tag Archives: Facebook

Facebook Social Plugins

So I was doing something for work the other day where I was incorporating some Facebook social plugins. They wanted the Facepile, the Like button, the Activity Feed. All are very easy to implement. They do not require any type of Application for the generic install of the plugin. Facebook makes it even easier for one to add these because on the site, they provide a very nice interface to enter all the data in, and get the code. Those links are below:
Facepile – http://developers.facebook.com/docs/reference/plugins/facepile/
Like Button – http://developers.facebook.com/docs/reference/plugins/like/
Activity Feed – http://developers.facebook.com/docs/reference/plugins/activity/

Each item listed above is easy to integrate, and can be extended in its own way. if all you need is a quick implementation of this, then just go to the Facebook site, enter the data, grab the code and paste on the site. And you are done. Each item is a little different in how you can modify the plugin. A couple of examples I have created are found at:

Really quick overview of the three:
This one does not have a lot of other options available. This will show only your friends who have liked the same page/URL. It will not show all people, only your friends. If you do have an Application registered to Facebook, then you can enter the application ID to show who has connected to the application. The same principles apply, but the message displayed is a little different: “Friend Y has connected to Application Z”.

Like Button
This is the button, not the box, where you can have the Like or Recommend displayed. The nice thing about this button is that it can also be localized by passing the proper language locale set in the code.

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/Hirdweb/140356864345" layout="button_count" show_faces="true" width="450" action="recommend" font=""></fb:like>

And from my own experience, only one language can be displayed on the page. In the example, I created iframes for each button using the XFBML on each page. And to maximize the effectiveness of the Like button, make sure to complete the Open Graph Tags to help tag the site. In my example, all are pointing to the Hirdweb Facebook Page. Using the Open Graph will also help when the user shares the page, add comments when they like the page, etc. It can also help to grab data on the page, and make sure to read up on the Open Graph API.

Using the XFBML you can also do some other items when a user clicks the button, using the JS API. In my example, I am just using as very simple pop up alert box. To do this, you must be using the Javascript SDK/XFBML implementation of the Like button. This is captured by the Event.subscribe method, passing the param of edge.create.

FB.Event.subscribe('edge.create', function(response) {
  // do something now that they like the page
  alert("Thank You for liking this page"); 

Activity Box
Much like the Facepile, this one is easy to implement, using XFBML or iframe. Like all other social plugins, this one can be modified for the locale if you add the correct language locale in the code.

script src="http://connect.facebook.net/sv_SE/all.js#xfbml=1"

. This plugin also has the ability to track what plugin generated the activity on your site. By adding the ref variable in the FB tag, it will track this.

And just in case you forgot, here is the link to the examples:

Thinking of the site

So as I am sitting here trying to get caught up on the StephenHird site, I am thinking a little more about it. It seems like it is just a huge issue right now and am not able to complete what I really want to complete on the site. So I may make an executive decision to abandon the code (not destroy it, but abandon it and store it safely if I want to use it again), start over from scratch, again using CakePHP, and the Facebook Graph API. This would be a little less intense, and would contain an easier example of how to get some data out there, and still include the Graph API in order to show examples of how to do this.

I still think the idea of the resume integrated with the API is a good one to show an example, but I am finding myself with less time to do a full blown app for it. And I figure, if I do a small example, that should be enough, and there is always the documentation available at Facebook for this. So if you have been following the Graph API integration, it still will happen, just in a different form.

Facebook and Personal Data

As I was perusing the web, one of my favorites spots is Mashable. They had an article titled “Facebook Will Continue To Share User Addresses & Numbers“. The article covers the announcement on January 14th, and the follow up on January 18, by Facebook that they will now allow 3rd party applications to access contact information like cell numbers, addresses, etc. Following an uproar by certain groups, and some Congressional leaders, Facebook has put this enhancement on hold, but not killed it. As part of the response, Facebook has even made their own privacy policy more user friendly and understandable by the non lawyer people. This has not stopped certain groups from decrying this and claiming that Facebook is not protecting privacy of its users.

I beg to differ. Facebook is providing a free service to half a billion people. This service has provided a valuable avenue for businesses, entertainment and non profits, among others. But nowhere in any part of this did I ever read that people are forced to share their information. It is about some common sense when going about browsing on the web, whether it is on a social network or not. If you do not want to have applications know your address or cell phone, then do not put it out there for them to grab. When a 3rd party application is asking to use your Facebook account to connect, you do not need to share your data. Never rely on other applications to protect your data.

And on the flip side of this, the 3rd parties building a Facebook engaged site/application, be open and upfront about what information they are wanting to collect and why. Establishing a good bond and trust with the consumer base is huge. And if you want to access their Facebook data, then let them know what you are going to collect and why you are going to collect it. Usually it is not a huge deal, and many people will allow it. Obviously if you are phishing their data to sell the contact information to telemarketers and other mail marketing streams, then you will not be allowed to have your Facebook application for long. 3rd party application builders have to live by certain standards established by Facebook. So if you want to build one of these applications, then follow the rules, and remember the customer.

After reading this article on Mashable, I can see why people may be concerned, but I think it is a hollow concern. Be aware of what you are doing, do not enter your contact information if you do not want to share it, and just use common sense. If someone really wants to get your address and cell phone number, it is really not that hard to get it.

Adding Comments in your Site with the Facebook API

Now that I have jumped almost 2 weeks without a post, as I have been super busy, this should have been a real easy item to post, but I wanted to make sure that this is done correctly. This is probably one of the easiest methods to add some great Facebook functionality in your site. This revolves around comments to a page. In my example, I am posting topics to discuss. This is mainly just a small little blurb that I will enter via an admin form on the site, and then list the different topics for everyone to select one. Once they select it, they can view the details of the topic and then comment on it using the Facebook API/Social plugin. So as always, lets go through a basic plan for this idea.

1. The model is Topic, with a table in the DB labeled “topics”
2. Only the admin has access to add or edit the topics
3. All comments on this topic will be done through the Facebook API/Social Plugin Comments
4. Topics will have a title that will also double as the Unique ID (to be explained later)
5. Topic titles, or themes, will not be allowed to be edited, to be explained why later
6. Administration of the comments will be done by the Facebook Application admins, which differs from the site admins
7. Start Dates will determine if the topic is allowed to be visible yet
8. End dates are optional, and will be built upon later with more advanced FBML/FB JS libraries

And there it is, some basic ideas behind the whole idea. So now lets get into some of the items called out in Numbers 4 and 5
Continue reading Adding Comments in your Site with the Facebook API

Facebook Application on the Site

OK, I finally got my data models set up and working. I have the initial CakePHP set up on the site, it is using v1.3, and now I am ready to set it up for the Facebook integration, and start to add the integration. When we first set up the application on the Facebook side, I chose to do an “iframe” version of the application, as I want Facebook on my site, and be able to have integration with some of the great Facebook tools on the site, and be able to “promote me”. And remember this is just a way to show a possible real world example of how to integrate these things with your site. Actual applications may vary, but this is the base to integrate. At least, as of this posting it is the base, it may change in the future.

So lets go ahead and dive into it. If you do not have the application ID for your Facebook application, you can get it at the following:

The next thing is to grab the API and code from Facebook. This can be found at the following page:

This is the main page, and you will need to scroll to the bottom of the page. This will list different APIs that are available. I am going to be using the PHP and JavaScript SDKs. This will provide the back end that I will want, and will also provide a positive user experience on the front end. So be sure to download both SDKs.

After that, now we need to start getting some stuff set up. In this post, I am just going to explain how to get this set up, and working right now. It is important that we get the correct items working, and so we will be working with the “pages” area for the JS SDK, and creating a very simple controller for the PHP SDK so we can get set up and running. I am just using, for right now, the base CakePHP CSS styles and layouts. All we need is a page to display some of the basic items to ensure that we have installed the SDKs in the proper locations. So lets go.
Continue reading Facebook Application on the Site

Facebook Integration Initial Steps

The next few posts will examine how I will integrate a Facebook application into one of my sites: stephenhird.com. If you have browsed to this site, you will see there is already a Facebook platform there. And while it does show some of the great things to do with the API, it is very basic and really does nothing. So In this post I will examine what I want to do with it, how to set up an initial application on Facebook, and then go from there. This will likely happen over the next few weeks/months and will be a little more drawn out depending on how much time I have to document this process. This is step one, and step one will always include planning.

First I need to figure out what I want to have on my site. Since it is my name that is on the URL, I will need to create a way that this site will be an online portfolio, biography and information repository. When doing this for any site, it is important to remember your brand. Even for individual sites like this, it is important for branding, because this is who I am, I do not want it to be a classic case of slop on the web. This site before was mainly just a testing ground and now will need to be more.

A side note here, my name is the same spelling as a famous photographer based in London. His site is well put together with good descriptive links and a great example of combining minimalist ideas with styled presentation. He keeps his brand on the pages and the site does not confuse or mislead with extra peripheral items, or overuse of Flash or other heavy web technologies loading down the page. His site is located at: http://www.stephenhird.co.uk/

OK, now on to the planning and setting up the Facebook Application.
Continue reading Facebook Integration Initial Steps