Twitter and Facebook integration into CMS Sitefinity 4.0 — Part 1

posted on January 24th, 2011 by Ihar Hryhorchyk

I am currently working on a web solution based on Sitefinity CMS. I have recently faced the task of integrating Twitter/Facebook into Sitefinity 4.0 and I have made a small research. Now I would like to share it with you.

There are at least 3 ways to integrate Facebook/Twitter into your Sitefinity web site. Today I will tell you how you can do this using Facebook and Twitter plugins.

Facebook plugins

Facebook Social plugins (http://developers.facebook.com/plugins )

Like Button	The Like button lets users share pages from your site back to their Facebook profile with one click
Activity Feed	The Activity Feed plugin shows users what their friends are doing on your site through likes and comments.
Recommendations	The Recommendations plugin gives users personalized suggestions for pages on your site they might like.
Like Box	The Like Box enables users to like your Facebook Page and view its stream directly from your website.
Login Button	The Login Button shows profile pictures of the user's friends who have already signed up for your site in addition to a login button.
Facepile	The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site.
Comments	The Comments plugin lets users comment on any piece of content on your site.
Live Stream	The Live Stream plugin lets your users share activity and comments in real-time as they interact during a live event.

Facebook Dialogs (http://developers.facebook.com/docs/reference/dialogs/ )

	Feed Dialog	Prompt the user to publish an individual story to a profile's feed
	Friends Dialog	Prompt the user to add a friend.
	OAuth Dialog	Prompt the user to grant permissions to your application
	Payments Dialog	Prompt a payment dialog

Recommended ways to add Facebook plugins and dialogs into web page:

- Iframe (for plugins and dialogs)

- XFBML (with JavaScript SDK) (for plugins)

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="true" width="450"></fb:like>

- Direct redirection (for dialogs)

http://www.facebook.com/dialog/feed?

app_id=123050457758183&

link=http://developers.facebook.com/docs/reference/dialogs/&

picture=http://fbrell.com/f8.jpg&

name=Facebook%20Dialogs&

caption=Reference%20Documentation&

description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&

message=Facebook%20Dialogs%20are%20so%20easy!&

redirect_uri=http://www.example.com/response

Twitter plugins

Tweet Button (http://dev.twitter.com/pages/tweet_button )

The Tweet Button is a small widget which allows users to easily share your website with their followers. This page is for developers and users who wish to build their own Tweet Buttons.

Recommended ways to add Tweet Button into web page:

- Using javascript

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

- Using an iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no"

src="http://platform.twitter.com/widgets/tweet_button.html"

style="width:130px; height:50px;"></iframe>

Conclusion:

Ways to add Facebook plugins and dialogs into Sitefinity web page:

- Insert Iframe with plugin code into ContentBlock (News Item, Blog post, Event item, Generic content item).
- Insert link to JavaScript SDK into JavaScript Block and XFBML code into ContentBlock (News Item, Blog post, Event item, Generic content item).
- Insert Iframe into custom widget and them add widget into Sitefinity page
- Insert XFBML code into custom widget and them add widget into Sitefinity page
- Add direct link to Facebook dialog

Ways to add Tweet Button into Sitefinity web page:

- Insert Iframe with plugin code into ContentBlock (News Item, Blog post, Event item, Generic content item).
- Insert link to JavaScript into JavaScript Block and Html code into ContentBlock (News Item, Blog post, Event item, Generic content item).
- Insert Iframe into custom widget and them add widget into Sitefinity page
- Insert JavaScript and Html code into custom widget and them add widget into Sitefinity page

To be continued…