Custom Social Feeds
How do I make an custom social feeds?
Just an example of using facebook and twitter APIs to retrieve wall posts. What is a custom social feeds? How do you make a custom social feeds? This script and codes were developed by Altitude on 23 September 2022, Friday.
Custom Social Feeds - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Social Feeds</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="feed facebook-wall"> <h3>Facebook</h3>
</div>
<div class="feed twitter-feed"> <h3>Twitter</h3>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Custom Social Feeds - Script Codes CSS Codes
*, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #333;
}
.feed { background: white; width: 30%; float: left; padding: 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #777; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); background: white; margin: 30px; width: 30%; padding: 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #777; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.feed h3, .feed h4 { color: #444; margin-top: 0;
}
.feed a.post { color: #777; text-decoration: none; display: block; padding: 10px 10px 0 10px; position: relative; overflow: hidden; margin: 10px -10px 0 -10px; border-bottom: 1px solid #eee; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.feed a.post:hover { background: #eee;
}
.feed a.post .media { display: block; margin-right: 10px; margin-bottom: 10px; position: relative; padding: 3px; background: white; border: 1px solid #ccc; width: 90px; min-height: 100%; float: left; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.feed a.post .media img { display: block; border: none; width: 100%; height: auto;
}
.feed a.post .media.video:before { display: block; position: absolute; content: ''; width: 30px; height: 30px; background: black; background: rgba(0, 0, 0, 0.5); top: 50%; left: 50%; margin-top: -15px; margin-left: -15px;
}
.feed a.post .media.video:after { display: block; position: absolute; content: ''; width: 0px; height: 0px; top: 50%; left: 50%; border: 10px solid transparent; border-left-color: white; margin-top: -10px; margin-left: -5px;
}
.feed a.post h4 { font-weight: normal; font-size: 14px; margin-bottom: 10px;
}
.feed a.post p { margin-bottom: 10px; font-size: 12px;
}
Custom Social Feeds - Script Codes JS Codes
$(function () { "use strict"; var loadFacebookWallPosts = function (container, username, accessToken, limit) { $.getJSON("https://graph.facebook.com/" + username + "/posts?" + accessToken + "&callback=?", { 'limit': limit }, function (data) { var i = 0; $.each(data.data, function () { if (this.message !== undefined && i < limit) { var element = $('<a/>', { 'id': this.id, 'class': 'post', 'target': '_blank' }); if (this.link !== undefined) { element.attr('href', this.link); } if (this.picture !== undefined) { var mediaContainer = $('<div/>', { 'class': "media" }); if (this.type !== undefined) { mediaContainer.addClass(this.type); } mediaContainer.append('<img src="' + this.picture + '"/>'); element.append(mediaContainer); } if (this.message !== undefined) { element.append('<h4>' + this.message + '</h4>'); } if (this.caption !== undefined) { element.append('<p>' + this.caption + '</p>'); } container.append(element); i++; } }); }); }; $.get("https://graph.facebook.com/oauth/access_token", { 'grant_type': "client_credentials", 'client_id': "225039077528654", 'client_secret': "ed8bc73d3d127204e66464400073d91d" }, function (data) { loadFacebookWallPosts($('.facebook-wall'),'luccimusic', data, 5); }); var loadUserTweets = function (container, query, limit) { $.getJSON("https://search.twitter.com/search.json?q=" + encodeURI(query)+"&callback=?", { 'rpp': limit, 'include_entities': 1 }, function (data) { var i = 0; $.each(data.results, function () { if (this.text !== undefined && i < limit) { var element = $('<a/>', { 'id': this.id, 'class': 'post', 'target': '_blank' }); if (this.entities.urls[0] !== undefined) { element.attr('href', this.entities.urls[0].url); } if (this.profile_image_url_https !== undefined) { var mediaContainer = $('<div/>', { 'class': "media" }); if (this.type !== undefined) { mediaContainer.addClass(this.type); } mediaContainer.append('<img src="' + this.profile_image_url_https + '"/>'); element.append(mediaContainer); } if (this.text !== undefined) { element.append('<h4>' + this.text + '</h4>'); } if (this.from_user !== undefined) { element.append('<p>@' + this.from_user + '</p>'); } container.append(element); i++; } }); }); }; loadUserTweets($('.twitter-feed'), 'from:theluccimusic OR to:theluccimusic"', 5); //https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=theluccimusic&count=2
});
Developer | Altitude |
Username | altitudems |
Uploaded | September 23, 2022 |
Rating | 3 |
Size | 3,750 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Altitude | 4,928 Kb |
VueJS Audio Mixer | 10,100 Kb |
VueJS Calendar Component | 8,913 Kb |
Responsive, Fullscreen Slider | 5,472 Kb |
Simple CSS Ribbon and Banner | 3,871 Kb |
Semantic Tableless Calendar | 4,528 Kb |
Baseline Grid | 7,369 Kb |
Pricing Table v2 | 3,175 Kb |
Expanding Breadcrumb Nav | 2,865 Kb |
Off-Canvas Menu | 4,282 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Ghost | Mghayour | 11,738 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Click handler test | Snapson | 2,329 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!