Facebook Social Plugins

Facebook Social plugins let you see what your friends have liked, commented on or shared on sites across the web. All social plugins are extensions of Facebook and are specifically designed so none of your data is shared with the sites on which they appear. You can integrate Facebook Social with Vivvo CMS easily, with just a few lines of code inside your template files.

 

 

Facebook Social Plugins

We will show integration using Comments plugin as an example, but this can be done to each and every one of them. Note that you can use the Social Plugin suite even if you do not have Facebook Connect for Vivvo installed, but in that case you will have to register application with Facebook manually.  

The list of Facebook Social plugins can be found on this URL: http://developers.facebook.com/plugins

Comments

The Comments Box will substitute Vivvo's generic comments with Facebook. 

If you're a developer, you may want to reference Facebook API directly. For more information visit: http://developers.facebook.com/docs/reference/fbml/comments

All you need to do is substitute a line in full article template where comment box is loaded with new one creating an IFrame for Facebook comments. Open full article template of your active template set (/templates/<template_set>/article/default.tpl, and around line 50, find the where comments box module is loaded:

<vte:if test="{article.show_comment}">
	<vte:include file="{VIVVO_TEMPLATE_DIR}box/{VIVVO_COMMENTS_BOX_TEMPLATE}" />
</vte:if>

You need to substitute the include box that initiates Vivvo generic comments box with code initiating Facebook Comments. 

<vte:if test="{article.show_comment}">
			<fb:comments xid="comments" canpost="true" candelete="false"> </fb:comments>
			<vte:load module="fbconnect" />
</vte:if>

Note that if if you do not have Facebook Connect installed, integration code will differ. Without FB Connect you will have to use FBConnect.init() function to create application with Facebook to get the API key. 

Without Facebook Connect:

<vte:if test="{article.show_comment}">
			<fb:comments xid="comments" canpost="true" candelete="false"> </fb:comments>
			<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"> </script>
	<script type="text/javascript">
	FBConnect.init("9d0fa3a19797484a67204d64c3d028ec", "149184841763610", "http://www.yoursitename.com/");
			</script>
</vte:if>

 

Activity Feed

Using above scenario, you can integrate all other Facebook Social plugins, like Activity Feed.

You just need to use the same principles. First, call facebook connect module that will init the application with:

<vte:load module="fbconnect" />

and then copy the code that Facebook provides for particular module: