Friday, March 8, 2013

Screw You Widget Directions! I am not a Rocket Scientist!

I made a Facebook page for my blog. My blog also has a Twitter. I want to add the widgets to my blog. Simple!  Actually, NO , IT'S NOT SIMPLE!

Well, first of all it took me 4 days(exaggeration) to find the directions on the actual Facebook site.

Then it took me 6 days (another exaggeration) to read through the directions.

And 4 therapy sessions (this may or may not be an exaggeration) to deal with the anxiety it caused me trying to 'Copy and Paste' URL HTML WTF Codes into my HTML format.

It's especially worrisome when there is an option to click on a box to 'Save HTML' or you Google
"How to add widgets to your blogger blog" and the first thing that comes up is a warning that you'd better "Backup your HTML format?" Sounds Scary!! You mean I can lose everything.

So here are the directions from Facebook.........Simple Right??




Look at these STUPID, LONG Directions!
Sorry Mark Zuckerberg, We are not all Facebook Genius Creators!

Is anyone else as dumb as me?
If the answer is 'NO' then we cannot be friends. You are too smart for me.

Like Button

If you implemented the Like button before November 7th, 2012, read this notice.
On this date we updated how the Like button will function with respect to content restrictions, publishing updates to users and integration with the Built-in Like action.
Like buttons that were implemented prior to this update should read the following developer doc about the Like Button Migration as they may require changes to continue working.
The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.
When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocol to specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. Note: The count on the Like button will include all likes and shares whereas the like connection on the Graph APIincludes only the number of likes for the object.
There are two Like button implementations: XFBML and iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.
Note: The URLs in the code are protocol relative. This lets the browser load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings. Missing http and https in the code is intentional.
To get started, just use the configurator below to get code to add to your site.

Step 1 - Get Like Button Code

Send Button (XFBML Only) (?)
Show Faces (?)


  • href - the URL to like. The XFBML version defaults to the current page.
  • send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
  • layout - there are three options.
    • standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
  • show_faces - specifies whether to display profile photos below the button (standard layout only)
  • width - the width of the Like button.
  • action - the verb to display on the button. Options: 'like', 'recommend'
  • font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • colorscheme - the color scheme for the like button. Options: 'light', 'dark'
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
    • fb_ref - the ref parameter
    • fb_source - the stream type ('home', 'profile', 'search', 'ticker', 'tickerdialog' or 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

Step 2 - Get Open Graph Tags


Open Graph Tags

Open Graph tags are  tags that you add to the  of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
 property="og:tag name" content="tag value"/> 
If you use Open Graph tags, the following six are required:
  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graph types.
  • og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels (though minimum 200px by 200px is preferred). Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name - A human-readable name for your site, e.g., "IMDb".
  • fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation .


How do I know when a user clicks a Like button?

If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.

When will users have the option to add a comment to the like?

If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the iframe version of the button, users will have the option to comment if you are using the standard layout. If users do add a comment, the story published back to Facebook is given more prominence.

What analytics are available about the Like button?

If you visit and register your domain, you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.

Can I link the Like button to my Facebook page?

Yes. Simply specify the URL of your Facebook page in the href parameter of the button.

What is the best way to know which Like button on my page generated the traffic?

Add the 'ref' parameter to the plugin (see "Attributes" above).
When a user clicks a link back to your website, we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL. Example:
Aggregated stream stories contain all ref parameters, concatenated with commas.

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site.
Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.
The user agent of the scraper is: "facebookexternalhit/1.1 (+"

How do I display the Like button in different languages?

If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:
If you are using the iframe version include a locale parameter with the proper country code in the src URL. Example:
You may need to adjust the width of the Like button to accommodate different languages.

What makes up the number shown on my Like button?

The number shown is the sum of:
  • The number of likes of this URL
  • The number of shares of this URL (this includes copy/pasting a link back to Facebook)
  • The number of likes and comments on stories on Facebook about this URL

What happened to the old Share button?

We deprecated the Share Button when we launched the Like button, because the Like button improves clickthrough rates by allowing users to connect with one click, and by allowing them to see which of their friends have already connected. For reference, the Share button documentation is still available here.

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other thanhidden, such as visiblescroll, or auto.
Updated about a week ago


  1. It took me a couple of tries but I eventually got it. It is confusing and really I think I just got lucky!

  2. I think I need to try again when I am not already in a flustered, PMS state of mind. I am pretty persistent, and to be honest when I don't 'get things' it annoys me.
    So I will try again, hopefully get lucky and see how it goes.

    But really......HTML, COdes,?? I know how to copy and paste, but come on...!!
    You give me hope ;)

  3. Replies
    1. Then we can be friends:)

      Now,if I wind up figuring this whole widget thing out and start wandering into the dark side, I will always stay true to my 'I can't figure this out' roots. I won't start actin all Computer Whiz Geniusy and stuff.

  4. There is nobody in the world as bad at technology as I am. Well. Maybe some person living in a hut somewhere....

    Nah. They'd still kick me ass.

    I feel for you!

    1. Well....I happen to live in a little grass hut............................... ;)

  5. omg, it was a nightmare sifting through tons of tutorials trying to figure out how to do all that code and widgets and shit. Then, when enough time passes and I need to do it again? I have to go through the whole thing again, because can I remember that shit? Nope. I'm an artiste, not a tech head. But you know what? Actually...when I figure this stuff out, it feels pretty gratifying. Almost kinda fun. We're gonna kick technology in the ass, aren't we? ;)

    1. Nightmare kinda describes it. But, I totally am like you. Total gratification when I figure stuff out. Not satisfying to be content in not eventually learning it. We will kick technology ass!

  6. After reading that I wanted to cry myself to sleep. It might be easier to just have buttons made through another site that people can click. I did that when I was on blogger. You just put the url in and they create the code for the button.

    I spent six months trying to link Facebook to Twitter. Then the next 6 months trying to unlink them. Technology is a pain in the butt!


Reading is a wonderful thing......if you enjoy what you are reading
Writing is a wonderful thing.........if you enjoy what you are writing

I have fun writing this blog, and so I hope you have fun reading it.
Thank you,Thank you! Thank you very much!