This speech updates themes from my Social Collaboration for Dummies book (Wiley, 2013). Since the book was published, team messaging tools such as Slack have begun to generate much more excitement, investment, and competitive energy than the enterprise social networking platforms I was writing about at that time.
At IDG’s Digital Collaboration 2017 conference in Stockholm, I discussed this trend in the context of efforts to unify multiple modes of communication and collaboration in one platform versus the trend toward rapid proliferation of specialized workplace tools — and the opportunities to create unified experiences out of diverse tools.
Here is a rundown on the latest updates to Facebook Tab Manager. More explanation after the bullet points. I will be doing a webinar on the use of the plugin Thursday April 14, 2011 at 7 pm ET (www.anymeeting.com/davidfcarr), and a recording will be available if I can figure out how to push the right buttons.
Changes in version 2.6.2 2.6.4
Added [fblike] shortcode as an alias to [fbtab nodecode="1"]. Recommended for situations where you are wrapping a block of text and image content inside a shortcode that indicates whether it should only be shown to people who have not yet liked, or who have liked your page. Example [fblike like="0"]CONTENT TO SHOW TO NEW VISITORS[/fblike] [fblike like="1"]FAN-ONLY CONTENT[/fblike]
Update: version 2.6.4 also lets you set query parameters new=1 (links should open in a new window) head=1 (execute wp_head) and footer=1 (execute wp_footer). I think that’s about as fancy as I’d want to make it from options you can pass through the url, but I came across cases where these would be useful in my own experiments.
Users who don’t like my template can now specify their own should be used instead. Only recommended for advanced users with their own plugin/template development skills.
Better conformance with WordPress coding standards.
Here is the background. I originally set up the fbtab shortcode to cover a couple of different scenarios, one of which was a technique for including inline JavaScript like one of the snippets you might get from the Facebook Social Plugins page. The idea was to let users paste in the script snippet in the WordPress editor’s visual mode as if you were entering a code sample for display rather than execution. I’d then let the shortcode function decode any HTML entities transformations added by the editor.
The like=”0″ and like=”1″ attributes came later. It worked fine if what you wanted to include or exclude based on whether the visitor had liked your page was a JavaScript snippet or a blog listing generated using the query parameter. But what if you wanted to just include a block of content between the tags? You might have content that ought to be encoded as HTML entities, so the decode routine wouldn’t be appropriate for that and might cause problems. At some point, I added support for a decode=”0″ parameter to indicate the HTML decode should not be applied.
In an attempt to clean this up a little, I’ve added fblike as another shortcode tag you can use with all the same parameters, but it’s specifically intended to be used around snippets of regular HTML content.
Another request I got was for an easy way to turn an existing post into a Facebook tab. So now you can just add ?fb=tab as a query string added to the url for a WordPress post or page, and it will be displayed in the fbtab template. This essentially strips away the regular WordPress navigation and substitutes uses a stylesheet with smaller Facebook body and headline fonts. You can use ?fb=tab&resize=1 to get the template to include the resize JavaScript snippet.
Note that pages that include fancy layouts or large images may not translate neatly into content suitable for a Facebook page tab. But in some cases, I can see this as a reasonable way to have one piece of content you can manage through WordPress that appears on both your website and your Facebook page.
Finally, several people have found reasons why they wanted to make their own hacks to the template file. To allow them to do that without breaking compatibility with future upgrades to the plugin, I’ve added the ability to specify a file path to your own plugin that should be used as a substitute for the default.
Version 1.4 of Facebook Tab Manager is available now in the WordPress repository, with additional features for customizing the display of your content.
Apologies to those who downloaded the first day release and got a bit too much of the “beta tester” experience. I rushed it out too fast and had to immediately put out couple of bug fix releases. Despite that, Facebook Tab Manager is featured today in a tutorial on WPMU.org as an easy way of adding WordPress content to Facebook.
Version 1.4 features a couple of important enhancements, in addition to those I slipped in while I was busy fixing bugs.
One thing I discovered is that some plugins modify or append content on custom post types like my Facebook tabs (treating them as if they were regular blog posts) in ways that might not be appropriate for Facebook tab content. So I’ve added the option to selectively turn off filters. They function that removes them is embedded in the template for the fbtab content type, so it won’t interfere with the display of other content on your site.
I’ve also added an option to make links open in a new window (for example, if you’re linking to pages that won’t display well within the 520px-wide Facebook tab IFrame).
Additionally, you can enable the output of the wp_header and wp_footer functions, which may be required to invoke JavaScript or CSS output. I don’t do this by default in the fbtab template because it may result in output that’s only appropriate for display on your website, not in a tab.
Let me know if you see other things that need improvement.
I’ve been doing a number of experiments with the new Facebook page tabs, including my work on the Facebook Tab Manager for WordPress. There are a number of other great ways of adding interactive content to your Facebook pages using this technique, and two others I think have great potential are using Caspio Inc.’s online database services.
I’ve been doing some consulting for Caspio and had previously tried integrating these cloud database services using the Facebook Markup Language (FBML) technique Facebook provided for page tabs. I could never quite get it to work. Facebook previously allowed you to use IFrames – embedded HTML frames – for Facebook applications, but page tabs had to be FBML. FBML works with Facebook JavaScript standards to display content and applications, but it imposes more limitations than content viewed in a frame.
Now, Facebook is moving away from FBML, which in some ways was a subset of HTML, toward XFBML, which is more of a superset and can be used on external websites that want to offer Facebook integration as well as in IFrames on Facebook. Just last week, Facebook announced the release of IFrame support for page tabs. And my Caspio apps work just fine in that context.
Caspio is best known for Caspio Bridge, an easy-to-use visual designer for creating online databases, reports, charts, and graphs. Once you have created an application using the web-based wizards, you just copy and paste a snippet of JavaScript code to load the form or report into your web page. In other words, adding an app to your web page — and, now, your Facebook page — becomes as easy as adding a YouTube video.
For an example of a contact form build with Caspio, visit www.facebook.com/caspioinc and click the Caspio Demos tab. Sample interactive reports for job listings and real estate listings are also available.
For the example shown below, I’m using another Caspio cloud database service, ExpressDB. ExpressDB provides a simple way for web designers and HTML coders to create interactive forms without hassling over the details of programming and database setup. ExpressDB takes the input from your form and automatically creates a database to match, reliably storing whatever data you choose to capture. This has to be the absolute simplest way of creating something like a lead capture or customer contact form to add to your Facebook page.
For either a Caspio or an ExpressDB app, I recommend following the same pattern.
Create a directory on your web server for the content you want to appear on your Facebook tab.
Save the web page containing your Caspio app (the JavaScript code provided by Caspio Bridge) or your ExpressDB form as the index file for that directory.
Use a file name such as “index.php” (on Unix systems) or default.asp (Windows) where the PHP file extension indicates the file is capable of processing server-side programming code. Facebook will post some data to this page, so even if you don’t include programming code, the index file should be capable of doing so (some servers may respond with an error message if they receive an HTTP POST directed at a static HTML file).
Register the application by filling out the Facebook Developers form. For the Canvas URL variable, use http://www.mysite.com/myapp/ and for the Tab URL (which must be different) use http://www.mysite.com/myapp/index.php (or whatever the name of your index file is). In this case, both URLs will actually access the same content.
Here is how it would work with ExpressDB. First, I create a basic form:
A basic form in Dreamweaver
I log into ExpressDB and provide a name for the form. I’ve also created a custom “Thank You” page to use instead of the default, so I enter the address for that page into ExpressDB.
ExpressDB setup
ExpressDB generates an activation key for my form, which is actually the opening <form> tag, coded to point to the expressdb.com service with an AppKey parameter for my new database.
Adding the ExpressDB form action tag
I save this on my server as /fbsurvey/index.php and log into the developer’s page on Facebook to register my application.
Facebook parameters
These parameters mean that my survey will be available on Facebook at apps.facebook.com/carr-survey/ but I can also add it to any page as a tab that will be labeled Survey. After saving your work, visit the Application Profile Page Facebook creates, and you will see Add to my Page as one of the links on the left hand side.
Here is the survey on my Facebook business page:
The app on my page
And here is the Thank You message displayed after I click submit:
Thank you page
Finally, here is the same content displayed as a stand-alone app (with a little more screen real estate).
Viewed as an app
The file naming scheme I recommended here is offered for the sake of simplicity. You could also have the content available at the app, or canvas, URL be different from what you show on the tab. In fact, I think that’s what Facebook is expecting you to do. In that case you would make your app content the index.php file and make the tab content myapp.php or whatever.
That’s essentially what I did to create the Caspio app and page tab, where the canvas URL points to a page that displays several Caspio apps, some of which require a wider frame, and the page tab URL points to a version that includes just a contact form example (which happens to fit neatly with in the page tab frame).
The width of your content is definitely one of the things you have to plan your apps around. A Facebook page tab is currently specified as maximum width 520px, and you also want to allow for some padding around the edges. A Facebook canvas page is 760px, but you might want to aim for 740px if you don’t want scroll bars displayed.
Getting it right takes some experimentation, but when it works, it works great.
I’ve been doing a bunch of experiments with the new Facebook iframe page tabs and have cooked up a Facebook Tab Manager plugin for WordPress, which works pretty well. This plugin lets you compose and edit content for your a tab to appear on your Facebook business page (or campaign page or nonprofit page) from within WordPress. I use custom post types to treat Facebook tabs a just another kind of post, and the content can be integrated with other plugins using WordPress Shortcodes.
The content is displayed in a very simple template with none of your site’s normal navigation, etc. That makes it easier to make it fit into a Facebook layout. I provide some default styles, but you can also add custom CSS on a per post (or per tab) basis.
As part of some promotional work I’ve been doing with cloud database company Caspio Inc., I’ve also created custom tabs you can see on the Caspio Facebook page and ExpressDB Facebook page. These demonstrate how data entry forms and database reports from Caspio’s online database products can be embedded in a Facebook page.
Overall, I’m finding that these iframe based tabs are much easier to work with. Previously, page tags had to be coded in FBML (the Facebook Markup Language). Now Facebook is phasing out FBML in favor of XFBML, a version of the language you can embed in any web page, which works in combination with the Facebook JavaScript SDK. XFBML can also be used within an iframe page.
Using the full set of Facebook APIs, it’s possible to do much fancier things than I’ve attempted so far. But I’m happy to see that I can also do relatively simple things easily.
Here are a few tips I prepared for a career workshop, after it became clear that many of the out of work (excuse me, “in transition”) professionals in attendance had little idea of how to use LinkedIn or Facebook, or how the two services were different. Suddenly, I felt an irresistible urge to pontificate.
LinkedIn
Use LinkedIn as your professional social media page. Create a complete profile, mirroring your resume (but adapted to the web format). Include relevant links.
Make sure you enable the public profile. Consider including the link to that profile in your email signature and on business cards / contact cards.
Give recommendations to colleagues bosses (particularly those you genuinely like / respect) and they are likely to recommend you back.
Join groups that reflect your professional affiliations. This can be a source of new contacts. Many of these groups have their own job boards. Post thoughts and observations and comment on other peoples’ posts. Showcase your knowledge professionalism.
The free LinkedIn account allows you ask your professional contacts to connect with you through the service. You can upload addresses from your email program to automate some of that. But part of the point is to grow your network by getting introductions to people who are connected to your contacts.
An upgraded account allows you to shortcut the introduction process, but don’t consider upgrading until you have mastered the basics with a free account.
Facebook
Not professionally focused, like LinkedIn, but there may be people you can reach through Facebook who aren’t active LinkedIn users.
To set an address that you can put on business cards or in an email, go to www.facebook.com/username
(Note: I personally like to limit my Facebook friends to people I have some actual social or community connection to, whereas on LinkedIn I’m more aggressive about building a wider network of professional contacts in IT, marketing, media, and technology. I may ignore your friend request if I don’t recognize your name.)
If using this as a job hunting tool, avoid posting anything that might reflect poorly on you. Employers are checking these profiles to see who is spending all their nights on sex and drugs and rock and roll.
Twitter
A little more difficult for the uninitiated. Twitter revolves entirely around short “status” posts of 140 characters or less. Posts are often cluttered by codes like “Ran into @davidfcarr last night, thinks he’s an expert on online #careers #jobhunt LOL”
Translation: @davidfcarr is a reference to another twitter user, #careers is a keyword and LOL is short for laughing out loud.
Again, you may reach people on Twitter who aren’t on Facebook or LinkedIn.
Email was the original Internet killer app, as significant as the web to drawing people online. But people often don’t use it effectively.
A few key points:
Use a clear subject, specific line. Not “Hello” or “Follow up” but “Application for Lowes Sales Manager Position” or “Follow up on interview for Lowes Sales Manager Position”
Identify yourself clearly. Make sure your email program is set to include your name, not just your email address in the “From” field. Recipients should know who you are and why they should open your email from the “From” and “Subject” lines alone. You have to stand out from the spam!
Provide complete contact information, including a link to your LinkedIn page, at the bottom of every message. The easiest way to do this is to set your email program to insert this automatically as an “email signature.”
Here is what that looks like on the Settings screen in Gmail:
There many more subtle details about how to use these Internet communications methods, but my goal here was just to share a few of the essential details.
Thanks to the Coral Springs Chamber of Commerce for hosting my workshop, “Is the Web Working for You?” (Workshop Slides). We got just enough people to fill the conference room at the chamber offices, and they seemed to be interested and engaged in what I had to tell them.
Biggest point of confusion seemed to be over the purpose of social networks, particularly Twitter. I’ll have to post some follow up thoughts here about strategies for what social networks to join and how to use them.
I’d also welcome follow up questions from attendees or anyone else who may read this. Knowing your questions is really useful as I look for topics to address in my Forbes.com column on small to midsize business IT issues.
You must be logged in to post a comment.