PDA

View Full Version : Facebook widget - description not working


Mejse78
05-16-2012, 01:25 PM
Hi, there.

This is my first question here - so I hope I get it right.

I've just tried out using the facebook like-button widget for the first time.. and something is off. It makes the like bottun, but in the link that's appearing on FB there's no description. It just says: ENTER DESCRIPTION HERE.

I've tried to combine it with meta-tags.. but no luck!

MY HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>


<!-- InstanceBeginEditable name="doctitle" -->
<title>Galleri Kessel</title>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2149022" binding="#OAWidget" />
</oa:widgets>
-->
</script>
<!-- InstanceEndEditable -->


<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">


</head>



<body>


<div id="space" >
<div id="paper">

<!-- InstanceBeginEditable name="top" -->

<div id="top">
<img src="images/layout/logo.gif" />
</div>
<div class="fb">
<script type="text/javascript">
// BeginOAWidget_Instance_2149022: #OAWidget

var urlToLike = 'http://www.jonnakessel.dk/index.html';
if (urlToLike == '') {
urlToLike = window.location.href;
}
urlToLike = encodeURIComponent(urlToLike);

var font = encodeURIComponent('tahoma');


document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=da_DK&amp;href='+urlToLike+'&amp;layout=st andard&amp;show_faces=false&amp;width=350&amp;height=50&amp;action =like&amp;font='+font+'&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:350; height:50"></iframe>')


// EndOAWidget_Instance_2149022
</script>
</div>




<br>


<!-- InstanceEndEditable -->

<div id="banner" >
<img src="images/layout/topbanner3.gif" />
</div>


<div id="menu" >
<div class="float">
<ul>
<li><a href="index.html">HJEM</a></li>
<li><a href="galleri.html">GALLERI</a></li>
<li><a href="udstilling.html">UDSTILLINGER</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>
</div>
<!-- InstanceBeginEditable name="jonna" -->
<div id="jonna" >

<div><img class=image_frame src="images/layout/jonna.gif" />
</div>


<div class="tekst">

<br>
<br><h2>Jonna Kessel</h2>
<p>Født 24.07.49 <br><br>
Scenograf v. Stavtrup Scenen siden 1993.</p><br>
<h2>Atalier:</h2>
<p>Råhøj Parken 79
<br>8260 Viby J </p>
<br>
<br>

<h2>Studierejser:</h2>
<p><b>1989:</b>
<br>Frankrig - Les Tuilerie D'affiac, Avignon, Arles, Carcassonne og Montpellier
<br>
<br>
<b>1990: </b>
<br>Sydfrankrig - Agay, Antibes og Vence
<br>
<br>
<b>1992: </b>
<br>Italien - Pietrasanta
<br>
<br>
<b>2000: </b>
<br>Italien - Ophold i billedkunstneren Jørgen Haugen Særensens hus Villa Simi i Pietrasanta
<br>
<br>
<br>
</p>
<h2>Fonde og legater:</h2>
<p><b>1989: </b>
<br>Den Ingwersenske Fond
<br>
<br>
<b>1990: </b>
<br>Kulturministeriets Fond
<br>
<br>
<b>1992: </b>
<br>Nordisk Kultur Fond</p>
</div>
</div>
<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="content" -->


<div id="indhold">

<h1>Velkommen til Galleri Kessel</h1>

<p>I dette galleri kan du se mine værker og min rejse som billedkunstner.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="billede" src="images/layout/forside.gif" />
<br><p class="billedtext">Fugle</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="billede2" src="images/layout/en fri fugl.gif"/>
<br><p class="billedtext2">En fri fugl</p>


</div>
<!-- InstanceEndEditable -->



<div id="footer">
<p class="footer-text">©2012 Galleri Kessel <font color: #696933>|</font> All Rights Reserved<br>
Designed by <a href="http:/www.tegnehulen.dk" target="_blank">tegnehulen.dk</a> &hearts; Latest Update: maj, 2012</p>
</div>

</div>
</div>

</body>
<!-- InstanceEnd --></html>
With meta-tags:
<head>


<!-- InstanceBeginEditable name="doctitle" -->
<title>Galleri Kessel</title>
<meta property="og:title" content="Galleri Kessel" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.jonnakessel.dk" />
<meta property="og:image" content="http://i1086.photobucket.com/albums/j447/Mejse78/frifugl.gif" />
<meta property="og:description" content="esøg dette smukke galleri. Her kan du se mine værker og min rejse som billedkunstner." />


<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2149022" binding="#OAWidget" />
</oa:widgets>
-->
</script>
<!-- InstanceEndEditable -->


<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>


I gave it a name and a description in the configuration and I've been trying to figure out, if I need to upload something to the server to make this work?
But I can't see what it should be....

Thanks for taking the time to help out ☼

Corrosive
05-16-2012, 04:23 PM
So it doesn't pick a description up from the description meta tag then?

johnMoss
05-16-2012, 06:02 PM
If you're going to plug in the open graph you might consider adding the open-like as well.

Your problem is you haven't declared your markup.

Place this tag at the top of your page:



<html lang="en" prefix="og: http://ogp.me/ns#">

then a head tag, add in all of your OG markup, and then close the head tag.
After this, redeclare your html and follow through with the rest of your script.

Here's an explanation: http://ogp.me/

and here's a working example: http://www.cheapcaribbean.com/

Mejse78
05-21-2012, 08:18 AM
Thanks for your help. Now there's an description... but not the one I gave..
Instead it took part of the text on the page and used that. Sadly it's a part that is not great as an description.. And I just don't understand why...

Can you help me out?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" prefix="og: http://ogp.me/ns#"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>


<!-- InstanceBeginEditable name="doctitle" -->
<title>Galleri Kessel</title>
<meta property="og:title" content="Galleri Kessel"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.jonnakessel.dk"/>
<meta property="og:image" content="http://i1086.photobucket.com/albums/j447/Mejse78/frifugl.gif"/>
<meta property="og:site_name" content="Galleri Kessel"/>

<meta property="og:description"
content="I dette galleri kan du se mine værker og min rejse som billedkunstner."/>
<!-- InstanceEndEditable -->


<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">


</head>



<body>


<div id="space" >
<div id="paper">

<!-- InstanceBeginEditable name="top" -->

<div id="top">
<img src="images/layout/logo.gif" />
</div>
<div class="fb">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.jonnakessel.dk&amp;send =false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp; action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
</div>




<br>


<!-- InstanceEndEditable -->

<div id="banner" >
<img src="images/layout/topbanner3.gif" />
</div>


<div id="menu" >
<div class="float">
<ul>
<li><a href="index.html">HJEM</a></li>
<li><a href="galleri.html">GALLERI</a></li>
<li><a href="udstilling.html">UDSTILLINGER</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>
</div>
<!-- InstanceBeginEditable name="jonna" -->
<div id="jonna" >

<div><img class=image_frame src="images/layout/jonna.gif" />
</div>


<div class="tekst">

<br>
<br><h2>Jonna Kessel</h2>
<p>Født 24.07.49 <br><br>
Scenograf v. Stavtrup Scenen siden 1993.</p><br>
<h2>Atalier:</h2>
<p>Råhøj Parken 79
<br>8260 Viby J </p>
<br>
<br>

<h2>Studierejser:</h2>
<p><b>1989:</b>
<br>Frankrig - Les Tuilerie D'affiac, Avignon, Arles, Carcassonne og Montpellier
<br>
<br>
<b>1990: </b>
<br>Sydfrankrig - Agay, Antibes og Vence
<br>
<br>
<b>1992: </b>
<br>Italien - Pietrasanta
<br>
<br>
<b>2000: </b>
<br>Italien - Ophold i billedkunstneren Jørgen Haugen Særensens hus Villa Simi i Pietrasanta
<br>
<br>
<br>
</p>
<h2>Fonde og legater:</h2>
<p><b>1989: </b>
<br>Den Ingwersenske Fond
<br>
<br>
<b>1990: </b>
<br>Kulturministeriets Fond
<br>
<br>
<b>1992: </b>
<br>Nordisk Kultur Fond</p>
</div>
</div>
<!-- InstanceEndEditable -->

<!-- InstanceBeginEditable name="content" -->


<div id="indhold">

<h1>Velkommen til Galleri Kessel</h1>

<p>I dette galleri kan du se mine værker og min rejse som billedkunstner.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="billede" src="images/layout/forside.gif" />
<br><p class="billedtext">Fugle</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="billede2" src="images/layout/en fri fugl.gif"/>
<br><p class="billedtext2">En fri fugl</p>


</div>
<!-- InstanceEndEditable -->



<div id="footer">
<p class="footer-text">©2012 Galleri Kessel <font color: #696933>|</font> All Rights Reserved<br>
Designed by <a href="http:/www.tegnehulen.dk" target="_blank">tegnehulen.dk</a> &hearts; Latest Update: maj, 2012</p>
</div>

</div>
</div>

</body>
<!-- InstanceEnd --></html>

Besides... I would like people to add a comment when they like... but that has dissapeared.

Thanks

johnMoss
05-21-2012, 02:15 PM
You did not copy the code placements in the proper format. Look at your declaration at line 1 and then compare it to the examples. See anything different?

domedia
05-21-2012, 06:56 PM
Hej Mejse,

Just a quick note to be careful about what doctype you declare, and the type of code you actually write. You are declaring the page as HTML 4.01 strict, but you write XHTML. I'm not sure this is a bog problem, but you probably should get that sorted out. This is called the 'Doctype declaration'.

johnMoss
05-21-2012, 07:18 PM
Hej Mejse,

I'm not sure this is a big problem, but you probably should get that sorted out. This is called the 'Doctype declaration'.

It is the problem... As soon as it's corrected, it'll work fine... Kind of an odd markup they have going, but Facebook writes their own rules... You have to open & close the head with required markup, & then redeclare the page with whatever markup you're normally using. The vacation site link above shows an active example.

domedia
05-22-2012, 01:57 PM
The <html> tag is not the doctype declaration though.

Here's the one for html 4.01 strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Mejse78
05-24-2012, 12:34 PM
You did not copy the code placements in the proper format. Look at your declaration at line 1 and then compare it to the examples. See anything different?

Thank you SO much! This helped.
I'm not familiar with all the document types - the one in my file is a DW declaration. :D But I've deleted it now - and I used the:
<meta charset="utf-8" />
- and it works. YAY!

Does anyone have a link where I can read about these doctypes?

Thanks again.

johnMoss
05-24-2012, 02:13 PM
http://www.w3.org/ is the place to go.

Mejse78
05-25-2012, 11:22 PM
http://www.w3.org/ is the place to go.

Thanks.
I'll check that out.

jmichae3
12-11-2012, 12:09 AM
doctypes !doctypes (http://www.w3.org/QA/2002/04/valid-dtd-list.html)

domedia
12-12-2012, 03:45 PM
Nice link Jim

I would suggest everyone use the doctype w3c says is not standard yet; the html5 one.