• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Social Media Examiner | Social Media Marketing

Your Guide to the Social Media Jungle

  • 🔥 Free Newsletter
  • Tools
  • FindHelp
  • Events
  • Shows
    • Social Media Marketing Podcast
    • Social Media Marketing Talk Show
    • Crypto Business Podcast
    • Our YouTube Channel
  • Articles & Videos
    • Articles
      • Web 3.0
      • How To
        • Instagram Marketing
        • Facebook Ads
        • Facebook Marketing
        • YouTube Marketing
        • YouTube Ads
        • LinkedIn Marketing
        • TikTok Marketing
        • Clubhouse
      • View Points
      • Expert Interviews
      • Tools
    • Video Tutorials
      • Instagram Marketing
      • Instagram Ads
      • Facebook Marketing
      • Facebook Ads
      • LinkedIn Ads
      • TikTok
      • Clubhouse
  • Sponsor
    • Podcast Sponsorship
    • Email Sponsorship
    • Event Sponsorship
  • About
    • Society
  • Search
  • How to Add a Like Button to Your Facebook Tabs

    by Tim Ware / December 13, 2010

    social media how toHave you ever wondered how certain Facebook pages add Like buttons to their custom tabs? Look no further.

    Many have asked me how sites like Threadless are able to add multiple Like buttons and comments to their Fan page, allowing visitors to buy, Like and comment on any t-shirt on their Shop tab.

    Well, it turns out it’s actually quite easy, using the fb:comments FBML tag.

    Using fb:comments, you can add a Like button and comment boxes in multiple places on your Facebook tabs and, optionally, each can be accompanied by a user comments section. This provides more avenues for fans to interact with, and share, your content.

    The Threadless Fan Page — How Do They DO That?

    The Threadless Fan Page “Shop” tab displays a selection of six t-shirts from their catalog, and visitors can order, Like and/or comment on each one.

    threadless
    Each Threadless product has "Add to cart," a Like button, and Comments.

    The left column in the above illustration is a product image and a pull-down select option. Once a user makes a selection and clicks “Add to cart,” he or she is redirected to the Threadless.com website to complete the purchase.

    The right column content is created using the fb:comments FBML tag:

    <fb:comments xid=”UNIQUE-IDENTIFIER” canpost=”true” candelete=”false” reverse=”true” returnurl=”http://www.threadless.com/product/1295/And_How_Are_You_Feeling_Today”>
    <fb:title></fb:title>
    </fb:comments>

    Launch Social Projects Faster and Easier

    FindHelp Marketplace

    Looking for a content creator, campaign manager, or strategist for your social channels or a special project?

    Find the right expert for even the most complicated project or campaign in just a few clicks with our new FindHelp marketplace. You'll have more time to focus on other areas of your business without sacrificing your social presence. Browse highly qualified Facebook and Instagram experts today.

    FIND HELP TODAY

    The parameters and values used for fb:comments

    • xid: This is the unique identifier for this instance of the fb:comments tag. You must include a value, and I suggest using something short and descriptive. You’re limited to alphanumeric characters, hyphens, the percent sign, periods and underscores. The user won’t see this content; it’s just for creating a value that can be accessed by developers for programming purposes.
      Some examples are:
      xid=”Product-205″
      xid=”Product-Blue-Shoes
      xid=”Tan_50%”
    • canpost: You’ll most likely want “true” for this value, indicating the user can post a comment.
    • candelete: You’ll want “false” for this, meaning a user can’t delete any of the comments.
    • reverse: Setting this to “true” places the “Add a Comment” box below the posted comments, as is done on the Threadless page.
    • returnurl: This is the most important value! This is the URL that the user is Liking when he or she clicks the Like button. If the user ticks the “Post comment to my Facebook Profile” box, the comment will appear on their wall as “[User] likes [Website’s Title Tag] on [URL].” You can have any valid URL for the “returnurl” parameter. Threadless has the product’s page on their website as the “returnurl” value.

    Using CSS to hide unwanted elements in the fb:comments tag

    You can remove that "Facebook social plugin" text and logo with CSS.

    You can easily hide this element from being displayed. Using the Firefox plugin “Firebug” (a must-have for coders!), I determined that the little Facebook logo and “Facebook social plugin” text are contained in a DIV assigned the class “subtitle_left“, and this DIV can be hidden, in all browsers, with CSS.

    To hide this content, you simply add:

    .subtitle_left {display:none;}

    to your stylesheet, which hides the DIV:

    Presto! The containing DIV for the logo and text are hidden with display:none.

    Just want the Like button? Use CSS to hide the comment box

    If you want only the Like button and not the comments box, you can use the “display:none” CSS property to hide the unwanted comments box.

    Because all the comment features are contained in a DIV assigned the class “comment_body” (thanks again, Firebug!), just add the following CSS rule to your stylesheet:

    No Longer Just for Tech and Finance Nerds...

    Crypto

    Originally just for people who understood the jargon, Web 3.0 is now the business playground for entrepreneurs, creators, and marketers.

    Whether you’re a newbie or have already gotten your feet wet, you can learn the ins and outs of NFTs, DAOs, social tokens, and more on the newest show hosted by Michael Stelzner—the Crypto Business podcast.

    Follow the show on your favorite podcast platform to find out how to make Web 3.0 work for your business.

    FOLLOW THE SHOW

    .comment_body {display:none;}

    The result:

    Adding Multiple Instances of the Like Button

    You can have as many instances of the fb:comments FBML tag on your custom tab as you wish. Just make sure that each has a unique “xid” value.

    Giving users more options than just Liking your page and/or sharing it means more user engagement and more mentions of your brand showing up on users’ walls.

    Give it a try and let us know how it works. Leave your questions and comments in the box below.

    Curious about NFTs, DAOs, and Web 3.0?

    Crypto

    Follow the Crypto Business podcast to find out how NFTs, social tokens, DAOs (and so much more) will affect your business in the near future.

    Every Friday, host Michael Stelzner interviews leading industry experts about what works right now in Web 3.0 and what to expect in the future, so you can prepare your business for the shift, even if you're a total newbie.

    FOLLOW THE SHOW

    Tags: Facebook

    About the authorTim Ware

    Tim Ware is the owner of HyperArts, a San Francisco Bay Area Web development company that also specializes in Facebook custom tabs and application development.
    Other posts by Tim Ware »

    Get Social Media Examiner’s Future Articles in Your Inbox!

    Get our latest articles delivered to your email inbox and get the FREE Social Media Marketing Industry Report (39 pages, 50+ charts)!

    Industry Report Cover

    Worth Exploring:

    Facebook

    Marketing Help Explore More →

    Instagram

    Marketing Help Explore More →

    YouTube

    Marketing Help Explore More →

    Linkedin

    Marketing Help Explore More →

    Facebook Ads

    Marketing Help Explore More →

    Social Media Marketing Industry Report

    Get Free Report →

    Social Marketing Trends

    The data you've been missing!

    Need a new plan? Find out how thousands of marketers plan to change their social marketing activities in our 14th annual Social Media Marketing Industry Report. This 39-page report reveals what marketers have planned for their organic social activities, video marketing, social ads, and more. Get this free report now and never miss another great article from Social Media Examiner.

    Enter your email to get
    our free report:


    Footer

    Your Guide to the Social Media Jungle
    Copyright © 2022 Social Media Examiner®
    All Rights Reserved. Terms of Use | Privacy Policy.

    Helpful Links

    • About us
    • Our content via email
    • Our podcasts
    • Our YouTube channel
    • Our live show
    • Our industry report
    • Sponsorship opportunities
    • Write for us…
    • RSS
    • Accessibility