Facebook Like button is invisible??

Canterbury Sales

Hi,
I have the newest version of RW and I have tried for countless hours to do what would seem to be an easy thing - to add the FB like button from my FB page. I go through the motions on FB and copy the iFrame code, then paste it on my homepage in RW. I then do as all the instructions say - highlight, then format, then code. When I preview there is space where the FB Like button should be, but nothing is there, or it's invisible. I'm at a total loss. I was able to get Twitter to work (somewhat - it appears, but doesn't look the way I'd like), but the FB plugin just isn't there. Any thoughts? I am using the avantgarde theme. Thanks.
B.

Ed Brenner

Hi and Welcome to the Forums.

What code are you trying to use? Where did you obtain the code? Do you have a published live test page we can look at?

theHoundDawg

I have been watching this thread and and sorry to see no further response, as I have the same problem, so I will jump in.

I never used FB for site promotion until a couple of day ago when I set up a page to promote one site. Then I clicked on the "Add Like Box" link and the new page provided two pieces of code for placement on my site.

The first one is what they call the JavaScript SDK. I did a search here for threads on this issue and saw instructions to place this code here: Page Inspector > Header > Javascript. Those instructions also said to remove < script > < /script > from the code and to change <div id="fb-root"> to <div id=“fb-like”> (I know virtually nothing about javascript)

The second code is the code for the "Like" box, which can be placed anywhere.

I added the first code here Page Inspector > Header > Javascript, and I have tried the second code in various places, but whatever I do I cannot get the "Like" box to appear.

Any help would be appreciated.

theHoundDawg

If it helps, here is the site: http://stpatricksdayblast.com/

The "Like" button should appear on the top left right under the "St. Patrick's Day Resource Center" box.

Ed Brenner

So the question still remains unanswered...

Where are you folks getting the code from?

A link to that source, may better help us to help you.

theHoundDawg

Ed, I sent you a PM with the page link and the code

Ed Brenner

@CanterburySales - Seems the issue here is that you've probably selected the 'HTML5' code from Facebook. HTML5 isn't a web standard yet and many RW Theme's don't yet support the 'doc type' and other items that may be required to properly deploy HTML5.

I would suggest that you keep it easy. Use the iFrame code.

theHoundDawg

I have tried the IFrame code and that does not work either.

Also, when I put the Iframe code into a stack I cannot view the code like HTML or even Javascript.

Ed Brenner

That's because the iFrame code is missing the http: at the beginning of the link. Add it and it works just fine.

theHoundDawg

OK, I looked at the page with the iframe code in Preview, and it shows up as an empty white block.

theHoundDawg

on 1329453757:

That's because the iFrame code is missing the http: at the beginning of the link. Add it and it works just fine.

YES!

Thank YOU!

Ed Brenner

Also you do know that Joe Workman has a stack that does this, plus a bit more - see here.

Also just to share with everyone, it seems that the code from Facebook, for all 3 of their code options, is missing the key item - http: - from somewhere in each bit of code.

Canterbury Sales

Sorry for the delay - been quite sick. So, it turns out that as a beginner, I did not know that in some cases things do not show up in preview. The iframe code works fine on the live site, but I cannot see the FB Like button or the Twitter button in preview mode. So, it's not invisible on the actual site, just in preview mode.

Thanks for everyone's concern & help.

Andreas Belivanakis

on 1329616314:

Sorry for the delay - been quite sick. So, it turns out that as a beginner, I did not know that in some cases things do not show up in preview. The iframe code works fine on the live site, but I cannot see the FB Like button or the Twitter button in preview mode. So, it's not invisible on the actual site, just in preview mode.

Thanks for everyone's concern & help.

I've also struggled with the social icons and buttons myself, and have found that the best solution is to use one of the many available options from www.addthis.com. Their icons look superb, they line up properly and if you register with addthis (even though you are not required to do so) you can even receive click analytics from addthis!

Just make sure you copy the generated code from addthis (it takes just 2 clicks to generate it, I swear) and paste it onto an HTML stack or plugin page. If you *have* to paste the addthis code onto a styled text page, then make sure you highlight it, and select Ignore Formatting from the Format menu.

In any case, expect most icons to not show up in RapidWeaver's Preview. They'll only show up upon publishing, on the actual web page.

I have several of Joe Workman's stacks and like most of them. I've got to say, however, I am rather disappointed by the LikeIt stack. The icons do not line up, the icon options are not adequate in my opinion, and worse, the stack contains hundreds of files that keep getting uploaded over and over again with each project upload, significantly increasing upload time. All LikeIt files seem to get uploaded, not just the ones relevant to the options chosen. Hopefully there will be an update from Joe soon, to take advantage of Stacks2 new Stack Media feature to select only the icons you want for your project.

Another problem with LikeIt is that it violates some W3C rules and throws away my [already slim] chances for W3C compliance. Nibbler also reports problems with image format and sizing, with a subsequent penalty reflected on my Nibbler score. Joe said there is little that he can do about this, as the icons get imported directly from their sources. AddThis is not impervious to the above problems, but it looks like the Nibbler penalty with the Addthis implementation is less severe.

Andreas

joeworkman

The latest update of Like It that was released this week should solve most of the "Facebook not appearing" issues.

joeworkman

on 1330048824:

I have several of Joe Workman's stacks and like most of them. I've got to say, however, I am rather disappointed by the LikeIt stack. The icons do not line up, the icon options are not adequate in my opinion, and worse, the stack contains hundreds of files that keep getting uploaded over and over again with each project upload, significantly increasing upload time. All LikeIt files seem to get uploaded, not just the ones relevant to the options chosen. Hopefully there will be an update from Joe soon

The latest update fixes many of the gripes here. However, in order to do that, it also streamlines and simplifies the stack. The spacing has been improved and the buttons line up much better now. Since I don't have control over 99% of the buttons look and positioning, I am sort of at the mercy of service provider (twitter, Facebook, etc.)

Like It no longer uploads as many images. There are 9 images that are still uploaded. However, these images are only used in order to display what Like It will look like in Edit Mode. These images are never actually used on the published webpage. However, they do still get uploaded and there is nothing that I can do about that for the time being. Its a trade off for making the stack usable in Edit Mode.

Another problem with LikeIt is that it violates some W3C rules and throws away my [already slim] chances for W3C compliance. Nibbler also reports problems with image format and sizing, with a subsequent penalty reflected on my Nibbler score. Joe said there is little that he can do about this, as the icons get imported directly from their sources. AddThis is not impervious to the above problems, but it looks like the Nibbler penalty with the Addthis implementation is less severe.

Andreas

I control zero of the code behind the buttons in Like It. All of the source and logic is taken care of by each service provider. Most of these badges use valid HTML5 syntax. It uses attributes like data-count which don't pass W3C's validation test (which is ancient and needs to be updated. But I won't get into that here). Again, all of this is valid HTML5 code. If Nibbler is docking you because of these badges, then I would think that Nibbler needs to update their scoring because these badges are use all over the web since its the code that is supplied by the vendors themselves.

Anyways, go get the new Like It update. Its a nicer and simpler implementation.

Andreas Belivanakis

Super! Thanks, Joe! I will definitely try the new version of LikeIt.

BTW, Nibbler does not use its own test for W3C validation. It runs it through W3C's own Markup Validation Service:

http://validator.w3.org/

And you are correct. It looks outdated, and I hope they'll revamp it soon. Something was not exactly right there for some time. Even AddThis mentions there is a validation problem with their own code.


Andreas

peterdanckwerts

I've been using LikeThis on my blog and it seems to work well.

Carrie

@ Ed Brenner THANK-YOU for noticing the http was missing from the Facebook generated links. I have been going around and around for almost two weeks over this!