facebook like button [how?]

[cresshead]

facebook like button:

i simply Cannot get such a simple thing to work in Xara web designer...i have 6 and i'm trialing 7 currently but cannot fathom out how such a supposedly simple task is so hard to do in xara web designer.

we get pushed to the facebook developers page...what to choose?
who knows?
i believe we can only use the iframe option...but there is NO iframe option for a like button.

so what do you choose then?

how about xara do a video tutorial and show us it working?


i get this error:

Unable to find the HTML code for the widget on the widget site or on the clipboard.

- Select the Widget you wish to create.
- Select the button labelled Other to choose where to add the widget. (This step is not necessary for all the facebook widgets)
- Click the Insert button below to add the widget to your page.

wtf..

so annoying.

[jimhanus]

Here's how I do it: Go to https://developers.facebook.com/docs.../plugins/like/ and enter your info to get the code you need. Our example is at www.michiganimaging.com and 450 pixels wide. Here's what my code looks like:

<div class="fb-like" data-href="https://www.facebook.com/media/set/?set=a.132856696817852.16210.132635640173291&amp;t ype=3#!/pages/Michigan-Imaging-Supply-LLC/132635640173291?sk=wall" data-send="false" data-width="500" data-show-faces="false" data-font="trebuchet ms"></div>

On your page where you want your "like" button to display, make a rectangle 450 pixels wide by 35 pixels high. This is your placeholder for the "like" code. Right-click on the rectangle placeholder, then > web properties > placeholder. In the box that says "replace with html code" paste in the "like" code. That's it. See the attachments for the Xara file example and the actual webpage look.

Jim

[gophigure2]

Yes, but there are two bits of code provided by FB. One states to put it in "right after the opening body tag" and the other wherever you want the plug in to appear on the page. I've tried putting the first one in the body of the placeholder and the other in the head, but it doesn't seem to be working. When requesting the code, I am specifying 190px width, but that shouldn't make any difference since the code should reflect that. I've also tried swapping the codes from head to body with no results.

[jimhanus]

Go to: https://developers.facebook.com/docs.../plugins/like/ to get the code (see attached). Using the HTML5 option, copy the top portion of code (see attached). Go to Web properties > Page, and paste into the tracker code box. Copy the second section of code (see attached). Make a rectangle 190 pixels wide to use as a placeholder (size isn't really important, except to show you the approximate placement of the Like box). Right-click on your placeholder and go to Web Properties > Placeholder, and paste the code into the Replace With HTML Code box. The Like box WILL NOT show up in preview mode, only when it's uploaded and viewed in a browser.

[gophigure2]

Thanks for the reply, I finally realized that I had to upload the entire thing to my website before I could see it. Makes it sort of cumbersome because there is now nothing in my layout to show that the plug in exists, you just have to remember where you put them on each page. One other thing I have found -- unless someone shows me a way around it -- I can't shorten the image to 190px. Even if I specify that in the FB app, about the smallest placeholder I can use is 300px x 35px, or else it just clips off the text.

[jimhanus]

In my example the pink rectangle is 190 pixels wide. It's visible in Xara layout just like it's shown in the photo. They don't have to made transparent to not show up if it's a placeholder. My example of the Like code uses 190 pixels.

[gophigure2]

Interesting. I'll have to work on the size later, but I also find it interesting that you put the Body code into the Tracking Code window. Looking at my Page panel, I don't have a Tracking Code window. I do appreciate the tip on coloring the Placeholder so I can work around it.

[jimhanus]

My Xara version is Designer Pro 6.

[bb2]

Hi try the following

1.Use the HTML5 method to insert the code. (The XFMBL approach would also work but requires an additional step)

2. Insert the Facebook Plugins widget from the Designs Gallery and select the widget type you wish to insert. For the purpose of this example, lets assume you wish to insert the activity feed widget.

3. Configure the widget as required and then click on the get code button. With the HTML5 option enabled, click on the second text area to highlight the code and press Ctrl + C on your keyboard to copy the code.

4. Click on the browser Insert button. This will cause the widget to be inserted within your document.

5. With the widget still selected, click on web properties followed by the placeholder tab and click on the HTML Code (body) button.

6. insert the following code above the existing code.

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
var fb_host = (("https:" == document.location.protocol) ? "https:" : "http:");
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = ""+ fb_host + "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


7. Click on ok and then apply and the placeholder image will be correctly generated.

Preview your document and the facebook widget will now display locally.



Method 2: The placeholder image is not wysiwyg but the main code is only inserted once. You can use this method if youre inserting multiple facebook plugins within a page.

1. Use the HTML5 method to insert the code. (The XFMBL approach would also work but requires an additional step)
2. prior to inserting the widget, open the website properties dialog and select the website tab. Insert the following code into the HTML code (Body) section

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
var fb_host = (("https:" == document.location.protocol) ? "https:" : "http:");
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = ""+ fb_host + "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

3. Insert the Facebook Plugins widget from the Designs Gallery and select the widget type you wish to insert. For the purpose of this example, lets assume you wish to insert the activity feed widget.

4. Configure the widget as required and then click on the get code button. With the HTML5 option enabled, click on the second text area to highlight the code and press Ctrl + C on your keyboard to copy the code.

5. Click on the browser Insert button. This will cause the widget to be inserted within your document.

6. With the widget still selected, click on web properties followed by the placeholder tab and disable the option 'regenerate placeholder image automatically' and ok the change

7. apply a color to the placeholder so its easily viewable and resize it to the required size to fit the widget.

Preview your document and the facebook widget will now display locally.

[Alliefan]

I have tried all of these suggestions and still cannot get the facebook Like button to show up on my page. Iam using Xara Web Designer 6 and have a large transparent layer over my page. The placeholder box appears to be on top of the transparent layer, not under it. Any suggestions? I've read everything I can find and nothing is working.