Tutorial for Smart Content Tabs Social Box

In our latest blog post, we have talked about the social stuffs on the websites. So now we will show you, how to make a very fancy social box with the Smart Content Tabs component.

We will use the most-common social site likebox, or content from social sites: Facebook, Twitter, Google , Thumblr, and RSS feed. So let's start it.

First steps

First you should log in to the site admin area, and select components/Smart Content Tabs. Here create a new tabber. Set the add slide parameter to 5, because we will create 5 tabs. You can set the tabber what you would like, you can see my settings on the image below. When you are ready, hit the save and close button.

Setting up the tabs

Now the tabber is ready, so we will create the tabs for each social websites. There are separates part in this tutorial, where the steps written detaily, so you don't have to worry, if you are a beginner, it will be easy to follow.

Facebook

We will put a facebook fanbox inside of the tabber. So click on the first tab, and set the title for Facebook. You can also set an icon for the tab, what makes your tabber more fancy. Fortunately facebook has a wizard, what can generates the html code from the settings, what you have previously set by the setting panel. You can reach this generator here: Facebook Likebox As you can see, there aren't so much settings, so you can manage it easily. If you change something on the properties panel, you can see the changes live on the left. When you finished it, click on the Get Code button, and copy the generated code. After it, go back to your admin panel where you are editing the selected tab, select the blank html template for the content part, and paste the code, what you previously copied from the facebook popup window. Note, that these codes not appearing in the preview window on the admin area, because these embed codes uses external JS codes, what will probably not load in the admin area. When you are ready, click on the save and close button, and click on the second tab to edit

Twitter

Twitter also has a code generator, but it works a bit different, than the facebook likebox. Here is the URL: Twitter widgets First, you should sign in with the account, you would like to share. Then click on new widget, and set the properties. As same as facebook, you can see the changes on the right. Then click on the Create widget button, and copy the code, what twitter generates for you. Then paste this code to the twitter tab, as blank html content template, and click on save and close.

Google Maps

You can use the embedded google maps, to show something important place, where there will a special event, a party, and so on. Fortunately there is a user-friendly interface for the google maps embedding, so you will also has an easy way. So navigate to Google maps and search for the location, what you would like to share. After it, click on the Link button, what has a chain icon on the left top of the page. Here select the embedding code started with

RSS feed

To embed RSS feeds, there are many opportunites. It doesn't has any special, or dedicated site, so you can google on embedding rss feed and choose the solution, what you like. I have chosen the rssinclude.com solution. Here you can add the link of the rss feed, set up the styling options, then click on include button. Note that you should register for free to can get the embedding code. Then paste it inside of the RSS tab.

Tumblr

Tumblr is also a social site, but here not the people and the profile pages are in focus, just the images, and contents what user uploads and share. There is a very detailed description about the tumblr embedding, so I will link it to you. This is a post from a user from tumblr, and this is public, so everyone can visit it. Here is the link : Tumblr embedding Follow the instructions, then copy the embedding code, and do the same as the previous tabs.

I hope you can do your own social tabber based on this blog post. Just try it, and you will see, it will be a very spectacular part of your site.
You can see the result of this tutorial on the image below, and you can also try it out on the Smart Content Tabs demo site. If you like this tutorial, and you would like to get this spectacular social box to your site, you can buy the Smart Content Tabs here: Smart Content Tabs product page.