Installer SSL på dit Surftown hostede domæne

Nu hvor Facebook kræver at ens Facebook sides iframe canvas loader via SSL (fra 1.okt 2011) har jeg haft en lille øvelse for recreative.dk som skulle overgå til SSL. (dvs. HTTPS).

Surftown har naturligvis nogle udemærkede vejledninger som kan følges til de indledende øvelser. Men jeg konstaterede at det var svært at forstå hvordan “INTERMEDIATE CA” skulle installeres, mest fordi der åbenbart benyttes forskellige termer om nogle af de “keys” man får i forbindelse med bestilling / installation af SSL.

Jeg er ingen ekspert i SSL, og på den baggrund er det måske også sjovere at gå igang med opgaven – skulle der være en fejl, eller nogle tekniske termer jeg har misforstået så sig endeligt til. Hovedsagen for mig er at løsningen virker. :)
NB: Jeg har skiftet surftowns kontrolpanel SPROG ud til ENGELSK.

Sådan gjorde jeg for at installere “DNS Validated” SSL på et domæne hostet ved surftown erherv.

1: Dit domæne skal have egen IP adresse.
Dette tilbydes kun til Surftown ERHVERV kunder.
Se vejledning “Hvordan får jeg en dedikeret ip adresse”

2: Installer et temporert certifikat via surftowns kontrolpanel.
Se vejledning: Hvordan bestiller jeg SSL certifikat.
(husk at notere indholdet ned i et text dokument!)

3: På dit domæne som skal have SSL, opret email adressen “hostmaster@dit-domæne.dk”
Se vejledning: Hvordan opretter jeg en email adresse

4: Afvent at DNS for din nye IP adresse er slået igennem
– Ja der KAN gå 24 timer, så sov på det! Utålmodighed er ikke din ven. Du kan ikke fremprovokere en hurtigere løsning ved at skrive til surftown support – det er DNS servere rundt omkring i verden som også skal opdateres.
– VIGTIGT: kontroller at du kan MODTAGE email til den nye “hostmaster@dit-domæne.dk” adresse

5: Bestil dit eget certifikat
Jeg benyttede GratisDNS.dk til at bestille mit SSL (RapidSSL 2 år)
Nu hvor jeg har haft mere tid til at kigge mig omkring, ville jeg nok vælge The SSL Store som har samme varer bare billigere :)
Jeg bestilte “RapidSSL” altså UDEN Wildcard. Du skal indtaste din “hostmaster@dit-domæne.dk” som modtager af certifikatet. Og du skal bruge ØVERSTE del af den information du fik i 2 (altså den del som indeholder “BEGIN CERTIFICATE REQUEST”).
Når købs ordren er gennemført vil du modtage en email, hvor du validerer at du har købt et SSL certifikat, og at dette er din email. Herefter vil du modtage endnu en email med selve certifikatet!

6: Installer dit eget certifikat!
Og det er så her hvor Surftowns vejledning ikke stemmer – dvs følg IKKE denne vejledning: Hvordan installerer jeg mit SSL certifikat
I stedet for at følge surftowns egen vejledning (du skal IKKE disable/slette nuværende certifikat), så skal du…
a) Log på surftown kontrolpanelet.
b) Vælge “domæne Indstillinger”.
c) I domæne listens venstre side klik på pågældende domæne.
d) Udfor “SSL Support” trykker du på “Edit SSL” (på hammeren)
e) I feltet “Certificate Chain File” skal du copy/paste indholdet i “INTERMEDIATE CA” fra din email!
– husk at trykke “INSTALL”
f) I feltet for “Install Certificate based on previously generated Certificate request” copy/paster du indholdet i “Web Server CERTIFICATE” – husk at trykke “UPLOAD”

7: Verificer at certifikatet virker
– eller se hvad der mon er galt ved at benytte FairSSL.dk’s udemærkede test værktøj!
Hvis FairSSL’s værktøj viser en fejl med dit “chain” certifikat, kan du logge på RapidSSL’s hjemmeside, og få en udviddet udgave. – åben .pem filen i en tekst editor og benyt denne (som har 2 områder med krypteret indhold) i feltet beskrevet i punkt 6,e).

8: Når du har SSL installeret…
– Og hvis du benytter WordPress, så læs videre her Tips til WordPress og SSL HTTPS

Skriv kommentar

Another WordPress IE issue fixed, 404 pages not working

So Im happily putting into production a nice newsletter plugin on a customer site.
Its AJAXed, got virtual page for email-response clicks and all..

To my horror the 404 pages on the customer site are displaying non graphical, text only Internet Explorer messages on the virtual page – actually any 404 pages..

I did not detect this behavior with my local IE_Tester, only the live site with the specified browser (IE 6.something) seem’d to have this issue of not letting the 404 pages resolve. (before you moan, Its impossible to upgrade browser or try another on this customer!)

I checked the PHP settings (mod_rewrite was working fine), apache server dident have anything obscure or errors popping out…

The fix. Insert this at the very top of header.php in the WordPress theme

status_header(200);

1	status_header(200);

Tip about this obtained from http://www.newnine.com/blog/47-wordpress-404-errors-in-ie

(for those worrying that this will set quirks mode – just make sure theres no spaces before the DOCTYPE)

And this really did the trick. Now WordPress allways return a page status 200 to the browser, and the build in global $wp_query; WordPress functionality will controls the error messages as expected.

Skriv kommentar

WordPress ajax SACK dosent work for IE6

I have a big customer who uses IE6 as a platform. The last couple of days I have had my troubles working out why the described methods for doing ajax in WordPress with SACK dosent swing it..

Yes I can make it do Ajax, but having custom returnmessages (a requirement for user interaction) seems to fail on “eval(this.response)”

Yawnn..

While doing a signup for weekly digests, I have now combined various techniques to make
– a fake WordPress page – only vievable when a visitor clicks a mail response link.

– ajax the button for “confirm” or “unsubscribe” and if the clicked link dident return a known record – display form for submitting an email and “signup”
The Ajax were needed to update the database with the new status of the click, and to return a message like “thanks – blablabla..”

This is actually the second time I waste hours trying to understand why SACK dont work, If you stumble upon this, and are trying to figure out how to do AJAX and WordPress, read this brilliant tutorial: http://wpleet.com/wordpress-ajax-jquery-practice-using-shortcode

Im using it slightly differently, but that in essence is the way to do it.

Skriv kommentar

Using wordpress shortcodes anywhere

WordPress shortcodes are normally only displayed when the_content() is being fired.

You can however, if you know the shortcode and its parameters, paint it anywhere you like on your WordPress website. Its not practical to use for all plugins, as alot of them uses a referance to the post they are supposed to represent. (normaly the_content() is part of the loop).

Do this to display a shortcode anywhere on your WordPress site, this example will show the subscribe2 plugin signup form with only the “subscribe” button:

<?php
$shortcode = "[subscribe2 hide=unsubscribe]";
$content = do_shortcode( $shortcode );
echo $content;
?>

<?php

$shortcode = "[subscribe2 hide=unsubscribe]";

$content = do_shortcode( $shortcode );

echo $content;

Often you need to take care that the plugin’s shortcode can be used like this – does it depend on a post_id, does it need to return stuff to the screen after a form has been submitted and so on..

Skriv kommentar

WordPress 3 Comment formatting and styling

Content to the templatefile, in the theme directory comments.php

One “aber dabai” is that I moved the $req asterix (*) besides the label Name/Email/Website and removed the “required” span class. And the extra class can mess up the absolute position for the name, and then the asterix.

I did this becourse I like to use the jQuery infieldLabel plugin to move the input label inside the input field.

Further more, I like to use a ajax comment plugin like: ptm-ajax-comments

$fields =  array(
  'author' =&gt; '&lt;p class="comment-form-author"&gt;' . '&lt;label for="author"&gt;' . __( 'Name' . ( $req ? '*' : '' ) ) . '&lt;/label&gt; &lt;input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /&gt;' . '&lt;/p&gt;',
  'email' =&gt; '&lt;p class="comment-form-email"&gt;' . '&lt;label for="email"&gt;' . __( 'Email' . ( $req ? '*' : '' ) ) . '&lt;/label&gt; &lt;input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /&gt;' . '&lt;/p&gt;',
  'url' =&gt; '&lt;p class="comment-form-url"&gt;' . '&lt;label for="url"&gt;' . __( 'Website' . ( $req ? '*' : '' ) ) . '&lt;/label&gt; &lt;input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30"' . $aria_req . ' /&gt;' . '&lt;/p&gt;',
);

$defaults = array(
  'fields'               =&gt; apply_filters( 'comment_form_default_fields', $fields ),
  'comment_field'        =&gt; '&lt;p class="comment-form-comment"&gt;&lt;label for="comment"&gt;' . _x( 'Comment', 'noun' ) . '&lt;/label&gt;&lt;textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"&gt;&lt;/textarea&gt;&lt;/p&gt;',

  'must_log_in'          =&gt; '&lt;p class="must-log-in"&gt;' . sprintf( __( 'You must be &lt;a href="%s"&gt;logged in&lt;/a&gt; to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink($post_id) ) ) ) . '&lt;/p&gt;',
  'logged_in_as'         =&gt; '&lt;p class="logged-in-as"&gt;' . sprintf( __( 'Logged in as &lt;a href="%1$s"&gt;%2$s&lt;/a&gt;. &lt;a href="%3$s" title="Log out of this account"&gt;Log out?&lt;/a&gt;' ), admin_url('profile.php'), $user_identity, wp_logout_url( apply_filters('the_permalink', get_permalink($post_id)) ) ) . '&lt;/p&gt;',
  'comment_notes_before' =&gt; '&lt;p class="comment-notes"&gt;' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '&lt;/p&gt;',
  'comment_notes_after'  =&gt; '&lt;p class="form-allowed-tags"&gt;' . sprintf( __( 'You may use these &lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt; tags and attributes: %s' ), ' &lt;code&gt;' . allowed_tags() . '&lt;/code&gt;' ) . '&lt;/p&gt;',

  'id_form'              =&gt; 'commentform',
  'id_submit'            =&gt; 'submit',
  'title_reply'          =&gt; __( 'Leave a Comment' ),
  'title_reply_to'       =&gt; __( 'Leave a Reply to %s' ),
  'cancel_reply_link'    =&gt; __( 'Cancel reply' ),
  'label_submit'         =&gt; __( '' ),
);

comment_form($defaults);
?&gt;
&lt;ol class="commentlist"&gt; &lt;?php wp_list_comments();?&gt; &lt;/ol&gt;

$fields = array(

'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' . ( $req ? '*' : '' ) ) . '</label> <input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />' . '</p>',

'email' => '<p class="comment-form-email">' . '<label for="email">' . __( 'Email' . ( $req ? '*' : '' ) ) . '</label> <input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />' . '</p>',

'url' => '<p class="comment-form-url">' . '<label for="url">' . __( 'Website' . ( $req ? '*' : '' ) ) . '</label> <input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30"' . $aria_req . ' />' . '</p>',

);

$defaults = array(

'fields' => apply_filters( 'comment_form_default_fields', $fields ),

'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',

'must_log_in' => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink($post_id) ) ) ) . '</p>',

'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url('profile.php'), $user_identity, wp_logout_url( apply_filters('the_permalink', get_permalink($post_id)) ) ) . '</p>',

'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',

'comment_notes_after' => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',

'id_form' => 'commentform',

'id_submit' => 'submit',

'title_reply' => __( 'Leave a Comment' ),

'title_reply_to' => __( 'Leave a Reply to %s' ),

'cancel_reply_link' => __( 'Cancel reply' ),

'label_submit' => __( '' ),

);

comment_form($defaults);

Styling the commentform

div#respond {}
div#respond p.comment-form-author,
div#respond p.comment-form-email,
div#respond p.comment-form-url,
div#respond p.comment-form-comment{}
div#respond input{}
div#respond label{}
div#respond p.comment-form-author label,
div#respond p.comment-form-email label,
div#respond p.comment-form-url label,
div#respond p.comment-form-comment label{}
h3#reply-title{}
h3#reply-title small{}
form#commentform{}
p.comment-form-author{}
p.coment-form-author label{}
p.comment-form-author input#author{}
p.comment-form-email{}
p.comment-form-email label{}
p.comment-form-email input#email{}
p.comment-form-url{}
p.comment-form-url label{}
p.comment-form-url input#url{}
span.required{}
.comment-form-comment{}
p.comment-form-comment label{}
p.comment-form-comment textarea#comment{}
p.must-log-in{}
p.logged-in-as{}
p.comment-notes{}
p.form-allowed-tags{}
p.form-allowed-tags code{}
p.form-submit{}
p.form-submit input{}
#respond .form-submit input{}

div#respond {}

div#respond p.comment-form-author,

div#respond p.comment-form-email,

div#respond p.comment-form-url,

div#respond p.comment-form-comment{}

div#respond input{}

div#respond label{}

div#respond p.comment-form-author label,

div#respond p.comment-form-email label,

div#respond p.comment-form-url label,

div#respond p.comment-form-comment label{}

h3#reply-title{}

h3#reply-title small{}

form#commentform{}

p.comment-form-author{}

p.coment-form-author label{}

p.comment-form-author input#author{}

p.comment-form-email{}

p.comment-form-email label{}

p.comment-form-email input#email{}

p.comment-form-url{}

p.comment-form-url label{}

p.comment-form-url input#url{}

span.required{}

.comment-form-comment{}

p.comment-form-comment label{}

p.comment-form-comment textarea#comment{}

p.must-log-in{}

p.logged-in-as{}

p.comment-notes{}

p.form-allowed-tags{}

p.form-allowed-tags code{}

p.form-submit{}

p.form-submit input{}

#respond .form-submit input{}

Styling the commentlist:

ol.commentlist{}
ol.commentlist li.comment{}
ol.commentlist li.even, ol.commentlist li.thread-even{}
ol.commentlist li.odd, ol.commentlist li.alt{}, ol.commentlist li.thread-alt, ol.commentlist li.thread-odd{}
ol.commentlist li.comment .comment-body{}
ol.commentlist li.comment .comment-body .comment-author{}
ol.commentlist li.comment .comment-body .comment-author img.avatar{}
ol.commentlist li.comment .comment-body .comment-author cite.fn{}
ol.commentlist li.comment .comment-body .comment-author span.says{}
ol.commentlist li.comment .comment-body .comment-meta{}
ol.commentlist li.comment .comment-body .comment-meta a{}
ol.commentlist li.comment .comment-body p{} /* the comment text */
ol.commentlist li.comment .comment-body .reply{}
ol.commentlist li.comment .comment-body .reply a.comment-reply-link{}
ol.commentlist li ul.children{}
ol.commentlist li ul.children li.comment{}

ol.commentlist{}

ol.commentlist li.comment{}

ol.commentlist li.even, ol.commentlist li.thread-even{}

ol.commentlist li.odd, ol.commentlist li.alt{}, ol.commentlist li.thread-alt, ol.commentlist li.thread-odd{}

ol.commentlist li.comment .comment-body{}

ol.commentlist li.comment .comment-body .comment-author{}

ol.commentlist li.comment .comment-body .comment-author img.avatar{}

ol.commentlist li.comment .comment-body .comment-author cite.fn{}

ol.commentlist li.comment .comment-body .comment-author span.says{}

ol.commentlist li.comment .comment-body .comment-meta{}

ol.commentlist li.comment .comment-body .comment-meta a{}

ol.commentlist li.comment .comment-body p{} /* the comment text */

ol.commentlist li.comment .comment-body .reply{}

ol.commentlist li.comment .comment-body .reply a.comment-reply-link{}

ol.commentlist li ul.children{}

ol.commentlist li ul.children li.comment{}

Enjoy

Skriv kommentar

A few favorite WordPress Plugins

I do develop my own functions and plugins, but for some tasks there are really nice plugins in the WordPress repository that will do the job awsomely or better.

These are WordPress plugins that I use now and then…

Gallery

http://wordpress.org/extend/plugins/nextgen-gallery/
NextGen is a really well done, has a huge userbase and is thusfar the most throughoutly tested and used plugin for galleries. Almost all WordPress users run into this plugin at some point. I think its great but still its not the lightest on ressources for your installation.

http://wordpress.org/extend/plugins/lazyest-gallery/
A great alternative to NextGen gallery

http://wordpress.org/extend/plugins/magic-gallery/
I can see this one getting more and more support

Media Player and Viewers

http://wordpress.org/extend/plugins/shadowbox-js/
Great for displaying images and content inside modalboxes.

http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/
Awsome video plugin!

http://wordpress.org/extend/plugins/wpaudio-mp3-player/
The most smooth way of adding your own mp3 files to a post – its beautifull and effective!

http://wordpress.org/extend/plugins/soundcloud-shortcode/
Soundcloud is an online music sharing site. Soundcloud hosts your files and you can create playlists of your tracks. Then share them on your site with this easy to use plugin!

http://wordpress.org/extend/plugins/soundcloud-is-gold/
Another soundcloud.com plugin – this is really cool for setting player settings without handwriting options to control stuff like width and colors.

Social plugins

http://wordpress.org/extend/plugins/embed-facebook/
When you want to display stuff from Facebook; pictures (albums), events, group pages.

http://wordpress.org/extend/plugins/facebook-comments-for-wordpress/
Great when it comes to letting facebook users write comment on posts or pages.

http://wordpress.org/extend/plugins/share-and-follow/
Adding Share and Follow when you want a floating bar on the right side, Insert a “like” box or any other sharing platforms out there.. this plugin does the trick really well.

http://wordpress.org/extend/plugins/sharebar/
Makes it really easy to add a sharebar that follows the page down when the visitor scrolls on a long page.

Caching

http://wordpress.org/extend/plugins/hyper-cache/
I have become a fan of this plugin for its simplicity and ease of use – and for one special feature, disable caching on certain areas!

global $hyper_cache_stop; $hyper_cache_stop = true;

1	global $hyper_cache_stop; $hyper_cache_stop = true;

http://wordpress.org/extend/plugins/w3-total-cache/
W3 Total Cache is the prefered plugin when I do caching.

http://wordpress.org/extend/plugins/wp-super-cache/
Super Cache is equally good.

http://wordpress.org/extend/plugins/flexicache/
FlexiCache is a close runnerup. I like it but I still prefere W3-Total-Cache.

Backup

http://wordpress.org/extend/plugins/updraft/
Simply amazing backup plugin – I did a few tweaks to include custom tables and a dashboard notification. You can save files locally, FTP them to an offsite location and on a CDN.

User Rating

http://wordpress.org/extend/plugins/gd-star-rating/
Whenever you want to let users rate posts, pages or comments with stars, hearts or give the thumbs up!

http://wordpress.org/extend/plugins/wp-postratings/
The more simple version of a rating system, this one only for posts.

Other

http://wordpress.org/extend/plugins/skeleton-key/