Green ComplexPHP | Green Complex http://green.cx Fri, 23 Dec 2011 17:12:36 +0000 en hourly 1 http://wordpress.org/?v=3.3 Add Thumbnails to FB Recommend Social Plugin http://green.cx/guides/add-thumbnails-to-facebook-recommend-social-plugin/ http://green.cx/guides/add-thumbnails-to-facebook-recommend-social-plugin/#comments Wed, 02 Jun 2010 04:30:50 +0000 +Jason http://green.cx/?p=1605
Adding icons from your wordpress posts to the Facbook recommend widget is really easy. Adding thumbnails to the facebook recommend or like widget in wordpress is super easy if you already use a custom field to store the thumbnail location for each post. This is a great way to add thumbnails and can really make your website stand [...]]]>

Adding icons from your wordpress posts to the Facbook recommend widget is really easy.

Thumbnails on the Facebook Recommend Social Widget

Adding thumbnails to the facebook recommend
or like widget in wordpress is super easy if you
already use a custom field to store the
thumbnail location for each post.

This is a great way to add thumbnails and can really
make your website stand out on facebook.
You can look at the live example on my website,
on the right where my widget is or
on the screenshot on the left.

See all the icons right there in the feed?
It’s actually really easy with wordpress!

Ok, lets get started:

Start by pasting this code in your header.php
file that is found in your theme’s folder.

Inside the <head> section somewhere,
preferably at the top in header.php.
(*Note this code may need some Modification for your specific theme*)

<? // META FOR FAILBOOK ?>
<meta property="og:title" content="<? if (is_single()){?><? wp_title('');?>|Custom Tagline<? } ?>"/>
<meta property="og:site_name" content="Green Complex"/>
<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
<meta property="og:image" content="<?php echo $thumb ?>"/>

Make sure to make any changes you need in the bold sections to tweak it just right!

For those webmasters who want to know what’s going on, I’ll walk with you line by line. :D 

    

  1. <? // META FOR FAILBOOK ?>
-This is just a comment, good code is always commented
    2. 

  2. <meta property="og:title" content="<? if (is_single()){?><? wp_title('');
                                              ?>|Custom Tagline <? }?>"/>
-This Line checks if the page is a post, and if so, it takes the name of the
post and sets that as the meta tag og:title, which is where facebook gets
the page title from (Don't know why the real title tag wasn't good enough)
A Custom Tagline is optional and you could add a little tag line to the
end of every status update like - lol or something.
    3. 

  3. <meta property="og:site_name" content="Green Complex"/>
-This line sets the site name. The user's status will now
say Jason likes (titleofpost) on Green Complex.
    4. 

  4. <?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
-And here we grab the image link from the posts custom field.
 Where it says 'thumb' you will want to change to whatever custom field
you use for your post images like 'image' 'large' or 'thumbnail'
    5. 

  5. <meta property="og:image" content="<?php echo $thumb ?"/>
-Then we take the custom image url at return it in the
 meta tag for facebook to pick up, and add to the recommend widget.
 (It should return something like http://site.com/image.jpg)
    6.

And that’s it in a nutshell! Adding the images will customize the like experience a bit more for the user

and increase the chance that other readers will check out other stories on your site too. Great stuff!

If this post is a little rough forgive me, I’m still settling in to my new site design!

]]> http://green.cx/guides/add-thumbnails-to-facebook-recommend-social-plugin/feed/ 5 XAMPP Portable Webserver http://green.cx/software/free-software/web-dev-web/ http://green.cx/software/free-software/web-dev-web/#comments Sat, 06 Feb 2010 11:30:41 +0000 +Jason http://green.cx/?p=885
Web Dev Without the Web: Or how to create your own local server for building and testing websites. The nice guys over at Apache Friends have made it easy to get your own webserver up in no time! Just goto http://www.apachefriends.org/en/xampp.html and grab the file you need for your type of computer (Windows, Linux, or even [...]]]>

Web Dev Without the Web: Or how to create your own local server for building and testing websites.

XAMPP - Rocks!

The nice guys over at Apache Friends have made it easy to get your own webserver up in no time! Just goto http://www.apachefriends.org/en/xampp.html and grab the file you need for your type of computer (Windows, Linux, or even Mac) and run 1 application that fires up a real Perl/PHP environment,MySQL Database, and Apache HTTP daemon ALL IN ONE!

Requirements and features

XAMPP requires only one exe file to be downloaded and run, and little or no configuration of the various components that make up the web server is required. XAMPP is regularly updated to incorporate the latest releases of Apache/MySQL/PHPand Perl. It also comes with a number of other modules including OpenSSL and phpMyAdmin.

Installing XAMPP takes less time than installing each of its components separately. Self-contained, multiple instances of XAMPP can exist on a single computer, and any given instance can be copied from one computer to another.

It is offered in both a full, standard version and a smaller version (known as XAMPP Lite). Add-on extension modules also are available for free.

What’s it for?

Officially, XAMPP’s designers intended it for use only as a development tool, to allow website designers and programmers to test their work on their own computers without any access to the Internet. To make this as easy as possible, many important security features are disabled by default. In practice, however, XAMPP is sometimes used to actually serve web pages on the web. A special tool is provided to password-protect the most important parts of the package.

XAMPP also provides support for creating and editing databases in MySQL and SQLite among others.

GRAB IT HERE:

http://sourceforge.net/projects/xampp/

]]> http://green.cx/software/free-software/web-dev-web/feed/ 0 Web 2.0 Navigation Crash Course http://green.cx/web-resources/web-dev-resources/web-20-navigation-crash/ http://green.cx/web-resources/web-dev-resources/web-20-navigation-crash/#comments Wed, 05 Aug 2009 05:38:26 +0000 +Jason http://green.cx/?p=219
This is a beginners guide to creating a site-wide navigation that is consistent from page to page. Tired of keeping track of multiple Menu’s on different pages? As your site grows, adding 1 new page to 25 other pages’ navigation can become a full time job. I’ll show you how easy it really is to make a single navigation [...]]]>

HTML-DYNAMIC DRIVE NAV SAMPLEThis is a beginners guide to creating a site-wide navigation that is consistent from page to page.

Tired of keeping track of multiple Menu’s on different pages? As your site grows, adding 1 new page to 25 other pages’ navigation can become a full time job. I’ll show you how easy it really is to make a single navigation that will save you time and headaches!

For this you’ll need:

  1. Guts
  2. A little understanding of HTML CSS and PHP (Not Really)
  3. Notepad++ (Or any HTML editor)
  4. A copy of DDtabmenu From Dynamic Drive (This file)

1. Let’s start off with the code you’ll need. The Three Parts are:

A. The CSS include, paste this in the header of your html.

<link rel="stylesheet" type="text/css" href="/solidblocksmenu.css">

B. The Javascript Magic,  paste this near the top of your html.

<script type="text/javascript" src="/ddtabmenu.js"></script>
<script type="text/javascript">ddtabmenu.definemenu("ddtabs1", auto)
</script>

To make adjustments, you can change the tab_menu_id to whatever HTML id your using for your menu, and the number after the comma will select which link is highlighted.
SYNTAX: ddtabmenu.definemenu(“tab_menu_id”, integer OR “auto”)
//initialize Tab Menu with ID “ddtabs1″ and select 1st tab by default

C. The HTML for the Links

<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>

D. The HTML for the Subtitles

<DIV class="tabcontainer">

<div id="sc1" class="tabcontent">Sub contents here</div>
<div id="sc2" class="tabcontent">Sub contents here</div>
<div id="sc3" class="tabcontent">Sub contents here</div>

</DIV>

2. Now The Required files you need on your server

Download this file and extract the contents to the root of your webserver, using a FTP client like FileZilla.

And, Volia! You should have a nice HTML/CSS Navigation on your site, but you don’t want to copy/paste this to EVERY page on your site right?
What if you needed to change a link or fix a typo? That would be a LOT of editing for a site with more than a hand full  of pages.

So we get around that using a simple PHP include file.

Woah! Don’t get nervous, this is actually really easy, just keep following along!

Now making that nice flashy menu and making it a PHP include is really quite easy.

First off I feel the need to make it clear, your server needs to support PHP. (Of course)

Start off Coping the HTML code for the MENU and the Subtitles, into a new document, named nav.inc

nav.inc Contents

<div id="ddtabs1">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>
<DIV>
<div id="sc1">Sub contents here</div>
<div id="sc2">Sub contents here</div>
<div id="sc3">Sub contents here</div>
</DIV>

Now rename your index.html file to index.php

Keep the CSS and Javascript in the header as per usual.

But where the Menu was located, replace it with this code.

<?php
include ("/nav.inc");
?>

That should put the contents of the navigation include file whenever this line is called. But notice! It will only work when the index (or any file on the server) ends with .php

Give it a try!

]]> http://green.cx/web-resources/web-dev-resources/web-20-navigation-crash/feed/ 0