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.





How to create a self signed ssl certificate

No comments
In the newest version of the blog one can chose for the login to require a ssl (https) connection. This is obviously the safer option, especially if using the blog on a public wifi.

As the certificate generated in this how-to is not verified by a Certificate Authority such as Thawte or Verisign, your browser will notice an error inform you that the signing certificate authority is unknown and not trusted. Bear in mind that this is your self-signed certificate. So, you should ignore that error message.

Generating this certification does not mean that your site will automatically use https. You will have to manually type in https://yoursite.com

Here is how to create a ssl certificate for the Hiawatha server (for Apache see below):

1. Open a terminal/console at local or do it remotely through SSH access

2. The first thing that need to do is, create a RSA Private Key by using the below command.

#openssl genrsa -des3 -out server.key 2048


Generating RSA private key, 2048 bit long modulus
.........................................................++++++
.........................................................++++++
...........+
e is 65537 (0x10001)

3. The next step is to create a Certificate Signing Request (CSR). CSR is a message sent from an applicant to a certificate authority in order to apply for a digital identity certificate. User will be prompt to enter an information that related to CSR certificate. To create a CSR, enter the below command.

#openssl req -new -x509 -days 3650 -key serverkey.pem -out server.crt


Country Name (2 letter code) [GB]:type your 2 letter country code
State or Province Name (full name) [Berkshire]:type your state or province name
Locality Name (eg, city) [Newbury]:type your city name
Organization Name (eg, company) [My Company Ltd]:type your company name
Organizational Unit Name (eg, section) []:type your department
Common Name (eg, your name or your server's hostname) []:type your server hostname
Email Address []:type your email address

4. The next steps:

#echo "" >> serverkey.pem

#cat server.crt >> serverkey.pem
#echo "" >> serverkey.pem
#rm -f server.crt


5. Installing the Private Key and Certificate is simple. All you need to do is to know where are your hiawatha configuration files. I assume that, we are using /etc/hiawatha, but it might be /usr/local/etc/hiawatha. So, copy the serverkey.pem file to the directory and make it only readable for root.

#cp serverkey.pem /etc/hiawatha

# chmod 400 /etc/hiawatha/serverkey.pem


When you are being asked to overwritten the file, just type yes and hit Enter.

6. Add a ssl binding to the hiawatha config file. Open /etc/hiawatha/hiawatha.conf. Add the following after
Binding {
Port = 80
....
}

Binding {

Port = 443
SSLcertFile = /etc/hiawatha/serverkey.pem
}


7. Restart Hiawatha and test to access your site using https://. Check the certificate and make sure the information that you have inserted is correct.

8. Finish! Your configuration is done. Good luck :-)

And now for Apache
1. Open a terminal/console at local or do it remotely through SSH access

2. The first thing that need to do is, create a RSA Private Key by using the below command.

#openssl genrsa -des3 -out server.key 1024


Generating RSA private key, 1024 bit long modulus
.........................................................++++++
........++++++
e is 65537 (0x10001)
Enter PEM pass phrase: enter the desired pass phrase
Verifying password - Enter PEM pass phrase: same as a above

3. The next step is to create a Certificate Signing Request (CSR). CSR is a message sent from an applicant to a certificate authority in order to apply for a digital identity certificate. User will be prompt to enter an information that related to CSR certificate. To create a CSR, enter the below command.

#openssl req -new -key server.key -out server.csr


Country Name (2 letter code) [GB]:type your 2 letter country code
State or Province Name (full name) [Berkshire]:type your state or province name
Locality Name (eg, city) [Newbury]:type your city name
Organization Name (eg, company) [My Company Ltd]:type your company name
Organizational Unit Name (eg, section) []:type your department
Common Name (eg, your name or your server's hostname) []:type your server hostname
Email Address []:type your email address
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:type your password
An optional company name []:type your company name

4. The next step is to remove the passphrase key. It is because if you enable the passphrase, Apache will ask for the pass-phrase each time the web server is started. It will be a problem if the server is restarted as the user always need to type the passphrase. The below command will remove the passphrase.

#cp server.key server.key.org

#openssl rsa -in server.key.org -out server.key



5. To generate a Self-Signed Certificate, enter the below command. 

#openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt


6. Installing the Private Key and Certificate is simple. All you need to do is to know where are your XAMPP Apache directory. I assume that, we are using the default XAMPP directory, /opt/lampp. So, copy the two below files, ssl.crt and ssl.key to the XAMPP directory.

#cp server.crt /opt/lampp/etc/ssl.crt

#cp server.key /opt/lampp/etc/ssl.key/server.key


When you are being asked to overwritten the file, just type yes and hit Enter.

7. Restart Apache and test to access your site using https://. Check the certificate and make sure the information that you have insert is correct.

8. Finish! Your configuration is done. Good luck :-)

Adapted from: http://shahpunyerblog.blogspot.com



How to add social share buttons (part 2)

No comments
In a previous post I wrote about how to have individual social share buttons on the posts. For individual buttons this works well, just click on any of the links from the previous post, follow the instructions and copy and paste the resulting html code to $config_customHTMLpost. Remember to use a \ before any '. For example for the diaspora button I used the following code:


<a href="javascript:window.open('http://sharetodiaspora.github.com/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'das','location=no,links=no,scrollbars=no,toolbar=no,width=620,height=550');"
style="padding: 3px 4px 2px; background: #fafafa; border: 1px solid #ddd; font-size: 13px; color: #222; text-decoration: none; vertical-align: top;">
<img src="https://joindiaspora.com/favicon.ico" style="border: 0px solid;" /> Diaspora*
</a>


this is also a good method to have a "follow me" twitter button in the menu.

However if one wants to include a lot of buttons, the result is going to be a mess and take a lot of time and patients to make it look in any way harmonious.

This is where JQuery comes in. There are several plugins, which I tested (because it was raining today) and here are some thoughts on them.

Jsshare
I had some real problem getting this to work properly, in in the end I gave up on the + button and slide effect and instead opted to simply display all the buttons next to "No comments". I suspect that it might work better with an older version of JQuery (1.8.3) more about how to use a different version of JQuery later.

Screenshot-1

It is very lightweight, I like the concise css, which is makes it easy to customise the look. One can simply replace the icons in the image folder and change background and border however one wants to. In this way I could make it play along nicely with the Diaspora button (the one in the end). It isn't possible to share via any of ones social media accounts (such as tweet via @yourname) and it has google buzz support, does this even still exist?

Sharrre
I like the name! This plugin might be great if you are a web-devloper and need something as customisable as possible. It was easy to add the diaspora button for example. Each social button can have an individual set up in terms of action, color, via, hashtag, count etc. If you know something about javascript, html and css and like to play around you will love it. I just ended up using one of the examples from the page. But it is a nice example.

sharrresharre2

The css is simply added to the main css file of the blog, which means faster loading time of the webpage.


Social-likes

This is by far the easiest to use one does not even need an initialization script. Customisation is difficult, though, the css file is huge and would take more time to work through than I was willing to spent, rain or no rain. I kind of managed to integrate the diaspora button, but it looks a bit clunky.

social-likessocial-likes2social-likes3

PrettySociable
It is pretty and easy to set up. Other than the pictures and background colour, I don't think there is any customisation. I like that it appears as a simple link on the page and thus does not get in the way, unless it is used, but I don't know if it is usable on mobile devices.

prettys1prettys2

It does not work with JQuery 1.9.1, so you would have to open sub.pl in a text editor, go to line 461 and change "1.9.1" to "1.8.3".





Posted on - Categories: how to


Pages: [1] [2]