gistfile1.txt

<div class="span12">
<div class="hero-unit">
<h2>Give Your Visitors all Social Media Updates Without Leaving Your Joomla Site</h2>
<h3><img class="alignleft  wp-image-1124" title="My Social Timeline for Joomla" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/social-timeline-codeboxr.png" alt="My Social Timeline" width="200" height="200" /> An unique Joomla Component which show latest updates from all major social networks in Facebook like timeline fashion (and other layout and styles). Whichever is your social network of choice, now you can feature their updates as you like within your Joomla! A must have Component.</h3>
[cbdemourl] [cbjedurl] [cbversion] [cbjversion] <a class="btn btn-info" href="http://localhost/codeboxr2/documentation-for-my-social-timeline.html" target="_blank"><span style="color: white;">Documentation</span></a>

</div>
<div class="row-fluid">
<div class="span4">
<h2><i class="icon-thumbs-up "></i> Awesome Features</h2>
<i class="icon-ok"></i> Display all Social Updates within Joomla

<i class="icon-ok"></i> Use Secure and Reliable Social Authentication

<i class="icon-ok "></i> Stream from Multiple Social Networks Simultaneously

<i class="icon-ok "></i> Supports Multiple Profile/ Account of Same Social Network

<i class="icon-ok "></i> In Grid View on Click social Network Filter

<i class="icon-ok "></i> In Tab, Slider group by user/source Option

</div>
<div class="span4">
<h2><i class="icon-eye-open"></i> Pre-Built Layout &amp; Styles</h2>
<i class="icon-ok "></i> Grid View

<i class="icon-ok "></i> Facebook Timeline

<i class="icon-ok "></i> Tab based Timeline

<i class="icon-ok"></i> Slider Container

<i class="icon-ok"></i> Simple List

<i class="icon-ok"></i> Single Column Timeline

</div>
<div class="span4">
<h2><i class="icon-th-large"></i> Supported Social Networks</h2>
<i class="icon-ok "></i> Facebook

<i class="icon-ok "></i> Twitter, Google+, Linkedin

<i class="icon-ok "></i> Pinterest, Youtube, Instagram

<i class="icon-ok"></i> Flickr, Tumblr, Wordpress

<i class="icon-ok"></i> Delcious, Myspace, and more

</div>
<div class="row-fluid ">
<div class="container-fluid">

<img class="aligncenter size-full wp-image-1556" src="http://localhost/codeboxr2/wp-content/uploads/2013/04/spacer750x40.png" alt="spacer750x40" width="750" height="40" />
<h3 style="text-align: center;"><i class="icon-leaf"></i> Demo: See in Action</h3>
<div class="span9 offset2" style="align: center;">
<ul class="thumbnails unstyled">
<ul class="thumbnails unstyled">
	<li class="span3 unstyled">
<div class="thumbnail" style="text-align: center;"><a href="http://localhost/codeboxr2/joomla25/index.php/social-timeline"><img src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-grid.png" alt="" /></a>
<strong><a href="http://localhost/codeboxr2/joomla25/index.php/social-timeline">Grid Timeline</a></strong></div></li>
	<li class="span3">
<div class="thumbnail" style="text-align: center;"><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-facebook-style" target="_blank"><img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-fb-time.png" alt="" width="140" height="140" /></a>
<strong><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-facebook-style" target="_blank">Facebook Timeline</a></strong></div></li>
	<li class="span3">
<div class="thumbnail" style="text-align: center;"><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-tab" target="_blank"><img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-tab.png" alt="" width="140" height="140" /></a>
<strong><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-tab" target="_blank">Tab Based Timeline</a></strong></div></li>
</ul>
</ul>
&nbsp;
<ul class="thumbnails unstyled">
	<li class="span3">
<div class="thumbnail" style="text-align: center;"><img src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-slide.png" alt="" /><strong><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-sliders" target="_blank">Slider Timeline</a></strong></div></li>
	<li class="span3">
<div class="thumbnail" style="text-align: center;"><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-listview" target="_blank"><img src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-list.png" alt="" /></a>
<strong><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-listview" target="_blank">Simple List View</a></strong></div></li>
	<li class="span3">
<div class="thumbnail" style="text-align: center;"><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-module" target="_blank"><img src="http://localhost/codeboxr2/wp-content/uploads/2013/05/social-module.png" alt="" /></a>
<strong><a href="http://localhost/codeboxr2/joomla25/index.php/my-social-timeline-module" target="_blank">Module</a></strong></div></li>
</ul>
</div>
<img class="aligncenter size-full wp-image-1556" src="http://localhost/codeboxr2/wp-content/uploads/2013/04/spacer750x40.png" alt="spacer750x40" width="750" height="40" />
<h2 style="text-align: center;"><i class="icon-play-circle "></i> Video Demo</h2>
<p style="text-align: center;"><iframe src="http://www.youtube.com/embed/dOnoaL3H0kQ" width="600" height="330" frameborder="0"></iframe></p>
<img class="aligncenter size-full wp-image-1556" src="http://localhost/codeboxr2/wp-content/uploads/2013/04/spacer750x40.png" alt="spacer750x40" width="750" height="40" />

</div>
<div class="span6">

<img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/socialtimelinetimeline.png" alt="" width="483" height="242" />

<img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/Socialtimelinetab.png" alt="" width="490" height="329" />

<img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/socialtimelinelist.png" alt="" width="488" height="427" />

<img class="alignnone" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/socialtimelineslider.png" alt="" width="499" height="506" />

</div>
<div class="span5">
<div class="well">
<h2><i class="icon-wrench"></i> Setup is Straight Forward</h2>
&nbsp;

* If version is 4.0 or later please unzip the download package first and then check there is a component named “com_cbsocialappsoauth”, at first install this and then install the main component* From v4.0 we introduced an extra authentication component with the My Social Timeline Component/module.

* Download the component/module(this extension has both module and component version specially for j2.5) and install

* Create a menu to connect the component in front end/home page. All settings are saved in menu setting or for each menu the component can have different setting. Here all settings are through the menu setting from admin panel menu manager. For module the setting are available from module setting from module manager

* Choose social network, choose style and other features.

* Set your social network ids profile.

</div>
<div class="well">
<h2><i class="icon-cog"></i> Available Options</h2>
<strong>6 Layout</strong>

<i class="icon-angle-right"></i> Grid Layout

<i class="icon-angle-right"></i> Facebook alike Vertical Layout

<i class="icon-angle-right"></i> Tabbed Container

<i class="icon-angle-right"></i> Slider Container

<i class="icon-angle-right"></i> List View

<i class="icon-angle-right"></i> Single Column Timeline

Note: All layout have the following 6 styles.

&nbsp;

<strong>6 Styles</strong>

<i class="icon-angle-right"></i> Clean (Black and White)

<i class="icon-angle-right"></i> Dark (Gradient using CSS3)

<i class="icon-angle-right"></i> Gray (Gradient using CSS3)

<i class="icon-angle-right"></i> Facebook Theme

<i class="icon-angle-right"></i> Metro Single Color

<i class="icon-angle-right"></i> Metro Multiple Color

&nbsp;

<strong>Supported Social Networks</strong>

<i class="icon-angle-right"></i> Facebook

<i class="icon-angle-right"></i> Twitter (with media images support)

<i class="icon-angle-right"></i> Linkedin (User profile)

<i class="icon-angle-right"></i> Google+, Youtube

<i class="icon-angle-right"></i> Flickr, Wordpress, Pinterest,

<i class="icon-angle-right"></i> Instragram, Delicious, Blogspot

<i class="icon-angle-right"></i> Tumblr, Reddit, Myspace

&nbsp;

<strong>Custom Settings</strong>

<i class="icon-angle-right"></i> Show All, Last Month, This Week and Recent (last 24 hours)

<i class="icon-angle-right"></i> Sort Social Network according to your weight (customizable)

<i class="icon-angle-right"></i> Multiple Profile/ Account of Same Social Network (use comma in menu setting for different profiles)

<i class="icon-angle-right"></i> Maximum item per social network: Example Value: 5

<i class="icon-angle-right"></i> Grab/crawl timeout for each social network (how long the component will check to grab activity of each social network)

<i class="icon-angle-right"></i> Sort Criteria: Item Publish time or Custom Network Weight

<i class="icon-angle-right"></i> Sort Direction: Ascending/ Descending

<i class="icon-angle-right"></i> Feed Type: RSS and Atom

<i class="icon-angle-right"></i> Show Date Section for each feed box

<i class="icon-angle-right"></i> Show/Hide Related time (Example: 5 days ago, 10 mins ago)

<i class="icon-angle-right"></i> Show Full date

<i class="icon-angle-right"></i> Timeline Selection

&nbsp;

<strong>Tab Slider Specific Options</strong>

<i class="icon-angle-right"></i> Tab Position – Top, bottom, left or right

<i class="icon-angle-right"></i> Slide speed, transition effect

<i class="icon-angle-right"></i> Slide duration

<i class="icon-angle-right"></i> Close all Yes/No

<i class="icon-angle-right"></i> Use opacity yes/no

&nbsp;

<strong>Other</strong>

<i class="icon-angle-right"></i> Advanced Cache: To make this Component work smoothly caching is very important, otherwise each refresh it will try to load all items from various social network which will be resource extensive for the server and recommend to enable caching. Caching is handled in different way for J1.5 and J2.5

<i class="icon-angle-right"></i> Safeurl Caching for joomla2.5, For unique url of the component the caching is different, caching setting works from global setting

<i class="icon-angle-right"></i> Enable Caching from menu setting in Joomla 1.5

</div>
</div>
</div>
<div class="row-fluid clearfix">

<img class="aligncenter size-full wp-image-1556" src="http://localhost/codeboxr2/wp-content/uploads/2013/04/spacer750x40.png" alt="spacer750x40" width="750" height="40" />
<p style="text-align: center;"><strong>Screenshots - Admin Settings</strong></p>

<div class="span10 offset1">

[caption id="attachment_535" align="alignleft" width="150"]<a href="http://localhost/codeboxr2/wp-content/uploads/2012/05/select-social-network.png"><img class="size-thumbnail wp-image-535" title="select social network" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/select-social-network-150x150.png" alt="" width="150" height="150" /></a> Select Social Network[/caption]

[caption id="attachment_536" align="alignleft" width="150"]<a href="http://localhost/codeboxr2/wp-content/uploads/2012/05/set-styles-and-timeline.png"><img class="size-thumbnail wp-image-536" title="set  styles and timeline" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/set-styles-and-timeline-150x150.png" alt="" width="150" height="150" /></a> Set Styes &amp; Themes[/caption]

[caption id="attachment_540" align="alignleft" width="150"]<a href="http://localhost/codeboxr2/wp-content/uploads/2012/05/Tabslider-specific-setting.png"><img class="size-thumbnail wp-image-540" title="Tabslider specific setting" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/Tabslider-specific-setting-150x150.png" alt="" width="150" height="150" /></a> Tab Slider Specific Setting[/caption]

[caption id="attachment_541" align="alignleft" width="150"]<a href="http://localhost/codeboxr2/wp-content/uploads/2012/05/toolbar-setting1.png"><img class="size-thumbnail wp-image-541" title="toolbar setting" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/toolbar-setting1-150x150.png" alt="" width="150" height="150" /></a> Timeline Toolbar[/caption]

[caption id="attachment_542" align="alignleft" width="150"]<a href="http://localhost/codeboxr2/wp-content/uploads/2012/05/set-socialnetwork-weight1.png"><img class="size-thumbnail wp-image-542" title="set socialnetwork weight" src="http://localhost/codeboxr2/wp-content/uploads/2012/05/set-socialnetwork-weight1-150x150.png" alt="" width="150" height="150" /></a> Sort by Social Network Weight[/caption]

</div>
<img class="aligncenter size-full wp-image-1556" src="http://localhost/codeboxr2/wp-content/uploads/2013/04/spacer750x40.png" alt="spacer750x40" width="750" height="40" />
<div class="span6">
<div class="alert ">
<h2><i class="icon-cloud-download "></i> Buy &amp; Download</h2>
<span class="badge badge-important">Pre-Requisite - Free Download</span>

[download id="159" cms="joomla" cmsv="15"]

[download id="158" cms="joomla" cmsv="25"]

[download id="194" cms="joomla" cmsv="30"]

<hr />

<div class="alert alert-danger">Note: For Social timeline we have both module and component , almost both does same thing. Component has extra option for front-end users to create their own timeline, where module only can create timeline for admin user(all settings are from module setting).</div>
<h3>Component</h3>
[download id="58" cms="joomla" cmsv="15"]
[download id="59" cms="joomla" cmsv="25"]
[download id="239" cms="joomla" cmsv="30"]
<h3>Module</h3>
[download id="138" cms="joomla" cmsv="25"]
[download id="238" cms="joomla" cmsv="30"]
<h3>Free JomSocial Toolbar Menu Plugin. Free!</h3>
[download id="137" cms="joomla" cmsv="25"]

<hr />

<h3>Bundle for Various Joomla Versions</h3>
<img class="size-full wp-image-700 alignnone" title="Special_offer" src="http://localhost/codeboxr2/wp-content/uploads/2011/01/Specia_offer.png" alt="" width="590" height="39" />

<strong>Component Bundle for J2.5.x and J3.x is packed</strong>
[download id="70" cms="joomla" cmsv="all"]
<strong>Module Bundle for J2.5.x and J3.x is packed</strong>
[download id="240" cms="joomla" cmsv="all"]

<strong>Component and Module Both Bundle for J2.5.x and J3.x is packed</strong>
[download id="241" cms="joomla" cmsv="all"]

<span class="badge badge-warning">Version 5.1</span> <span class="badge badge-success">Joomla 2.5.x &amp; 3.x compatible</span> <span class="badge badge-info">GPL2 License</span>

</div>
</div>
<div class="span5">
<div class="alert alert-success ">
<h2><i class="icon-question-sign"></i> Tutorials for Social App Creation</h2>
<a href="http://localhost/codeboxr2/how-to-create-facebook-app.html?v=5" target="_blank"><i class="icon-facebook-sign"></i> How to Create Facebook App</a>

<a href="http://localhost/codeboxr2/how-to-create-twitter-app.html" target="_blank"><i class="icon-twitter-sign"></i> How to Create Twitter App</a>

<a href="http://localhost/codeboxr2/how-to-create-google-plus-app.html" target="_blank"><i class="icon-google-plus-sign"></i> How to Create Google Plus API Key</a>

<a href="http://localhost/codeboxr2/how-to-create-linkedin-app.html" target="_blank"><i class="icon-linkedin-sign"></i> How to Create Linkedin API Key</a>

</div>
</div>
<div class="span5">
<div class="alert alert-success ">
<h2><i class="icon-bullhorn"></i> Need more Convincing?</h2>
<a class="btn" href="http://extensions.joomla.org/extensions/social-web/social-display/social-channels-display/20976"><span style="font-weight: bold;">it's Official Joomla Extension Directory Approved</span></a>
<p style="font-size: 18px;"><i class="icon-umbrella icon-2x"></i> <a href="http://localhost/codeboxr2/refund-policy.html">All our products have 100% Money Back Guarantee until you are Satisfied</a></p>
<p style="font-size: 18px;"><i class="icon-globe icon-2x"></i> <a href="#">We have Served 1000s of Global Clients</a></p>
<p style="font-size: 18px;"><i class="icon-lock icon-2x"></i> <a href="#">Secure Transactions with Paypal</a></p>
<p style="font-size: 18px;"><i class="icon-user icon-2x"></i> <a href="http://localhost/codeboxr2/testimonial">Read What Others Say About Us?</a></p>

</div>
</div>
<div class="span12">
<div class="alert alert-info">
<h3 style="text-align: center;"><i class="icon-question-sign"></i> TUTORIAL: How to Set Social Network ID</h3>
Multiple username/id is support. Just use comma separation for multiple id. Example: for twitter if you have multiple account you can use codeboxr, manchumahara – where codeboxr and manchumahara is twitter username of two accounts.

<strong>Facebook:</strong> From Version 5.1 we added Facebook connect option. So if you upgrade or buy the new version 5.1 or later please note that you have to create Facebook Application and you will get Facebook app key and app secret. you can follow this short tutorial to create facebook app : <a href="http://localhost/codeboxr2/how-to-create-facebook-app.html">http://localhost/codeboxr2/how-to-create-facebook-app.html</a> . Then give the app key and app secret in the menu or module settings. You need to click the “Facebook Connect” button from menu manager.
This Component fetches Facebook stream of a profile or a page through Facebook API. Profile or page has a username.-’https://www.facebook.com/username’ Give the profile or page username in the settings.

<strong>Twitter:</strong> For twitter just simply use your twitter username. <a href="https://twitter.com/#!/codeboxr">https://twitter.com/#!/codeboxr</a> . Here bold part is your twitter username. Please note that from Version 4.0 we added twitter connect option for twitter to avoid the api policy issue from twitter for their api1.1 version. So if you upgrade or buy the new version 4.0 or later please note that you need to create twitter app. Please follow the tutorial: <a href="http://localhost/codeboxr2/how-to-create-twitter-app.html">http://localhost/codeboxr2/how-to-create-twitter-app.html</a> . After creation of app give consumer key and consumer secret provided by twitter in the menu/module settings.
Click the “Twitter Connect” button from menu manager. It will take you to twitter and ask permission and if every thing goes well will back to menu setting page or module setting page, save the menu/module. Advance users can create application in twitter and set their own consumer key and consumer secret. New Twitter connect (from v4.0) is available from Basic setting of component’s menu in menu manager. See screeshots.

&nbsp;

<strong>Linkedin:</strong> From Version 5.1 we added LinkedIn connect option. So if you upgrade or buy the new version 5.1 or later please note that you have to create LinkedIn Application and you will get LinkedIn app key and app secret. you can follow this short tutorial to create LinkedIn app : <a href="http://localhost/codeboxr2/how-to-create-linkedin-app.html">http://localhost/codeboxr2/how-to-create-linkedin-app.html</a>. Then give the app key and app secret in the menu or module settings. You need to click the “LinkedIn Connect” button from menu manager.
This Component fetches LinkedIn stream of a profile or a company profile through LinkedIn API. Company page id.-’<a href="http://www.linkedin.com/company/companyid">http://www.linkedin.com/company/companyid</a>’ Give the company id in the settings.

<strong>Google Plus:</strong> Please follow the tutorial how to get google plus API key : http://localhost/codeboxr2/how-to-create-google-plus-app.html Example if your Google Plus profile or page URL is https://plus.google.com/104289895811692861108 then put the last digit as profile or page id that is 104289895811692861108

<strong>Youtube:</strong> Simply use your username . Example: http://www.youtube.com/user/mashable here the bold part is youtube username.

<strong>Pinterest:</strong> For pinterest simple use the pinterest username. Example: http://pinterest.com/mashable. Here bold part is the pinterest username.

<strong>Flickr:</strong> For flickr need user id not username. To find your user id for any username please use this service.

<strong>WordPress, Blogspot and Tumblr:</strong> Simple use username. Example: username.wordpresscom, username.blogspot.com, username.tumblr.com

<strong>Reddit &amp; Last.fm:</strong> For reddit to find username use this example: http://www.reddit.com/user/mashable here bold part is username. http://www.last.fm/user/Dix-Din here the bold part is lastfm username.

<strong>Instagram:</strong> Please go here web.stagram.com and connect with instagram and then login, My Photos, then check the rss feed link is at right side. copy this rss feed link. Example: http://web.stagram.com/n/manchumahara/ where my instagram username is manchumahara

<strong>Foursquare:</strong> Please go here <a href="https://foursquare.com/feeds/" target="_blank">https://foursquare.com/feeds/</a> and then copy the RSS feed link

&nbsp;

<strong>Timeline per User (New from v3.0 and only for j2.5)</strong>
Now it’s possible user can set his/her personal timeline. For this at first admin need to enable this feature from the component option/setting and then user will get option to enable disable timeline for him/her and set his own social networks.

<strong>Jomsocial Integration (New from v3.0 and only for j2.5)</strong>
Now we are providing a free plugin for jomsocial to add a menu in jomsocial toolbar so that user can access his/her timeline easily. Though it needs that admin enable the timeline for user and user enable timeline for his/her.

<strong>Timeline as Module (New from v3.0 and only for j2.5)</strong>
We are happy to release the My Socialtimeline as a module. Some customers wanted this and they want to show the timeline in home page or other page with another extension. So besides components now timeline can be integrated as module but for module there will be no separate timeline per user. It means for timeline in module admin can set all necessary social network from module setting.

</div>
</div>
</div>
</div>
</div>