A place for customers to chat about Realmac and its products - RapidWeaver, Clear and Ember!

Facebook Like button is invisible??

Canterbury SalesCanterbury Sales Posts: 2Members
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.

Comments

  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 2:41PM
    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?
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    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.
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    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 BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 2:41PM
    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.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    Ed, I sent you a PM with the page link and the code
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 2:41PM
    @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.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    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 BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 2:41PM
    That's because the iFrame code is missing the http: at the beginning of the link. Add it and it works just fine.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    OK, I looked at the page with the iframe code in Preview, and it shows up as an empty white block.
  • theHoundDawgtheHoundDawg Posts: 9Members
    edited 2:41PM
    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 BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 2:41PM
    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.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • Canterbury SalesCanterbury Sales Posts: 2Members
    edited 2:41PM
    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 BelivanakisAndreas Belivanakis GreecePosts: 268Members
    edited February 2012
    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
    RapidWeaver 4.2.2 and 4.5 beta (aka RW5) • Mac OS X 10.5.8 and 10.6.8 • iMac 3.06GHz and MacBook 13" Aluminum.

    MilosWeb | Milos Island
  • joeworkmanjoeworkman SF Bay Area, CAPosts: 2,343Members
    edited 2:41PM
    The latest update of Like It that was released this week should solve most of the "Facebook not appearing" issues.
    Now go forth and make your websites great...
    I have the biggest stacks store out there. Build your own theme with my Foundation Theme + Stacks.
    I wrote the book on RapidWeaver. Follow me on Twitter
  • joeworkmanjoeworkman SF Bay Area, CAPosts: 2,343Members
    edited 2:41PM
    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.
    Now go forth and make your websites great...
    I have the biggest stacks store out there. Build your own theme with my Foundation Theme + Stacks.
    I wrote the book on RapidWeaver. Follow me on Twitter
  • Andreas BelivanakisAndreas Belivanakis GreecePosts: 268Members
    edited February 2012
    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
    RapidWeaver 4.2.2 and 4.5 beta (aka RW5) • Mac OS X 10.5.8 and 10.6.8 • iMac 3.06GHz and MacBook 13" Aluminum.

    MilosWeb | Milos Island
  • peterdanckwertspeterdanckwerts LondonPosts: 435Members, Moderators
    edited 2:41PM
    I've been using LikeThis on my blog and it seems to work well.
  • CarrieCarrie Posts: 1Members
    edited October 2012
    @ 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!
  • drmandeldrmandel Posts: 6Members
    edited July 2013
    This is so frustrating. I am reading through all of this information - trying out all of it - and yet nothing seems to work! LikeThis also does not work...??? Why should I have to buy a stack to add these badges?
    Daniel Mandel
    - - - - - - – – – – – — — — — — — — — ——————————————
    Thanks for listening

    http://www.danielrmandel.com
  • WebKarnageWebKarnage Sussex UKPosts: 3,016Moderators
    No Stacks is needed to add a Facebook badge, but since this discussion Facebook have changed their code at least once, so some details may not be relevant any more.

    Getting the correct code from Facebook (sometimes 2 parts are required) and then applying Ignore Formatting from the Format menu will work.

    With best regards,
    Karn.
    Theme Editing Basics for budding theme weavers
    More @ WebKarnage
  • chemicalkiddchemicalkidd Posts: 1Members
    Excuse my language, but fncking gold star to the guy who pointed out that that http is missing. *Plans revenge on facebook people for doing that* ... Spent three freaking hours trying to figure this crap out, something that should be EASY as pie to no avail, was about to go throw my damn laptop into the pool. THANK YOU.
Sign In or Register to comment.