Share self-hosted WordPress photo to Facebook

In the past I’ve either uploaded photos to Flickr or Picasa (now Google+) and had a Facebook app (RSS Graffiti) automatically post status updates to Facebook via RSS. (Of course I also posted some one-off photos directly to Facebook.) However, something went wonky recently and RSS Graffiti started posting old items to my timeline. Not good!

After researching alternatives, I finally decided to self-host my photos on SeriouslyTrival.com and write a blog post on new photo additions, which WordPress automatcally posts to Facebook.

NextGEN Gallery

I settled on NextGEN gallery, billed as “the world’s most popular WordPress gallery plugin.” Exporting from Google+ and reimporting to NextGEN was pretty easy. I had already had things grouped in albums, so I just mirrored that in NextGEN. (NOTE: If you do this, import oldest first or last least your latest photos last. This will pay dividends later since you can use that to automatically order things.)

Page and CSS mods

I modded the NextGEN compact album view a bit to shorten the photo number display. I also modded the CSS to tighten up the font and added some height to the DIVs so they flowed smoother. I hate doing that since it makes upgrading harder, but the stock result just bugged me too much.

Short Code Annoyances

I also found that NextGEN short codes don’t play well with each other. For example, if you use nggtags and nggalbum on the same page, and a visitor clicks on an image from the nggtags short code, the nggalbum short code will still be evaluated and executed. (Note: having multiple instances of the same short code does not exhibit the same problem for some reason.)

The only solution I found was to create a separate subpage for each short code used, so I have separate nggtags, nggalbum and tagcloud pages–the latter two being subpages. I added hyperlinks at the top of the pages for navigation. Not the most elegant solution, but it works for now.

Uploading and Posting from iPhone

To upload iPhone photos to the website, I use the NextGEN iOS app. It’s pretty bare-bones, but does the job. Generally, I upload to an existing gallery named after the current year. This gallery is already part of an album included on my site’s Photo pages. I like to keep miscellaneous one-off photos in this album. (Events that have many photos, like vacations or holidays, get their own gallery, and I leave to handling on a desktop PC.)

Sidebar and Slideshow

I added the NextGEN Widget to the sidebar using the Recently Added option. I also added the NextGEN slideshow widget to the sidebar for fun.

Editing Photo Tags

To edit tags, you have to use the WordPress app which is a bit cumbersome on an iPhone. This feature is blatantly missing from the NextGEN app for some unknown reason even though it says you can in the app description. It may be better to wait until you can get to a real computer and browser, or even an iPad to edit tags.

Adding Facebook Sharing using FooBox

I also purchased the FooBox WordPress plugin. FooBox mods the image display routines and does a better job at resizing. The UI is also much nicer and has a more obvious navigation UI.

The real reason I chose FooBox was it’s social site integration, specifically simple Facebook sharing from an iPhone. You will need to go through some tedious steps to generate a Facebook App ID, but its fairly well-documented. (Note: Use your site’s name for the “Display Name” and your site’s URL for the “Site URL” fields. Don’t use “GetFooBox” which is shown in the example steps.)

I popped for the $47 multi-site license since it had lifetime updates. The single site version is $27. I found a 20% discount coupon but noticed that there have been discounts as high as 45%, so it’s worth a Google search.

Process to Share an Image on Facebook

So here is my process to upload a picture to my site and then share on Facebook:

  1. Use NextGEN app to upload the photo to a gallery and edit the title
  2. Open your website in Safari browser
  3. Find the recently added photo in the sidebar and tap to open (or alternatively, find the photo by navigating through your site. Using the sidebar widget is the easiest way)
  4. Tap the Facebook share icon
  5. Add some descriptive text for your status update and post to Facebook. That’s it!

It’s actually pretty darn easy!

Conclusion

One of the added benefits is that I now have a kickass photo gallery system. Self-hosting my images also drives traffic to my site. I really hope that tag editing is added to the NextGEN iOS app soon. It’s not a showstopper, but it is annoying. I’m also looking at some way to add a comment system for photos, but FooBox may not play nice I fear.

I really like the FooBox image display, particularly on an iOS device and sharing on Facebook is drop-dead simple which was my goal.

Updates:
2013-05-19
Uploading a batch of images isn’t possible using the NextGEN app so had to resort to FTP. I found that Photogene would also scale the image prior to upload which is a real time-saver. What you have to do is create the gallery using the NextGEN app and then upload the images with Photogene. Remember that spaces in the gallery name are converted to dashes. Also, you’ll then have to go into the WordPress app and choose the Scan Folder for New Images option on the gallery. It’s a bit of a pain, but less so than uploading one by one.

2013-05-20
Make sure you enable the¬†Activate permalinks in the NextGEN options. Otherwise, you won’t get a good thumbnail in any posts you share on Facebook. Also, if you use Featured Images, I would stop. They don’t work right with NextGEN. Supposedly, it will be fixed in version 2.0. If you want a specific image to represent the post, use a full path for the file in an IMAGE tag, which can even point to a NextGEN image (e.g., http://seriouslytrivial.com/wp-content/gallery/coolpics/IMG_0001.jpg).

Posting to Facebook with a Thumbnail with an iOS Device

When you share a link using Facebook.com, it scans the page and lets you set a thumbnail image for the post. If you are on a webpage that you want to share, you can save a step if you have the Facebook Share Bookmarklet installed on your browser.

Basically, a bookmarklet is just a bookmark that executes JavaScript code instead of going to an URL. On a desktop PC browser, you can install it by just dragging the bookmarklet to your toolbar. However, it’s a little trickier to install on a mobile browser.

Fortunately this page has easy instructions on how to install the Facebook bookmarklet (and other services) on a mobile browser. Basically, you click the link for the bookmarklet you want, save as a bookmark, and then edit the URL to remove some unneeded code. It’s pretty simple.

Sharing from RSS Reader

I consume most of my Internet news from RSS feeds via Google Reader using the Reeder iPad app. Reeder’s Facebook share feature doesn’t add a thumbnail, so I use the ReadItLater service to save posts that I want to share later on Facebook. ReadItLater has a Facebook share feature, but sadly it also doesn’t add a thumbnail. As such, I would use the browser bookmarklet method. Cumbersome, but it worked.

Anyways, I just discovered the iPad app Mr. Reader and its Facebook sharing feature supports the thumbnail! Hooray! Since both are based on Google Reader, it was a painless switch from Reeder to Mr. Reader.

YouTube Video Thumbnails

For whatever reason, the thumbnail often doesn’t appear for sites that embed a YouTube video if you use the bookmarklet method. What you need to do is click on the video to open it up in YouTube. Usually, the iOS YouTube app will open since iOS doesn’t support Flash. If you tap the Share button, the app will compose an email. Change the www. to m. and just copy up to the video ID. Here’s an example: http://m.youtube.com/watch?v=8d-MTIJ7ZZQ The video will open in the mobile YouTube website and the Facebook Share button there will allow you to specify a thumbnail. It’s a little cumbersome, but not bad. Another way is to just copy the video URL as it appears, open Facebook.com in Safari, and share the link normally.

I hope this makes it easier to share things on Facebook. Have fun!