Facebook "LIKE" button is sidebar widget (for shopping cart)

avidgeek said 1 year, 1 month ago:

Anyone ever do this?? I have the SDK code, and the two other pieces of code all pasted into the html window for the widget and I’m getting several errors.

The site I have was strictly a shopping cart but I’m seeing the limitations of trying to make the shopping cart “MORE” than what it truly is, a shopping cart. Still, I’d like to think I could add something simple like the “LIKE” button.

Nate D said 1 year, 1 month ago:

@avidgeek – While you are correct that Quick Shopping Cart is only intended to create a shopping cart, you should be able to add a Facebook “Like” button.

I am unsure where you are having troubles. Generally there would be 2 pieces of code (make sure you are selecting the option for HTML5), a JavaScript and a Div where you want the button to display. The JavaScript should only be included once per page, while the button div can be added in different places. But you can add the JavaScript in the same place as the div.

Again, I would just make sure you are grabbing the HTML5 code:

http://developers.facebook.com/docs/reference/plugins/like/

Post back how it works out for you.

steves said 1 year, 1 month ago:

@avidgeek

I agree with Nate D. You should be able to add this without issue. I would follow Nate D’s suggestions and let us know if you are still having issues.

-Steve

jackie607 said 1 year ago:

where do you insert the codes at? The advanced CSS section?

timb said 1 year ago:

@jackie607

You would want to add an HTML widget to your side bar to add this code. You can use this help article for steps on adding the widget:

Managing Widgets in Quick Shopping Cart

Tim B

nikkib said 1 year ago:

@ Nate D: I have a business facebook page that is linked to my personal facebook profile. I got the code from facebook for a like button and attempted to follow your instructions to paste the code into my web page, but nothing happens. Do you have further instructions? Twitter’s process is much easier. I wonder Facebook is so difficult.

stacywells said 11 months, 1 week ago:

I am really exhausted researching the code placement for the Facebook ‘like’ button. Also, this process causes me to wonder if I even have the right code. I have read through the ‘Managing Widgets in Quick Shopping Cart’ and review the section about Social Media and Quick Shopping Cart. Are there video tutorials that show how to insert the code (and where)? Thanks for the help.

Nate D said 11 months, 1 week ago:

@nikkib & @stacywells – Make sure your selecting the HTML5 code.

http://developers.facebook.com/docs/reference/plugins/like/

There should be 2 snippets of code, place both in HTML where you want it to display on your website.

katminla said 3 weeks, 2 days ago:

Hi – I’m having trouble with this – not sure why, but I get the 2 pieces of code from the Facebook site, I add them to the Widget in the “Standard Editor” window. When I try to verify the code, I get the following list of errors:

Content (Line 2, Column 9): Attribute “type” is required and must be specified for element type “script”.
Content (Line 9, Column 148): Attribute “data-href” must be declared for element type “div”.
Content (Line 9, Column 148): Attribute “data-send” must be declared for element type “div”.
Content (Line 9, Column 148): Attribute “data-width” must be declared for element type “div”.
Content (Line 9, Column 148): Attribute “data-show-faces” must be declared for element type “div”.
Content (Line 9, Column 148): Attribute “data-font” must be declared for element type “div”.

Here’s what the code looks like:

<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 = “//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=”http://www.nohosoapcompany.com” data-send=”true” data-width=”450″ data-show-faces=”true” data-font=”lucida grande”></div>

I’m a code dummy, so any help would be greatly appreciated. Thanks!