Twitter Section Using loklak webtweets
In Open event web app, the user can provide URL of social links such as Twitter, Facebook etc in the event.json file inside the ZIP. The previous functionality was to use Twitter API and to generate a timeline showing the tweets of the twitter URL mentioned in event.json by user. But, it can be done by following another approach which reduces the third party dependency i.e Loklak-webtweets.
I have implemented the twitter section using loklak webtweets which can be done very easily.
Step 1: Including necessary files from loklak–webtweets repository inside index.html. You can find them in js/ folder of this repository.
<script src="./dependencies/jquery.min.js"></script> <script src="./dependencies/bootstrap.min.js" type="text/javascript"></script> <script src="./dependencies/loklak-fetcher.js" type="text/javascript"></script> <script src="./dependencies/tweets.js" type="text/javascript"></script>
Step 2: Specify the data source in HTML from which twitter data will be fetched. Here I have extracted the last word from the twitter URL provided by the user and passed it to HTML.
const sociallinks = Array.from(event.social_links);
var twitter ="";
sociallinks.forEach((link) => {
if(link.name.toLowerCase() === "twitter") {
twitter = link.link;
}
})
const arrayTwitterLink = sociallink.split('/');
const twitterLink = arrayTwitterLink[arrayTwitterLink.length - 1];
const urls= {
twitterLink: twitterLink,
tweetUrl: twitter,
};
This code will search twitter link in social links array present in event.json and get its last character which will be provided to data-from and data-query attribute of HTML.
<section class="sponsorscont">
<div class="tweet-row">
<div class="col-sm-12 col-md-12 col-xs-12">
<i class ="social_twitter fa fa-twitter"></i>
<div class="tweets-feed" id="tweets" data-count=50 data-query=" {{{eventurls.twitterLink}}}" data-from="{{{eventurls.twitterLink}}}">
<div class="arrow-up"></div>
<p id="tweet" class="tweet">
Loading...
</p>
<span style="margin-bottom: 20px;" id="dateTweeted"></span>
<p>Follow<u>
<b><a href="{{eventurls.tweetUrl}}"/>
@{{eventurls.twitterLink}}</a>
</b></u> for more updates</p>
</div>
</div>
</div>
</section>
Step 3 : Now we just need to add styling so that it looks decent. For that, I have written some SASS.
.tweets-feed {
color: $black;
line-height: 30px;
font-size: 20px;
transition: opacity 0.2s linear;
margin-bottom: 20px;
height: 100px;
a {
color: $black;
text-decoration: underline;
font-weight: 700;
}
#dateTweeted {
font-size: 15px;
display: block;
}
}
.tweet-row {
padding: 0 80px;
margin-bottom: 80px;
.social_twitter {
font-size: 60px;
margin-bottom: 12px;
}
}
The output from the above code is a well designed Twitter section fetching tweets from the URL provided as a string in event.json by user.
You must be logged in to post a comment.