Category: WordPress

WordPress Multisite and Domain Mapping on 1and1.com Shared Hosting

These are just some notes about how I got WordPress Multisite and Domain Mapping running on a 1and1.com shared hosting account.

WordPress Multisite Setup

  1. Follow instructions on this page: WordPress Codex – Create a Network
  2. If you are planning to map independent domains to the various sites on your network, I recommend using the sub-directories for addresses of network sites. As far as I know, wildcard DNS isn’t an option on 1and1.com shared hosting packages.
  3. Ignore the bit about the WordPress files needing to be installed in the root directory/folder of your hosting file-space. It merely needs to be in the root folder of whatever directory/folder your primary network domain name is assigned to.

WordPress MU Domain Mapping – Installation

  1. Install the WordPress MU Domain Mapping plugin in the usual way.
  2. Once the plugin is installed, some manual configuration is necessary. Follow instructions here: wordpress-mu-domain-mapping/installation/

WordPress MU Domain Mapping – Map Domain Name to Network Site

  1. Create new network-child site (examplenetwork.com/newsite)
  2. Log in to 1and1.com admin > Domains
  3. Click the checkbox of domain name (mynewsite.com) > Destination > Edit Destination
  4. Set “Destination” to “Home Directory”
  5. Set “Home Directory” to the root folder of the network site “/examplenetwork/”
  6. Click OK
  7. Return to examplenetwork.com/wp-admin
  8. Go to the top navigation “My Sites” > “Network Admin” > “Dashboard”
  9. Go to “Settings” > “Domain Mapping”
  10. Set “Server CNAME domain” to “examplenetwork.com”
  11. Under “Domain Options” check
    • Remote Login
    • Permanent Redirect
    • User Domain Mapping Page
    • Redirect administration pages to site’s original domain
  12. Click SAVE
  13. Go to “Sites” > “All Sites”
  14. Hover on “/newsite/” and click “Dashboard”
  15. Go to “Tools” > “Domain Mapping”
  16. Under “Add New Domain” enter “mynewsite.com”
  17. Check “Primary domain for this blog”
  18. Click ADD

NOW SIT BACK AND PATIENTLY WAIT TO SEE IF IT WORKS

Individual Facebook Like Buttons for Images with NextGEN Gallery

Because I think this is probably of interest to some people but I don’t have a lot of ambition to write about it, I will present these instructions as concisely as possible:

  1. Have a WordPress website up and running
  2. Install the NextGen Gallery plugin
  3. Install FancyBox the old fashioned way or as a plugin
  4. Read this post about Facebook Open Graph WordPress Integration to learn about adding proper Open Graph meta elements to the header of your site.
  5. From your WordPress admin pages go to Gallery > Options > Effects
    1. JavaScript Thumbnail Effect: Custom
    2. Link code line: rel=”gallery”
  6. Then go to Gallery > Options > General Options
    1. Activate Permalinks: YES and define a slug.
  7. Then go to Gallery > Options > Gallery
    1. Show ImageBrowser: YES

The trick with getting NextGEN Gallery to both display your image galleries large images as FancyBox overlays and create unique pages with URLs to display each individual image is to enable the ImageBrowser mode but then alter NextGEN Gallery.php template so that the FancyBox (or other overlay solution) code is used regardless of the “Show ImageBrowser” setting.

With the above settings in place, backup a copy of the NextGEN gallery plugin files from your web server.

/wp-content/plugins/nextgen-gallery/

Then navigate to following file and open it with your favorite text editor.

[YourDesktop or wherever]/nextgen-gallery/view/gallery.php

Scroll down to the part where it says “Thumbnails” in comments. This is the loop that outputs the thumbnail grid that displays your embedded NGG gallery on the page. Find the line below:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>"
<?php echo $image->thumbcode ?> >

and change it to:

<a href="<?php echo $image->imageURL ?>" title="&lt;div style=&quot;float:left;
width:70px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOUAPPIDNUMBERHERE&amp;amp;href=<?php echo urlencode(get_permalink()) ?>%2F
YOURGALLERYSLUGHERE%2Fimage%2F<?php echo urlencode($image->image_slug) ?>&amp;amp;
send=false&amp;amp;layout=box_count&amp;amp;width=50&amp;amp;show_faces=true&amp;amp;
action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=60&quot; scrolling=
&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;
width:70px; height:60px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;" <?php echo $image->thumbcode ?>  rel="gallery">

Save gallery.php and upload to your webserver. If you have the OpenGraph meta elements in place you should now be able to navigate to a NextGEN Gallery on your site, click on a thumbnail and see something like this (right):

This is an individual Like button, allowing your visitors to “Like” specific images within a gallery. Now, it doesn’t work perfectly. Even though you are linking the Like button to a URL that is specific to that image, in my experience Facebook still grabs the first image from that gallery for the thumbnail displayed on the individual’s Facebook Wall. And it seems like the link from Facebook will take visitors to the gallery page of the specific image. Again, this is odd and shouldn’t be, but Facebook is doing a lot of magic here, so who knows why it isn’t working perfectly. The important thing is:

  1. Your visitors can Like individual images.
  2. If visitors see a link to your image on Facebook, clicking the link will take them to the gallery that contains the image in question.

If you get this successfully working to fulfill your needs, be sure to keep a backup of your gallery.php file. Every time the NextGen Gallery plugin is updated this file will most likely get overwritten.