How do you add a Facebook "like" button to a Fluid Grid layout?

There are two snippets of javascript from Facebook you're supposed to paste into two different places. Something about the Dreamweaver fluid grid makes it work differently, though, and I can't figure out what it is. I can't figure out what to do with the snippets of code to make the Facebook box/button show up in the browser window.

Here's what the FB page says to paste just after the body tag:
<script>
  window.fbAsyncInit = function() {
  FB.init({
  appId  : '196637453839945',
  xfbml  : true,
  version  : 'v2.1'
  (function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
Here's what it says to paste into the spot where you want it to appear:
<div
  class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true">
</div>
Seems simple enough, but it hasn't appeared on the page in a browser.

Similar Messages

  • How do you add a Facebook like button to an iBooks Author page?

    How can I add a Facebook Like Button to an iBooks Author page?
    I've got my book ready to go.
    I've got a facebook account to promote it.
    I just want to add a "Like" button on the iBooks page.
    regards
    iRevDr Bill Wall

    Hi KT,
    That was helpful, but I'm still having problems.
    I've plonked a Facebook logo on the page.
    BUT I can't seem to give it a hyperlink to my Facebook page.
    When I select the logo and then use the tool bars or the box thingy. It won't allow me to paste in the URL.
    It looks a bit ugly having a Facebook logo and the text of the URL beside it.
    Is there a way of making the Facebook logo have a hyperlink to its URL so you just click on the logo and it takes you to the facebook page.
    regards
    iRevDr

  • How can I add a facebook "like" button to my website?

    I just got the like botton code from facebook developer, but don't know where to drop it in iWeb. I would like the like button to appear in the contact page of my website: gingerbirdstore.com
    Please help to get this working.
    Thank you

    add the following into html snippet and click apply button:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="https://www.facebook.com/gingerbirstore" data-send="true" data-width="450" data-show-faces="true"></div>

  • How do i add a facebook share button to my webpage

    how do i add a facebook share button to my webpage

    I use a Facebook logo and then encourage people to like the page. But I do have a couple of clients who have asked me to do this.
    Here's the link on Facebook's site for share buttons:
    https://developers.facebook.com/docs/plugins/share-button/

  • How to setup a default direction for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
    Thanks.

    This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
    The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
    A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

  • How do you add a Facebook, Twitter and Yelp links?

    How do you add links for Facebook, Twitter and Yelp onto a website created by using iWeb? I'm using a hosting service to get my site on the web.

    Hi 80smetalhead. My first help post, so hope it helps.
    First off choose wether you are using a icon or text.
    For a few free Facebook/twitter/in icons try: http://www.jordankennedy.com/jk/Free_Stuff.html
    Ether way the process is the same. Select the Text/iCon. Then go to "Inspector" in the bottom right hand. (Blue circle with a "i" in it)
    Then select the sixth iCon across. (blue circle with arrow)
    Click "Enable as Hyperlink"
    Then under that Link to: External Page <--this should be selected.. If not select it.
    Under that will be a box with a link already in there. usually a apple link. change that to your Facebook/Twitter address.
    And that hopefully should do the trick

  • How to setup a default size for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
    This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

    Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
    Here is the specific page http://foundation.zurb.com/docs/components/grid.html
    The default values are
    Em-base : 16px
    Row width: 62.5em (62.5em x 16px = 1000px)
    Columns per row: 12
    These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
    In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

  • How do you add multiple facebook accounts to iPhoto

    I'm trying to add more then one account and I don't see how you can.

    Is this to iPhoto on your Mac?  If so maybe this topic will help :how do you sync more than one facebook account to iphoto?, how do you sync more than one facebook account to iphoto?
    OT

  • How do I add a "mySpace" like button?

    I just saw Sicko, and there is computerese language on their website that you can cut and paste into a MySpace page to make a button appear.
    How do we do that with an iWeb page?

    How to add PayPal Donate buttons and other HTML items...
    http://www.rowan-cottage.co.uk/Site/PayPal_Buttons.html

  • How can I insert different sizes of Flash in a Fluid Grid layout?

    I am trying to develop a simple website based on the standard template 10.  For this example there are 3 sizes of each image used, to suit the 3 display sizes.
    I wish to do the same with a flash animation, but cannot see how.
    The "@media screen" feature is a CSS only device, whereas the flash animation has to be in the HTML code.
    Being very new to web design, the answer may be simple, and I hope someone can help.

    Short answer:  Don't use Flash.  It's not web friendly and won't work in most mobile devices.
    Long answer:  Depends on what you're using animations for. Look at Edge Animate or jQuery or CSS3 Transitions which work in all mobile / tablet devices:
    http://html.adobe.com/edge/animate/
    http://jquery.malsup.com/cycle/
    http://wowslider.com/
    http://www.adobe.com/devnet/dreamweaver/articles/css-transitions-panel.html
    Nancy O.

  • DW CC Fluid grid layout how to change px width for desktop layout

    Hi there,
    I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
    The width of the original design was 960 px and the hero pic and others have been exported at that size.
    The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
    However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
    How can you change this setting when starting a new fluid grid layout?
    I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
    Why is this?
    Not all of our clients want a site 1232px wide on a pc.
    Thanks so much.

    Hi Ben and Nancy,
    Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
    I have been following the recent videos from Adobe on this.
    As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
    So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
    It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
    However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
    Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
    One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
    Here is a pic of the screen I am talking about that sets the maximum width:
    I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
    If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
    Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

  • Trying to add Facebook like button to site

    Hi
    I'm having a bit of a nightmare
    I'm trying to add a Facebook like button with a direct link to like my facebook page
    I have read several posts on here regarding this saying how easy it is just copy & paste the code onto a html widget in iWeb
    Nothing I try seems to work
    I'm copying or have copied all the code into the html snippet but no matter what i try i cannot get it to work
    I noticed that most of the posts on this are a bit old 2010 ETC
    Has there been a change since these posts & has anyone managed to do it recently
    Any help here wold be great
    Thank you

    Hi Roddy
    It all of a sudden started working
    only thing now is its showing the photo's of the people who have liked so far I de selected that option all i want is just the like button
    also for some reason the hight is 10035px high i can resize theres nothing in the code that sets the hight
    Heres the code i'm using
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src="http://connect.facebook.net/en_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://www.facebook.com/pages/InTheBox-Training/140193679461558?ref=hl" data-send="false" data-width="450" data-show-faces="false"></div>
    Web URL
    http://www.intheboxtraining.com
    Thanks

  • Facebook Like Button for Individual Products

    I like the great method that Kiyuco adapted to use the 'AddThis' to do this, however, in some instances, for example, if you have grouped products, switching between products results on making the Like Button disappear.
    I am sure that this happens due to the JS Hack implemented within it.
    I know how to do this using PHP, however, we know the story about PHP and BC.
    I just want to know if someone came across a solution to get this done using the BC Facebook Like Module to target individual Products.
    Thanks.

    Allowing the visitor to ‘Like’ the current page is as simple as adding BC’s facebooklike module to the Large Individual Product layout (or anywhere else):
    {module_facebooklike, moduleTemplateGroup="", language="en_US", url="", layout="", showFaces="true", width="450", verb="like", font="", colorScheme=""}
    http://kb.worldsecuresystems.com/134/bc_1345.html#main_Social_Media_Modules
    To add the Facebook Like button to the Small Individual Product layout you’ll need to make a simple change. Go to ModuleTemplates > SocialMedia > FacebookLike > Default > container.html
    Copy the code in the container.html. It will look like this:
    <script src="http://connect.facebook.net/{tag_language}/all.js#xfbml=1"></script><fb:like href="{tag_url}" layout="{tag_layout}" show_faces="{tag_showfaces}" width="{tag_width}" action="{tag_verb}" font="{tag_font}" colorscheme="{tag_colorscheme}" send="{tag_sendbutton}"></fb:like>
    Paste it to the Small Individual Product layout. Change the tag_url to tag_itemurl_withhost. It will look like this:
    <script src="http://connect.facebook.net/{tag_language}/all.js#xfbml=1"></script><fb:like href="{tag_itemurl_withhost}" layout="{tag_layout}" show_faces="{tag_showfaces}" width="{tag_width}" action="{tag_verb}" font="{tag_font}" colorscheme="{tag_colorscheme}" send="{tag_sendbutton}"></fb:like>
    Changing the tags will allow people to like the individual product page without even going into it.

  • Trying to customize a facebook like button

    I am trying to add a facebook like button to my website. I have gone through the facebook add like button and gotten the coding. The problem is that it displays the logo and name of business, I don't want that displayed. Can someone help with what I need to do to the coding to prevent that from showing?
    I have tried other forums and google, but nothing seems to answer this particular question.
    THANK YOU!

    You can get all the nessary codes you need from this link:
    <http://twitterbuttons.sociableblog.com/facebook-badges.html>
    When you use these codes, you get the appropriate logos associated with the code as shown on top of the codes.  Please try them on your test page before rolling out on production.
    hth

  • How can i add Facebook likes button on my mac mail?

    How can i add Facebook likes button on my mac mail?

    You must create a custom signature.
    Find a guide here

Maybe you are looking for