[How-To] Share your Facebook Photos on WordPress Blog

Facebook has become the place of interest for internet users to hang around, play games, network, share photos and more. It’s quite a common trend that everyone uploads their pictures on Facebook. If you are willing to show those photos on your WordPress powered blog, this is the right tutorial for you. :-)

Get the Plugin

We will be using a plugin to implement the feature on the blog. Fotobook is a WordPress plugin that will link to your Facebook account and import all of your photo albums into a page on your WordPress installation. It makes use of Facebook’s API so importing your photos is a breeze.
You can download the plugin here

Configure the plugin

Install the plugin from the admin section. and activate the plugin.
Once you activate the plugin, you can see something like in the following screenshot.

Link to fotobook settings

Click on the link and you’ll be taken to the Fotobook Settings page.

Fotobook Settings Page

Step 1: Authenticate

This step asks you to login to your Facebook account. This is the step by which you allow the plugin to access your account and fetch the images and publish to your blog. Clicking on the link opens a pop-up window as below. Enter your login credentials and click the login button.

This will take you to the next step, that is grant access.

After this step, you may close the pop-up window and proceed to the step 2.
Step 2 : Get Permissions
This step asks you to grant access for your photos and videos associated with your Facebook account.
Once you allow the Fotobook plugin to do so, you can close the window and proceed to the next step.
Step 3: Apply Permissions
By clicking this, you apply all the steps done before and save the settings. Once you click Apply Permissions your Facebook account will be added and you can see something like below.

 

Import Photos to blog

This will take you to the next step which is shown below.

Clicking on Get Albums will fetch from your Facebook account and list all the albums related to your account. By this time, the plugin have created the exact replica of albums on your Facebook account. You can even hide the albums if you don’t want to show that specific album by clicking the hide link.

That’s it, you are done. You can now access the albums at http://yourblogdomain/photos
The plugin also allows you to display photos in 3 styles.

  1. Color box.
  2. Embedded.
  3. Lightbox.


Select the style and you are all set. Do drop in your comments.

Add Pagination to your WordPress Blog without Plugin!

Previously I gave you guys a tutorial about how to add a featured post section to your WordPress Blog.
This time I’ll be giving you yet another tutorial in which you can add a pagination to your WordPress blog without any plugin.
If you want to see a live demo click here

Steps

1. Configuring functions.php.

Add the following code to the theme file functions.php at the end unless you know where to add the code.

function dw_paginate() {
		global $paged;
		$on_page = intval($paged);
		$no_prev = false;
		$no_next = false;
		if ($on_page == 0) {
			$on_page = 1;
		}
		global $wp_the_query;
		$max_pages = $wp_the_query->max_num_pages;
		$start_pos = $on_page - 2;
		if ($start_pos <=  0) {
			$amt_from_zero = ($start_pos * $start_pos) + 1;
			$start_pos = 1;
		}
		$end_pos = $on_page + 2;
		if ($end_pos >= $max_pages) {
			$amt_from_end = $end_pos - $max_pages;
			$end_pos = $max_pages;
		}
		if (isset( $amt_from_zero ) && isset( $amt_from_end )) {		}
		elseif(isset( $amt_from_zero )) {
			$end_pos = $end_pos + $amt_from_zero;
			if ($end_pos >= $max_pages) {
				$end_pos = $max_pages;
			}
		}
		elseif(isset( $amt_from_end )) {
			$start_pos = $start_pos - $amt_from_end;
			if ($start_pos <=  0) {
				$start_pos = 1;
			}
		}
		if (($on_page - 1) <= 0) $no_prev = true;
		if (($on_page + 1) > $max_pages) $no_next = true;
		$links_to_print = ($end_pos - $start_pos) + 1;
		echo '

' . "n";
	}


Now the code is added. So next up is to design how it looks.

2. Styling the output.

The following is the screenshot how it will be looking for the CSS code I’m going to give you. Basically the colour scheme was made as to suit Deepak’s blog MobileGyaan as I designed the current theme for his blog :D .
Pagination Style

#pagination{clear:both;padding:15px;text-align:center;font-size:12px;font-weight:bold;color:#999;margin:10px auto 10px auto;}
#pagination li{margin:0 1px 0 1px;display:inline;list-style-type:none;}
#pagination li a{padding:5px 7px 5px 7px;color:#3399CC;border:1px solid #CCC;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination li a:hover{text-decoration:none;padding:5px 7px 5px 7px;color:#0066cc;border:1px solid #0066CC;background:#Daf2fc;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .active a{background:#3399CC;color:#FFF;border:1px solid #0364ae;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .extreme a{border:0;color:#3399CC;font-size:14px;}
#pagination .extreme a:hover{border:0;color:#3399CC;font-size:14px;background:#FFF;}
#pagination .active a:hover{background:#3399CC;color:#FFF;border:1px solid #0364ae;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .inactive{color:#CCC;padding:5px 7px 5px 7px;border:1px solid #EEE;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}


 

3. Usage

The function that we are going to use to display the page numbers instead of Next or Previous entries is
Function
This can be used in theme files such as

  • home.php (if exists)
  • index.php
  • archives.php
  • category.php (if exists)

Now everything is complete. If you have any queries regarding this trick use the comment form below. :)

How to add a Featured Post section to your WordPress Blog?

In this post I’ll be giving a small but efficient tutorial to add a Featured Post to your WordPress Blog. There are a lot of posts available over different sites and here I’ll explain how to do it with ease..!!

Image of featured post section at Devils Workshop

Now, you have to edit 3 files of your currently used theme to set this up:

  • Functions.php
  • Style.css (stylesheet)
  • Home.php (home page template)

1. Editing Functions.php

Open the functions.php file of your template and just add the code given in following file to it and save it.

CLICK HERE TO GET THE CODE

NB: You may add this at the first line or last line if you dont know where to add.

2.Editing Style.css

Open the stylesheet file in the themes folder and add the following codes to it.

#featured {
float:left;
background:#f1f1f1;
margin:5px 10px;
}
#featured_title {
float: left;
width: 125px;
font-size: 120%;
font-weight: bold;
padding: 15px 10px;
}
#featured_content {
float:left;
width: 445px;
padding: 0px 10px 10px 10px;
text-align: justify;
}

Now, the next task is to add a code to the home page such that it shows your featured post.
Your theme may sometimes have a seperate home page(home.php) file or some times an index(index.php) file which is used to show the individual post as well as the home page.
If your theme donot have any home.php file you have to create it. Just copy paste the entire content in index.php and save this as home.php.

Now refer to the following screenshot and add the code just where it is in screenshot.
This is the code that you need to add.
code to be added to home.php

Screenshot

Screenshot

The basic things are done.

How does it work?

Once you are done with this, add a category called FEATURED. Be sure that the spelling is the same as it works on this.
Now head to add-post section and write an article that has to be posted. If it is a featured post mark the category as FEATURED and publish it.

Now, this is done. If you have queries do ask in the comment section here. :)


[Editor’s Note: This post is submitted by our guest blogger Arjun S Kumar.

If you, too would like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]

Beware! Orkut Hackers Sending Fake eMails!

Beware all Orkut users! Now hackers are sending friend request emails that look similar to any genuine Orkut email. Below are screen shots of emails sent by hackers:

orkut-fake-mail

orkut-original-mail

At first, you might find similarities in both the emails, but on a closer observation, I found that all the links in that mail that came to me are redirected to the following address

http://www.l0gm3.h4ck3r.in/orkut/ServiceLogin.php?id=66

Initially, I didn’t look for anything and just clicked on that link in the email and even typed my Login details in the fields. That is when I remembered that I had saved my Password and Username for Orkut in my Firefox Browser. I saw the URL and I was shocked to see it.

URL

Now, how does this work?

Basically, hacking using fake Login pages is called as Phishing…

  • When you click on sign in, the Login form will go to another file. In this case the file name is process.php
  • Now this process.php file will contain the code in the below image.
    PHP-code
    Now the highlighted FILENAME.TXT file’s name can be anything that can be kept as a secret.
  • The FILENAME.TXT file stores the Username and Password entered into the fields of the fake Login page

Please be careful while logging into Orkut account. Just TRIPLE CHECK the URL if you see an Orkut Login page that you have not TYPED yourself in the in the address bar :-)

Still, I’m doing research on this site to crack out what that .txt filename is..!! :-P

Get a WordPress Blog Without Any Paid Domain!

Most if us agree that WordPress is the best blogging platform. But to enjoy complete power of wordpress, you should host it on your own. For hosting a WordPress blog you need a good hosting service with PHP and SQL database enabled.  I prefer 000WebHost. So let’s get started with a 5 minute installation

  • Register with 000WebHost
  • Download the latest stable version of WordPress. I prefer you to use the link given here because I had made some changes (deleted unnecessary files).
  • Now create a SQL database and an user and choose your password from your hosting server.
  • Extract the contents to a folder and open wp-config-sample.php in the notepad.

wordpress-database

  • Edit the marked places(4 areas) with your database details.
  • Now save the file as wp-config.php. Dont over write wp-config-sample.php.
  • Now upload the downloaded .zip file to the server and unzip it.
  • Now upload the wp-config.php file.
  • Now, run the file “http://your-site-address/wp-admin/install.php”
  • Now you will receive your admin username and password.

Now the whole process is finished. So start blogging and install your favorite themes and plugins… :-)

If you have any queries use the comment form. Enjoy… :-)

Links : Sign Up with 000WebHost | Download WordPress

Related: Best Free and Paid Web Hosting Service

Christmas Glitters for Orkut Scraps

You can use following Christmas glitters to wish few special friends in special way for sure…

Merry Christmas… :-)

christmas-1

christmas-2

christmas-3

christmas-5

christmas-6

christmas-7

christmas-8

christmas-9

christmas-10

christmas-11

Page Navigation Hack for Blogger (Blogspot)

Most of the people think that page navigation hack is only for who blogs at WordPress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot.

You can see live demo here.

Now this involves two things – adding some CSS code and javascript code to your template. All steps are explained below.

Steps:

  • Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
  • Search for line ]]></b:skin>
  • Add CSS in this file above that line.
  • Now search for this code or related in your template (no need to expand widgets)
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>

Mods:

In javascript codes in this file, find line…

var pageCount =5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

var displayPageNum = 3;

Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.

That’s it now we have added Page Navigation menu hack to our blog successfully

Your Comments are appreciated..  :-)

(Credits: Muhammed from RTW)

Related: 6 WordPress Plugins for Better Navigation and User Experience


[Editor Note: This is first post by Arjun Kumar on this blog. Arjun is just 16 year old and that make him youngest Devil in team DW. He is working hard on our new project OrkutBuddy, dedicated for orkut users.

If you like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]