Recently first Loklak plugin was accepted in WordPress directory. We are planning to add more and more plugins with loklak integration and it is an awesome start. The plugin
Tweets Widget is a minimalist tweet feed which can render tweets from Loklak.org API or Twitter API v1.1 .
The widget uses Twitter Auth WordPress API (wp-twitter-api) by _timwhitlock_ and Loklak’s PHP API for tweet rendering purposes. Both the APIs are added as submodules.
Tweets Widget shows tweet feed on your wordpress website. You can add its shortcode or just add it as a Widget using wordpress’s drag and drop feature.
It is compatible with both Twitter as well as Loklak API. The settings page allows you to select one of the two modes for your current feed (as shown below).
After you provide the default settings, you have to provide a tweet title, handle, number of tweets and some more custom feature
See the screenshot of a sample feed below.
It uses loklak search API (code sample shown below).
The main widget code can be seen here.
Loklak.org has a page for front-end apps that showcase the uses of loklak’s API, and in the first week I’ve tried to warm up for GSOC by making a ‘realtime’ twitter feed, as the existing front-end apps were mainly single http get requests and didn’t seem very appealing to me, and also to prepare for my front-end app data visualisations GSOC project.
To obtain updated data, the app polls the loklak API on a regular interval. This is done rather simply by using $interval in AngularJS, which is just a wrapper around window.setInterval(). For the realtime feed, I set the minimum rate for querying at an arbitrary 1min so as not to exceed the limits.
The next thing I needed to solve was where to store the data, as I didn’t have a database to work with, local storage was the only option. A useful module for this is “ngStorage“. At a maximum of 5MB it isn’t much, but decent enough to store a few thousand tweets and showcase the features of loklak. If developers wanted to create an external app for loklak, they could also use the front-end apps if they were well modularized.
Lastly, to display in a fancy pinterest-like grid, I’ve decided to use an angular module called “angulargrid“. To achieve the infinite scroll effect, I created another scope variable, to take a subset of the data in local storage. AngularJS then helps with rendering changes in the data model to the feed, by using $watch() on local storage.
Do checkout the tweetfeed:
Some areas to improve:
- Refactor services to make it more modular
- Improve the regex to account for emojis and other tags