 | This article is a part of my series on |
 |
Facebook Developers were gifted the new Graph API recently. With this, came the all new documentation. Everything was restructured and many people were left confused. Even I had a little tough time figuring out few things. Then I found Social Plugins section. Social Plugins enables Facebook Users interact with content on your site like Sharing it, Liking it etc. Some of these plugins also enable you to show the interaction that facebook users are having across web.
Following Social Plugins are currently supported by Facebook…
Activity Feed (Recent Activity)
http://developers.facebook.com/docs/reference/plugins/activity
| If you are using Social Plugins on your website, you would like to show what others are doing there. So Activity Feed is basically what all people did on your site (not facebook) and this information can be shown on any site or blog. For Example, you have an article on your site, which is having a “LIKE” or a “SHARE” button. | |
| So whenever someone shares it on Facebook, or likes it on your site, it will be recorded as an Activity and shown in this box. Currently, if you are logged in, you will see something in box above, but if you are not logged in, you will find a ‘login’ button. | |
Facebook provides following settings for this Plugin
| Domain | This is the domain to show activity for. In XFBML, it defaults to the domain the plugin is on. |
| Width | Width of the control (in pixels) |
| Height | Height of the control (in pixels) |
| Header | It specifies whether to show the Facebook Header on Plugin or not. (In sample above, the ‘Recent Activity’ title is the Header) |
| Color Scheme | Facebook offers two color schemes. Light and Dark. Light is the default blue scheme of FB and Dark is the new Black scheme. (In sample above, I used the dark scheme) |
| Font | A wide choice of fonts, that facebook supports are listed here. You can pick one as per your site’s style |
| Border Color | This is the optional border color of plugin. You can specify color in RGB format (prefixed by pound sign #) or the web safe color names (like RED, WHITE etc.) |
There are two ways, in which we can include the plugin. One is IFRAME (like I used in example), and other is FBJS/XFBML.
Like Button
http://developers.facebook.com/docs/reference/plugins/like
Like button is probably the most common thing asked by most of the clients when they demand something on facebook or related to facebook. The updated Like button has some new features like images of friends, who liked your site and look n’ feel customizations. Note that when we say images of friends, it means that it will show the pics of all those people who are friend of person who is currently viewing the web page and who have liked this web page. So the person viewing the page must be logged into system so images can appear. Otherwise, a simple Like button will come and if user clicks it, s/he will have to login first.
Following settings are supported by Like Button
| URL to Like | This is the URL, that is to be liked |
| Layout | This can be chosen from Standard or button count.If chosen button count, it shows only the total number of likes in front of Like button. |
| Show Faces | This option can be used if you want to show the pictures of friends of logged person. It will show list of people who liked it. |
| Width | Width of plugin in pixels |
| Verb to Display | This is the text of Like button. It can be “Like” or “Recommend” |
| Font | A wide choice of fonts, that facebook supports are listed here. You can pick one as per your site’s style |
| Color Scheme | There are two color schemes supported by Facebook. One is LIGHT (as in example above) and other DARK |
This can be used via IFRAME or XFBML.
Like Box
http://developers.facebook.com/docs/reference/plugins/like-box
| This plugin allows you to display activity from your facebook page on your website and attract people from website towards your facebook page. |
Following properties are supported by this plugin
| Facebook Page ID | This is the numeric ID of page for which box is to be displayed |
| Width | Width in pixels |
| Height | Height in pixels |
| Connections | Number of faces shown. This will show list of fans (pics). Note that it wont appear if Height is less than 500 |
| Stream | Check this if you want to show Live Stream from Page |
| Header | If checked, it will show the “Find us on Facebook” header |
This can be used via IFRAME or XFBML.
… More coming soon
0 comments:
Post a Comment