•  

How to Create and Add Custom iFrame Tab to Facebook Page

Posted by Ching Ya | Posted in Facebook, How To, Social Media Tool, Social Networking | Posted on 28-03-2011

7

[UPDATED 25/12/2011] If you want to Insert your external Web Page as one of your Page tabs, now this can be done easily with ready–made custom iframe apps. This will also solve the Secure Hosting requirement for your custom apps to display properly in ‘secure browsing’ on Facebook.

Below method is ONLY useful for those who wish to create iframe application for other Facebook users to add to their Facebook Pages:

It has been almost two weeks since the official launch of iframe app, replacing the good old static FBML tabs on our facebook pages. For those who aren’t sure what is an iframe, basically it is a standard HTML tag to enable a HTML document to be inserted into another HTML page. The benefit of iframes over FBML is that it accepts a wide range of web coding (Javascript, CSS etc) that used to be non-compatible in static FBML to create dynamic content for our custom tabs. Best of all, you can even import your custom made web page to be included in your fan page! Imagine how convenient that would be for your promotional effort!

Since no more NEW static fbml applications can be added to our managed pages, it’s important to know exactly how to work from creating the app to adding it to your facebook page successfully. I will try to be as thorough as I manage:

How to Create and Add Custom iFrame Tab to Facebook Page


Firstly, you need to prepare a html page to be inserted into your facebook page. You may use Dreamweaver for the job and upload the html file to your web server so to be pulled into your fan page later. Or, we can do this the easy way with less complication via a wordpress plugin named Facebook Tab Manager. What I love about this tab editor is that it saves time and keeps the custom tab size limit of 520px wide so no resizing is needed afterward.

Add Facebook Tab Manager to your WordPress Blog


1.  Login to your blog and add Facebook Tab Manager to your plugins.

2.  Activate it and look for ‘Facebook Tabs’ at your sidebar -> click ‘Add New’. Notice that to create the iframe tab content is as easy as how you normally write a new post.

create iframe content with facebook tab manager

3.  When done, hit ‘publish’. New instructions will appear at the bottom of the post on configurations to register your content on facebook:

configuration for facebook integration tab


Customize Facebook Tab with iframe App


4.  Go to Facebook Developer and start setting up your new iframe app.

create iframe app for your facebook page at developer page

[UPDATED Image: 25/12/2011]

create new app on facebook developers

[END]

Note:

Some of you who are creating your facebook application for the first time, verification process may be required. If you had already verified your facebook account before this, you can bypass this step. Otherwise, you need to go ahead and select to verify your account with mobile phone or credit card. Or, if you are not comfortable with this step, add an admin who is already done the verification to work on the new iframe application.

5.  The ‘About’ section consists of some necessary fields besides filling in your app name. Add image to your icon and logo so it’s recognizable.

basic information for your iframe app

[UPDATED Image 25/12/2011]

Edit your app icon: Settings -> Basic -> Edit icon:

edit icon for your iframe app

[END]

Tips: Why icon/logo image is important?

‘Icon’ image will show up next to your app name when added as a new tab to your facebook page. ‘Logo’ image will appear in app directory, for example:  you can have a look at your ‘Edit Page -> App after you added it to your page :

app logo for your iframe app

6.  At ‘Facebook Integration’ section is where all the hard work landed. Here are some important fields that required to be filled correctly:

In Canvas Section:

  • Canvas Page – the base URL of your application on facebook.
  • Canvas URL – this is the URL where facebook pulls in your iframe content.
  • Secure Canvas URL – the secure version of Canvas URL with ‘https’. Basically the same info you entered in your ‘Canvas URL’.

Complicated? No worries. Refer back to step #3 above and locate the ‘Facebook Integration Tab’ in your blog and copy/paste the links given to you, for example:

Canvas URL and Tab URL given by your facebook tab manager plugin

[UPDATED Image/Instructions 25/12/2011]

Go to Settings -> Basic -> Select how your app integrates with Facebook -> Save Changes:

select how your app integrates with facebook

To create and associate a new (community) page with your app, go to Settings ->Advanced ->Contact Info ->App Page (Create Facebook Page) (optional) :

create community page for your iframe app

[END]

Below is the example of how Canvas section is filled:

canvas info for iframe app in Facebook Integration section

*Caution*:

If you are unable to see the iframe app after installed to your page (regardless if you’re in ‘http’ or ‘https’), leave the ‘Secure Canvas URL’ field BLANK. Your iframe tab should be able to work in ‘http’ (non-secured browsing) and in order to view that, you need to go to Account -> Account Settings -> Account Security -> UNCHECK Secure Browsing. This is believed to be caused by a known issue on how our custom app is not visible when viewed in secured browser (https) as described in this bug report.

The bug occurred in February and was said to be fixed in mid March, however it seems that the bug is back again recently and affecting some of my pages. Will follow up on this issue and if you know how to fix this, do share.

In Page Tabs Section:

The important parts are ‘Tab URL’ and ‘Secure Tab URL’. Both links are referring to the html file location including its file name -> Save Changes:

Information for Page Tabs

*Caution*:

Again, if your app tab is not viewable, leave the ‘Secure Canvas URL’ field BLANK until the bug issue for secured browsing (‘https’) is fixed.

So now, your new iframe app is created!


Add Your iFrame App to your Facebook Page


[UPDATED 25/12/2011]

Refer to the documentation on how you can add a page tab dialog, or the one near to the end of this post. Clearly there is no longer a view app profile page link available in Developers apps section. No idea why though. [END]

7.  Now go back to your ‘My Apps’ page and select ‘Application Profile Page’.

application profile page for your iframe app

8.  Then as how you normally add application to your page, click ‘Add to My Page’ -> then Add to the page you want:

add iframe app to your selected facebook page

9.  See that a new tab is added at your page sidebar. Rearrange the tab [#2(c)] to a preferred location or set it as your landing tab.

iframe tab successfully installed to page

*Caution*:

For some web developers who intends to import their external web pages to facebook pages, be sure to check if your page consists of any disallowed ad providers. Thanks to Kim for providing this info so not to violate facebook Terms of Use (refer to the part about ’9. Special Provisions Applicable to Developers/Operators of Applications and Websites’).

10.  You can rename your custom tab by going to Edit Page -> App -> your app name -> Custom Tab Name -> after edit, click Save:

customize your iframe tab name

 

So whenever you wish to create a new custom tab, you need to go through all the steps again to get it done. Time consuming isn’t it?

To make things easier, if I could I will try to find other alternatives or ready-apps so even facebook beginners could enjoy as much privilege without having to go through the lengthy steps. Be sure to follow close and don’t miss upcoming posts!

Updated Post to check out:
7 Free iFrame Applications to Create Welcome Tab (Custom Tabs) for Your Facebook Page.

Now Is Your Turn…


How is your experience with iframe app so far? Has it been more useful for your page or not? Do you have any special tips to add? Feel free to do so in the comments.

Like what you’re reading ? Subscribe via RSS Feed or email so you won’t miss a thing:

Enter your email address:

 

Tweet Branding, Scheduling and Reply Campaigns with MarketMe Tweet V2

Posted by Ching Ya | Posted in MarketMe Tweet, Social Media Tool, Social Networking, tweetbrand, Twitter, Twitter Desktop Clients, Web Application | Posted on 15-07-2010

38

Remember 7 Features to Brand, Market, Manage with MarketMe Tweet? Yup, it’s back again with an updated version MarketMe Tweet V2.0! For those who are hearing it for the first time, it’s a Twitter client equips with branding and marketing features. I’m no marketer but its ‘branding’ ability captivates me since their free app Tweetbrand (was recently pulled to focus on their main product). Imagine if you’re a business promoter, you will do whatever it takes to get your brand out there, reaching out to potential clients as much as you possibly can. MarketMe Tweet is specially designed for the job, see how it’s placing a blog link below my tweet:


I must admit, at first I was a little skeptic about who would actually look at that tiny spot for a web link? Until some of my followers starting to ask how did I place a link to my blog in each tweet, I realized this application has a good chance even for a freelancer like myself!

Of course, it’s not fair to limit MarketMe Tweet capabilities based on my personal preference. Here are other basic features you should know about:

So after using V1 for awhile, I had to find out what are the updated features in the new release. Despite of what has been said in the video, I need to personally try it out to confirm the reliability. Kindly be reminded that this review is based on my personal opinion only and has nothing to do with MarketMe Tweet sponsorship whatsoever. So here goes:


#1  Manageable Interface


I have long hoped for a new interface since I’m a big fan of Tweetdeck and Hootsuite. I can’t be happier with the new columnized interface, a lot easier to view conversations and follow up on Twitter lists. Now we can position, rename, add lists and reload the panes as how we work on any other web/desktop clients!

Remark:

There were times earlier when MarketMe Tweet was unable to retrieve updates – pane returns with ‘No Results’. After referring to their support team I was told that Twitter itself has issues refreshing API limits on certain accounts as explained in this post.


#2  Tweet Branding


Still by far, my personal favorite of the app! This is particularly useful if you are handling multiple Twitter profiles – MarketMe Tweet saves you the trouble to log in and out of the account but manages everything inside the client! You can add multiple brandings for different campaigns or business accounts. The setup is quite simple as indicated in the video (or you can request for a step by step write up and I’ll get it done just for you):

Video tutorial to setup a new brand with MarketMe Tweet:

(Source: by Tammy from MarketMe Tweet)


#3  Tweet Scheduling & Bulk Import


Another improved feature that made my day. It has a sleek sliding panel to schedule tweet (with branding), and drop down boxes make sorting easy (today, week, month, year and beyond). It is convenient to check and modify scheduled tweets, even integrate it with your Google Calender:

A new feature by MarketMe Tweet to import tweets (drafts) and schedule them in bulk. For example, you have saved some interesting links in your notepad, instead of scheduling them one by one you can do it in one-go: place %T% in front, and %D% at the back of your tweet, following date and time (24 hours clock format):

Format: %T% Your Message and Link %D% Date Time

Example: %T% 9 Ways to Enhance Your FB Page http://bit.ly/b9rn2w %D% 01/08/2010 22:10:00

Another method is set the intervals between your bulk tweets (tick ‘Use Override Interval’ to set the minutes):



Suggested Read: 6 Points To Ponder Before Using Automatic Status Updates ; 6 Status Updates Scheduler for Twitter, Facebook and LinkedIn


#4  Geo-tagging for Reply Campaigns


Another important feature offered by Marketme Tweet is to setup reply campaigns for targeted individuals. The app makes it easy to find relevant people based on your location, keywords, following by an opportunity to network. Especially when people are expressing interests about your product, your immediate respond via reply templates can earn you firsthand connections when attending to their needs. It’s optional to set the reply templates though, but in case you do, make sure to personalize it well to not spoil your first image.

Marketme Tweet is now using geo-tagging to filter results so you can discover local clients in targeted area.


#5  Contact Management


i)  Auto-Follow Option

If you are eager to connect with followers, MarketMe Tweet provides an easy option to reciprocal by ‘Follow Users Back’.

In additional, you can opt in to receive daily @Mentions Emails for the latest results:

ii)  Follow Users based on keywords

You can bulk or selectively follow users based on reply campaigns keywords.

iii)  Unfollow Users who are not Following You

To bulk unfollow or do it selectively.


#6  Social Accounts Integration


Facebook profile integration is now available in MarketMe Tweet. You can post status updates, comment and like your friends’ updates within the client itself. It supports multiple Facebook accounts so if you are managing facebook profiles for your clients, you can inter-switch between them. I am having difficulty to retrieve my facebook page and just submitted a support ticket for it. Will update the results when it’s fixed.

Some of you may wonder about LinkedIn integration, that is do-able with Ping.fm. All you need is to copy your Ping.fm API Key and insert it here: Settings > Ping.fm

Your Ping.fm configuration controls the number of social accounts that get to update from MarketMe Tweet. Here I only plan to update my LinkedIn status, so click ‘Send All’ to reveal the box, make sure ‘use Ping.fm’ is ticked before ‘Send’:


#7  Auto RSS Feed


It’s thrilling to see MarketMe Tweet is now providing feed management for users. Now you can import your favorite blogs’ RSS feed (or your own) and tweet them either way: automatically or manually via RT to credit the author.

According to MarketMe Tweet Support, if user chose to ‘Automatically Tweet the feed’ their brand won’t be visible. This is due to Twitter rules and kindly refer here for detailed explanations. Currently, the brand works brilliantly but I’m still having slight issues with the RT prefix of original author. Will continue to look into this.

Suggested Read: Twitterfeed, HootSuite RSS Feeds, and Blog Posting Schedules

Overall, I am quite impressed with MarketMe Tweet V2. It’s obvious how much this app has improved and I can see why. I have been communicating with their support team after trying out the app and so far they are fast to respond and most of all, willing to accept customers’ feedback. MarketMe Tweet is still actively updating its service. Although there are still rooms for improvement but let’s not forget it’s a marketing tool fundamentally.

Its upcoming updates including Blog integration (wonder if it’s something similar to Hootsuite?), Plugins, Enhancement for Facebook integration so forth. At the same time waiting for minor fixes to make the app more user friendly and presentable. For further improvement, I would suggest to add:

  • Spelling check
  • Filter Search within pane
  • Ability to post images or files (documents) in future enhancements

Not bad to strive towards social aggregator, don’t you think?


How do I Get MarketMe Tweet V2?


MarketMeTweet is not free. Currently the lowest price is $99/year (free updates, 6 month money back guarantee) with limited time offer. Kindly look for Pricing & Plan here. At the same time, MarketMeTweet offers affiliate program too, check it out if you’re interested.

Have you been using MarketMe Tweet V2? What do you think of the app and if you yet to try it, what do you think of it so far?

Note: MarketMe Tweet has changed its name to MarketMeSuite to fit its ultimate purpose as a social media management/marketing tool and not limiting to just Twitter only, but Facebook, Google Calender, Ping.fm and more.


Like what you’re reading ? Subscribe via RSS Feed or email so you won’t miss a thing:


Enter your email address:

Facebook & Twitter: Holding Hands in Seesmic Desktop 0.2.0

Posted by Ching Ya | Posted in Facebook, Social Media Tool, Twitter, Twitter Desktop Clients | Posted on 03-05-2009

20

New interface of Seesmic Desktop 0.2.0


It’s the moment that we’ve been waiting for: The Integration of Facebook account with Twitter, in Seesmic Desktop 0.2.0 release. I was pretty excited about it, and the setup is as easy and convenient as it seems.


First of all, What Is Seesmic Desktop?

Seesmic Desktop is one of the desktop clients for Twitter. What does desktop client do? Instead of us logging in everytime through the Twitter official site, which could be cumbersome sometimes, desktop clients make us life easier by allowing us to tweet over our PC desktop. Think of it as a twitter messenger. Efficient and easy to operate.

Let’s make Twitter + Facebook all in ONE place!
The process is similar to how you setup your Twitter account in Seesmic Desktop:

1. In the configuration bar, go to ‘Accounts‘, click the ‘+‘ to bring up the ‘Add your Facebook account‘ command box.

facebook integration with seesmic


2. You will be asked to verify your Facebook account by key in your email add & password.

4


3. Then, the following confirmation boxe(s) will appear for Seesmic to remember your facebook account while allowing status updates etc be done through it.

5

7


4. There! You’re good to go. Account switching between Twitter and Facebook is now applicable in Seesmic Desktop. You could even have a split screen for the both.

seesmic desktop client

So here is my most recent status-update for Facebook, via Seesmic.

9



For those who have yet to try Seesmic Desktop, you can download the application here. Good news is: No compulsory sign-ups for new users to download the latest version.

install



Other updated features from version 0.1.2 are as follow:

a) Following/Unfollowing Twitter users
b) Larger fonts
c) Ability to favourite tweets & Facebook posts
d) Configuration-shortcut button replacing the search tool (moved to upper right corner)

So, how have you enjoyed your Twitter/Facebook integration so far? Do you have further expectations? Love to hear your thoughts.

Please Retweet if You Find This Post Useful,thanks!

Copyright © 2009 by Wong Ching Ya, All Rights Reserved, “‘Facebook & Twitter: Holding Hands in Seesmic Desktop 0.2.0

Facebook Opens Up To Fight Against Twitter

Posted by Ching Ya | Posted in Facebook, Social Media Tool, Twitter | Posted on 29-04-2009

6

facebook-vs-twitter

FacebookFacebook has finally made a come back with its revolutionary step by launching the Open Stream API , which allows third party developers to request permission and gain access to users’ data–comments, status updates, videos and photos, and publishing them in full stream inside their applications or services.


Sounds familiar? Yes, reminding us the third party desktop clients for Twitter such as Twhirl and Tweetdeck . Not only users get to monitor their tweets efficiently, but also create content directly in the streams. So now Facebook is following suit?


Twitter desktop clients


For those who are familiar with Facebook, it has been profoundly recognized for its privacy control and strict policy in data porting. Remember last year’s incident involving the dispute between Facebook and the famous blogger named Robert Scoble? He got banned from the site after attempting to export his Facebook contact list to Plaxo by using a script . But now, it seems like Facebook is going towards a new era by opening up the data stream to developers instead. And now, new questions aroused among Facebook members regarding privacy issues:

Could there be dangers of data leaking? And what if one determines to keep his data private, while another who had been tagged earlier with the same photo decides to go public with all his data? How does somebody claim his/her privacy without consent?…”

It is our hope that Facebook would apply delicate, convincing methods on the implementations, so not to upset the existing users who valued the privacy control Facebook has over Twitter.

Look on the bright side, Facebook is aiming to build user loyalty from the open stream experience, and converging them to be more engaging with Facebook than ever before. Some are anticipating on how Facebook would cope to ensure the success of this implementation. But one thing for sure, multiple usage of new applications would start to mushroom, and by having Facebook and Twitter holding hands in one application ? It will be a fairy tale no more:

seesmic-n-facebook

Integration of Facebook acc in Seesmic Desktop 0.2.0


So, whether or not Facebook Has Twitter Envy, or the developers are under massive pressure from their big boss/share holders on securing its influential state in social networking, Facebook members should always be the core of their attention: by enhancing the existing networking service with friends and families, make it less cumbersome, along with faster loadings etc. Facebook could still go a long way, considering the fact it is catering for over 200 million users, and still growing, just as we speak.


Copyright © 2009 by Wong Ching Ya, All Rights Reserved, “‘Facebook Opens Up To Fight Against Twitter