Facebook and Twitter Widget For Web Page

Support and Help

Please note we do not guarantee any support with this Facebook and Twitter Widget. It is provided as-is and can be used or modified as you see fit. However, we cannot guarantee support while installing and, in particular, modifying it for your own needs. If you wish to get in contact to report an issue, request help (with an understanding there is no guarantees) or discuss custom work to modify it, we would be glad to hear from you.

How it Works

<div class="tabsContainer">
	<ul class="tabs">
		<li class="tabsfacebook"><a href="#tab1" class="active">Facebook</a></li>
		<li class="tabstwitter"><a href="#tab2">Twitter</a></li>
	</ul>

	<div class="facebooktab" id="tab1">
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8&appId=1072240649455272";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>

		<div class="fb-page" data-href="https://www.facebook.com/daftlogiccom/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/daftlogiccom/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/daftlogiccom/">Daft Logic</a></blockquote></div>
	</div>

	<div class="twittertab" id="tab2" style="display: none;">
		<a class="twitter-timeline" data-width="300" data-height="500" href="https://twitter.com/daftlogic">Tweets by daftlogic</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	</div>
</div>

<script>
	$( function() {
		$( ".tabsContainer" ).tabs();
	} );
</script>

<style>

	.tabsContainer{
		top: 40px;
		margin: auto;
		width: 300px;
		max-width: 300px;
		padding: 0;	
		display: inline-block;
	}
	.tabs{
		margin-bottom: 0px;
		padding: 0px;
		margin:0px;
		
	}
	.tabs li{
		list-style-type: none;
	
	}
	.tabs li.tabsfacebook a{
		width: 80%;
		max-width: 150px;
		height: 40px;
		background: #46679C;
		float: left;
		text-align: center;
		margin: 0px 0px 0px -7.8px;
		padding: 7px 0px 3px 0px;
		font-family: 'Fjalla One', sans-serif;
		font-size: 22px;
		font-weight: normal;
		text-decoration: none;
		color: #FFFFFF;
		outline: none;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs li.tabsfacebook a.active{
		background: #46679C;
		color: #FFFFFF;
	}
	.tabs li.tabstwitter a{
		width: 50%;
		max-width: 150px;
		height: 40px;
		background: #6DDBF3;
		float: right;
		text-align: center;
		margin: 0px 0px 0px 0px;
		padding: 7px 0px 3px 0px;
		font-family: 'Fjalla One', sans-serif;
		font-size: 22px;
		font-weight: normal;
		text-decoration: none;
		color: #FFFFFF;
		display: inline-block;
		outline: none;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs li.tabstwitter a.active{
		background: #6DDBF3;
		color: #FFFFFF;
	}

	.facebooktab{
		width: 100%;
		max-width: 300px;
		height: 520px;
		background: #46679C;
		float: left;
		margin: 0;
		padding: 10px 3.4%;
	}
	.twittertab{
		width: 100%;
		max-width: 300px;
		height: 520px;
		background: #6DDBF3;
		float: left;
		margin: 0;
		padding: 10px 3.4%;
	}
</style>

Relevant Links

Facebook Page Plugin

Twitter Publish

Future Updates

• Allow settings and opions to be input and custom code prodcued for user

Version History