Fork me on GitHub

pe_pplog demo page

Main menu

Feeds (2) /Social Feeds

No comments
Cross-domain RSS feed
The previous described method of including an RSS feed in the blog was only for feeds from the same domain. For cross domain RSS feeds one either has to use a Google Ajax Feed API or a server side proxy script.

One example for a JQuery plugin working with the Google API is FeedEk.

After downloading the plugin from the homepage, place the following in $config_customHTMLhead or directly in the post.

<script type="text/javascript" src="FeedEk.js"></script>

See below for an example set up.

example1
example2
set up script

Twitter feeds
Twitter changed it's API recently, which means that many of the plugins I found did not work. The one I could get to work was Tweetable. The included css file shouldn't be used as it will mess with the overall look of the blog and only the styles for #tweets included to main style sheet, unless one is ok with the feeds being in conventional list style. There is no need to put anything into $config_HTMLhead.

example
set up script

You tube feeds
Yunero is an example to add a youtube feed. I did not manage to change the 2 column thumbnail layout. There is no css file, just download the plugin from the webside, copy and paste the code from the how to on the homepage into the blogpost, change the path to the .js file and
"var youTubeURL" to channel or playlist URL.

example

Aggregating social network and RSS feeds
Due to the aforementioned change in the the twitter API, twitter feeds might not work here.

Socialist has the nice feature of the plugin being hosted, which means one only has to add the following to the post and change the networks and id's to ones own.

<script type="text/javascript" src="http://plugins.in1.com/scripts/socialist.js"></script> <div id="socialist" data-networks="pinterest,rss,tumblr" data-ids="hubspot,http://feeds2.feedburner.com/ImpressiveWebs,in1blog"></div>

Obviously this might effect loading time, though.

example

For so.so.social twitter is not working. The included css file shouldn't be used as it will mess with the overall look of the blog and only the styles for #activityFeeds ul and #activityFeeds ul li included to the main style sheet. So again, after downloading and putting the js file in the folder /js one only has to put the set up script in the post. Of course with changing ids to ones own social network ids.

example
set up script
css

There are obviously a lot more plugins that deal with social networks. Time wise I can not test them all, check out http://jquery-plugins.net for more.


Embedded IRC

No comments
Embedding IRC into a page of the blog is quite easy using qwebirc. Qwebirc is a webchat used by most of the bigger IRC networks, such as QuakeNet, Freenode, EFNet and more. To add an IRC channel to the blog, go to the webchat of the IRC Network the channel belongs to, (eg http://webchat.freenode.net/) click on "Add webchat to your site" and follow the wizard until you get a code like this:

<iframe src="http://webchat.freenode.net?randomnick=1&channels=%23test&uio=d4" width="647" height="400"></iframe>


Make a new blog entry and copy and paste the code. Check is HTML.

The result will look like this:





RSS feed

No comments
It is possible to parse a RSS feed with JQuery and thus with some friendly help from Paul and the internet I wrote a small script to display an RSS feed in the menu (in this case the latest entries of my travel blog):



This is the script:
<script>	var rssurl=\'pup_pplog.pl/?do=RSS\';

$.get(rssurl, function(data) {
var $xml = $(data);
var $item = $xml.find("item").slice(0,5);
$item.each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text()
}

$("#feed-container").append($(\'<a></a>\').attr(\'href\',item.link).attr(\'target\',\'_blank\').html(item.title), $(\'<p></p>\').html(item.description));
});
});
</script>
<!-- Edit the following according to need -->
<h1>Travel Blog Entries</h1><div class="slide"><a id="flip" href="/travel" target="_blank">view travel blog »</a><div class="hide" id="feed-container">


Add to "our $config_customMenuHTMLbottom". Only works with RSS feeds from the same domain.





An event calendar

No comments
This was supposed to be a post akin to the Social Share Buttons one, with a lot of different options, but I only found one JQuery calendar that was lightweight and easy to set up, FullCalendar.

My set up of it looked like this:
cal-monthcal-weekcal-day

I downloaded the files from the website and put them in the /js folder on my server home.
The I put this:
<link rel="stylesheet" type="text/css" href="/js/fullcalendar.css" />
<script type="text/javascript" src="/js/fullcalendar.js"></script>


in "our $config_customHTMLhead" and "our $config_customHTMLadmin"

Then I made a new entry with the following content:
cal-code

and checked "is HTML".

As you can see events are added in the initialization script, see the webpage for more options, such as google calendar integration.

As an extra I wrote a short script replacing the traditional archive with a calendar with click-able links:
cal-archive

replace "doArchive();" in pe_pplog.pl (around line 750) and/or pe_admin.pl (around line 910)
with the following:

print '<h1>'.$locale{$lang}->{archive}.'</h1><script>$(document).ready(function() {

$(\'#calendar\').fullCalendar({
events: [';
my @entries = getFiles($config_postsDatabaseFolder);
print $locale{$lang}->{noentries} if scalar(@entries) == 0;
# Split the data in the post so i have them in this format "13 Dic 2008, 24:11|0001|Entry title" date|fileName|entryTitle
my @dates = map { my @stuff = split(/¬/, $_); @stuff[2].'|'.@stuff[4].'|'.@stuff[0]; } @entries; #25.05.13 jamesbond
my $year;
my $month;
my %months = (Jan=>"01", Feb=>"02", Mar=>"03", Apr=>"04", May=>"05",
Jun=>"06", Jul=>"07", Aug=>"08", Sep=>"09", Oct=>"10", Nov=>"11", Dic=>"12"); #hash to change shots into numbers for events
my $day;
foreach(@dates)
{
my @date = split(/\|/, $_);
my @y = split(/\s/, $date[0]);
$y[2] =~ s/,//; #get rid of the comma!
$day = $y[0];
unless ($day =~ /\d\d/){$day = '0'.$day;} #day needs to be double digit 01 instead of 1
$month = $y[1];
$year = $y[2];
print "{title: '$date[2]', url: '?viewDetailed=$date[1]', start: '$year-$months{$month}-$day'},"; #writing the entries as calendar events
}
print ']
})
});</script><div id="calendar"></div>';


and add the javascript and css file as above


Why so much space for custom html?

No comments
A blog is a very personal space, in many cases (such as for me) ones blog is also ones homepage. For this reason I wanted to have an easy way to add features to the blog and customize it according to individual taste. With JQuery already included in the blog the posibilites are close to endless.

Some examples for the different custom html options, I only tested the ones that are used on this blog though

Menu top: follow me @... buttons, link to "about me", "about this blog " or "contact me" pages, a download link as on this page

Menu bottom: twitter feed plugin (JQ), social feed (facebook) (JQ), show an rss feed (see my homepage), a calender (JQ), a map, a gallery, a music player (JQ)

On posts: the only use I can think of is social buttons, but considering the big part social media plays on the internet I felt it was important to offer this space (JQ).

In head: the above mentioned examples marked with JQ are available as JQuery plugins and would need a script to be placed in the head. Features such as translating the webpage (google and others) or the chat I put on this blog as an example only need a script in the head section.


Pages: [1] [2]