SHIFT

--- Sjoerd Hooft's InFormation Technology ---

User Tools

Site Tools


Sidebar

Recently Changed Pages:

View All Pages


View All Tags


LinkedIn




WIKI Disclaimer: As with most other things on the Internet, the content on this wiki is not supported. It was contributed by me and is published “as is”. It has worked for me, and might work for you.
Also note that any view or statement expressed anywhere on this site are strictly mine and not the opinions or views of my employer.


Pages with comments

View All Comments

Action disabled: revisions
buildthissite

Build This Site

Note: This is original page on how to build and configure this site. I created a new one to Build this site II: Upgrade.

Installation and Configuration

  • Download
    • Unpack the distribution tarball and upload/copy the files to the httpdocs folder
    • Open the install.php in your browser and follow the instructions
      • Wiki name: SHIFT
      • Initial ACL policy: Public, read for everyone, write and edit for registered users only
      • Deleted the install.php
  • Configure webserver and dokuwiki
    • Use nice URLs through rewriting
      • Enable in Configuration Settings → Advanced Settings → Use Nice URLs: .htaccess
      • Modify htaccess.dist to htaccess and uncomment rewrite rules
    • Adjusted license to GNU Free Documentation License
      • Create conf/license.local.php and created license file
  • Creates the page sidebar
    • This enabled the sidebar

Additional Configuration

  • Basic Settings
    • Tagline: — Sjoerd Hooft's InFormation Technolgy —
  • Display Setting
    • Use first heading for pagenames = Always
  • Authentication Settings
    • Disable DokuWiki Actions: Register
  • Editing Settings
    • Automatically save a draft while editing: no
    • Allow embedded HTML: yes
  • Link Settings
    • Target window for external links: _blank
  • Media Settings
    • JPG compression quality (0-100): 100

Mandatory Plugins

Template Changes

Using the default template dokuwiki, I made the following changes:

  • Changes site width:
    • Added /httpdocs/lib/tpl/dokuwiki/style.local.ini and made modifications
  • Added logo, favicon and apple bookmark icon:
    • lib/tpl/dokuwiki/images/logo.png
    • lib/tpl/dokuwiki/images/favicon.ico
    • lib/tpl/dokuwiki/images/apple-touch-icon.png DONT KNOW IF THIS WORKS

Facebook Integration

I want to do a few thing with facebook. First of all, I need a facebook business page, so I can link all other facebook activity to that account. Then I want people to be able to like my page, and to do the comments through facebook. That gives me a secure way to add comments.

Note: Since I want to integrate the comments with facebook I need a facebook App. While trying to create one I found out you can't just create a new account and create an App with that. You need a verified facebook account, so the only thing I could do is do all these things with my personal account. This wasn't what I had in mind when I started this but it was the only thing I could think of.

Facebook Business Page

So first I need a facebook business page. This is how I got one:

  • Logged in with my personal facebook account
  • Go to https://www.facebook.com/pages/create.php and chose the classification:
    • Company, Organization or Institution
    • Category: Computers/Technology
    • Company Name: Getshifting (SHIFT was already taken)
    • Then agree to the terms
  • Fill in the description (IT specialist freelancer)
  • Fill in the website name (www.getshifting.com)
  • Answer these questions with yes:
    • Is Getshifting a real organization, school or government?
    • Will Getshifting be the authorized and official representation of this organization, school or government on Facebook? (This is a legally binding statement regarding the authenticity and representation of this Page.)
  • Upload the logo
  • Skip the web page name creation. Probably due to my previous attempts getshifting is already taken.
  • I also skipped the ad creation
  • And finally I chose to like the page myself. Done.

This is the facebook link: https://www.facebook.com/pages/Getshifting/132155500317679

Additional Configuration

Web Page Name

As described above, I skipped the web page name creation. However, having a web page name allows me to have an easy to memorize facebook page. So this is how I got one anyway:

  • Click on “Edit Page”
  • On the dropdown menu, click “Update Page Info”
  • Click on the “Enter a Facebook web address
  • Enter a valid username, because getshifting and getshifting.com were both not available I picked “getshiftingdotcom”

The complete url to my facebook page is now: http://www.facebook.com/getshiftingdotcom

Note that you are only once allowed to change your username.

Cover Photo

Added a cover photos displaying what I know and can do. A cover photo should be 851 pixels wide and 315 pixels tall.

Profile Picture

Added a profile picture simply displaying get-shift-ing. A profile picture should be 180 pixels wide and 180 pixels tall (so it's a square). Onbly 160px x 160px will be shown. For more information on how the cover and profile picture interact see: https://www.facebook.com/help/www/315809258465467

Facebook Application ID

Now to be able to integrate facebook comments on my website I have to create a Facebook App ID.

  • Go to https://developers.facebook.com/ and logged in with my account
  • Click on “Register Now” to register as an developer
  • Accept the terms and agreements
  • Skipped the step where you have to tell about yourself.
  • Click on the confirm button. I now got a message telling me I'm a developer now.

Now to get the Application ID. You need to create a application for that:

  • Click the “Create New App” button you get presented. If you don't see one, you probably do not have a verified user account.
  • Provide an App Name: Getshifting Comment Integration
  • Click Continue and pass the security check
Note: You'll get redirected to your app settings window and you App ID already shows

* Fill in the contact email address (sjoerd_getshifting.com)

  • Fill in the App Domain (getshifting.com)
  • Disable Sandbox Mode
  • Enable the “Website with Facebook Login” option and fill in the website url (http://www.getshifting.com)

Facebook Comment Plugin

Added this plugin to enable social comments:

Then go to the admin section and fill in the App ID from the app we just created, and the facebook ID. This is the number in the facebook link above.

Now you can use the following syntax:

{{fbc>}}
{{fbc>width=600|num=10}}
{{fbc>like=y}}

There is no “just” the like button in this plugin. So I also installed this plugin:

This uses the code

{{like>}}
{{like>url=http://www.getshifting.com/|width=100}}
{{like>url=https://www.facebook.com/pages/Getshifting/132155500317679|width=100|layout=button_count}}

The first one creates, for the one who clicked on it, a “User likes url” of the page you're on. The second one for the page you've defined The third one for your facebook page with a count!

Now there is a problem for me with this last plug-in. When you click “like”, facebook allows you to put a comment in your like. This works with an overflow, which, because the plugin is loaded in the sidebar, hides behind the main page. So this also does not work the way I want it. Eventually I went to the facebook plugins page for "like". This page allows you to create your own code, very easy with a tool, which came out like this for me:

<html>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FGetshifting%2F132155500317679&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</html>

This does exactly what I want!

LinkedIn

I created a LinkedIN account, after that you can go this page and select a button you want to have on your website, I picked one and added it in the sidebar! Nice!

Sponsoring And PayPal

As long as I don't have a sponsor I created a google ad and added the code to the sidebar.

This is how I created the Paypal donate button:

Paypal

  • Create an account with Paypal
  • Go to section for webstores
  • Click on “Donations”
  • Fill in all required information
  • Copy the code to the correct place

TODO:

  • Create a custom button (can only be a image)
  • Create a cancel payment page (advanced options)
  • Create a success payment page (advanced options)
  • Create new buttons using the above information

Considered Plugins

Other Installation and Configuration Tips +

Open Configuration

  • adwords / paypal
  • Headers in articles do not have a horizontal line under it. Makes it a little more chaotic.

Wishlist ToDo

Site Functionality

  • Have images automatically have a black line around them
    • Sometimes images have somewhat the same color as the background which makes is hard to differentiate them from each other and the background itself. It works a little bit confusing.
  • It would be nice if visitors could leave their email address for specific pages to get a notification when a page changes
    • There is a option called: 'subscribers Enable page subscription support' let's find out what it means
You could leave a comment if you were logged in.
buildthissite.txt · Last modified: 2021/09/24 00:24 (external edit)