Problem Editing HEAD tag for Facebook Open Graph

In order for pages to play nice with some of the new Facebook features they can add meta tag content to identify the page as a specific "object" in the Facebook Graph.
The problem is they ask you to add some namespace information as an attribute in the head tag and when I try to put anything in the actual tag itself I get an error:
Header must contain <head> and </head> tags.
I'm attempting to make the head tag look something like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# my_fb_app: http://ogp.me/ns/fb/my_fb_app#">
I have an end tag for head, I just thing the validation fails if you put anything in the head tag itself.
Any ideas?
Thanks,
Greg

<tt>prefix</tt> is not an HTML atttribute: it is part of RDF (which I haven't got my head round at all). However I get the same error on apex.oracle.com using
<head class="foo"><tt>class</tt> is one of the HTML global attributes permitted on the <a href="<tt>head</tt> element, so this is definitely a parsing bug in APEX.
Couple of possible workarounds:
<li>In the examples in RDFa spec the <tt>prefix</tt> occurs in the <tt>html</tt> element, which APEX 4.1 will permit.
<li>Add the <tt>prefix</tt> to the <tt>head</tt> element using a Dynamic Action/JavaScript on page load.
You might try these and see whether they are compatible with whatever Facebook is doing.
Please include the following information when posting a question (especially if it might be a bug):
<li>Full APEX version
<li>Full DB/version/edition/host OS
<li>Web server architecture (EPG, OHS or APEX listener/host OS)
<li>Browser(s) and version(s) used

Similar Messages

  • How to edit head tag for fullscreen presentation

    Hello! I'm making a presentation and as such I would like to open fullscreen in safari. I have read some posts in various places suggesting the use of <meta name="apple-mobile-web-app-capable" content="yes"> , but for that I have to include the code in the <head> section of the html, and I can't find the way to edit the head within Edge Animate. I tryed editing Edge's resulting .html file, but when I do it manually then my project within Edge gives me errors.
    1- How can I insert, within Edge, elements in the head section of the html file?
    2- Does anyone knows how can I open a fullscreen (chrome-less, toolbar-less) html5 presentation on an iPad 2?
    Thanks a lot!

    Hello,
    You could add it, as you did, in the final html-file if you are happy with the content and won't need Animate anymore for the specific element you've created. I've only used or rather tried out this app for a couple of days now but that is how I use it.
    Since jQuery is included you could try this;
    $('head').append("<meta name='apple-web-app-capable' content='yes'>") ;
    view the code in 'window -> code' up in the right corner press 'View full code' skimm trough the code and there is a line that says "...Paste code here bla..."
    Hope it helps.

  • Problem with generating thumbnails for Facebook

    After yesterday's Business Catalyst failure (Intermittent site loading issue on all data centers) we have a problem with thumbnails for Facebook.
    Our each publication has an extra tag og:title placed in the <head>. For example in this article: http://www.leftlane.pl/lip14/zanizanie-przebiegu-samochodu-w-koncu-stanie-sie-niemozliwe.h tml
    there is tag <meta property="og:image" content="http://www.leftlane.pl/lip14/images/364994_8207.jpg" />
    Until yesterday, every published text was getting into debugger (https://developers.facebook.com/tools/debug/). Debugger fetch the image creating a thumbnail. Everything worked as it should.
    Unfortunately, after yesterday's failure thumbnails are no longer generated. In place of the thumbnail is a white spot, like in the picture below. Can I do something to thumbnails work again?
    We are using Adobe Muse (2014.1).

    Just a word of warning about this facebook tester, facebook caches results for sometimes upto 48 hours, so if index the page using facebook then make a change on a page then reindex most of the time (in my dealings) it looked the same, I had to throw different querystring information into the URL or use different URLs to make it look different to facebook and get a fresh (re)index and for it to pick up changes.

  • Editable Head Tags

    Greetings,
    I've seen a response elsewhere but I can't respond to it so I'm probably adding duplicate info. Anyway, I've acquired a template website that is built in ASP. It doesn't appear that I can edit the head tags: title, description and keywords. I tried placing the following within the head tags but it didn't work, I still can't edit it on the other pages.
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Title entered here+</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="description" -->
    <meta name="Description" content="Description entered here">
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="keywords" -->
    <meta name="keywords" content="Keywords entered here." >
    <!-- InstanceEndEditable -->
    I've done this exact same thing for HTML websites and they work fine.

    Hi Murry,
    Yea, sorry, I meant to say that I AM doing it in the template. Here is the current Head of the template:
    <!--#include file="../includes/breadcrumb.asp"-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../jdSlider/jawdropper_slider.js"></script>
    <link rel="stylesheet" href="../jdSlider/jawdropper_slider.css" type="text/css" />
    <link rel="stylesheet" href="../examples.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../csshorizontalmenu.css" />
    <script type="text/javascript" src="../csshorizontalmenu.js">
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
    * This notice must stay intact fok
    r usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Our Title</title>
    <meta name="Description" content="Out Description
    <meta name="keywords" content="Our Keywords" >
    <style type="text/css">
    <!--
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    color: #333;
    a:link {
    color: #333;
    a:visited {
    color: #000;
    . smallbodytext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    .image_left {
    float: left;
    margin-right: 20px;
    padding-bottom:15px;
    margin-top: 15px;
    .image_right {
    float: right;
    margin-left: 20px;
    padding-bottom:15px;
    margin-top: 15px;
    .pdf {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #069;
    font-variant: small-caps;
    h6 {
    font-family:Verdana, Geneva, sans-serif;
    font-size:20px;
    font-weight: normal;
    border-bottom: 1px gray dotted;
    color:#006699;
    -->
    </style>
    <link href="../style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    margin-top: 0px;
    -->
    </style></head>
    Here is what I replaced it with but doesn't seem to work:
    <!--#include file="../includes/breadcrumb.asp"-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../jdSlider/jawdropper_slider.js"></script>
    <link rel="stylesheet" href="../jdSlider/jawdropper_slider.css" type="text/css" />
    <link rel="stylesheet" href="../examples.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../csshorizontalmenu.css" />
    <script type="text/javascript" src="../csshorizontalmenu.js">
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
    * This notice must stay intact fok
    r usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Our Title</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="description" -->
    <meta name="Description" content="Our Description">
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="keywords" -->
    <meta name="keywords" content="Our Keywords." >
    <!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    color: #333;
    a:link {
    color: #333;
    a:visited {
    color: #000;
    . smallbodytext {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    .image_left {
    float: left;
    margin-right: 20px;
    padding-bottom:15px;
    margin-top: 15px;
    .image_right {
    float: right;
    margin-left: 20px;
    padding-bottom:15px;
    margin-top: 15px;
    .pdf {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #069;
    font-variant: small-caps;
    h6 {
    font-family:Verdana, Geneva, sans-serif;
    font-size:20px;
    font-weight: normal;
    border-bottom: 1px gray dotted;
    color:#006699;
    -->
    </style>
    <link href="../style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    margin-top: 0px;
    -->
    </style></head>
    In case you can't spot the difference, I added editable regions:
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Our Title</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="description" -->
    <meta name="Description" content="Our Description">
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="keywords" -->
    <meta name="keywords" content="Our Keywords." >
    <!-- InstanceEndEditable -->

  • Editable head tag

    Whenever I try to attach a stylesheet, it won't attach.  I looked and ever though my head tag says it's editable, it's grayed out. 

    Where are you attaching the style sheet? Is this on the template page or the HTML page?
    Make sure you are adding the css inbetween the editable region for head section as below
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    -HTH
    Bhawna

  • Edit XMP-tags for MP3

    Hello
    Not sure if this is the right forum but I give it a try...   I have used XMP for keyword-tagging a big collection of recordings (MP3)  in Adobe Bridge. Unfortunatley the CreateDate-tag is wrong and I would  like to modify the tags. For image or video there are several softwares availible to edit XMP-tags (like  Exiftool and MetadataTouch) but for MP3 I haven't found anything.   Is there any external software (Windows) availible for editing  XMP-datetags in audio files?
    Best reagrds
    Fredrik

    Not sure how many other people noticed, but iTunes 8 removed the ID3 tag "set version" feature from the "Advanced" menu. Part of the whole simplification push, I guess.
    My DJ software (Traktor) doesn't like certain ID3 versions, so I sometimes need to batch change tags to ID3 v2.3. I.e. I don't need to edit the song metadata -- iTunes is great for that. I just need to batch change the tag version to ID3 v2.3.
    I guess this is a bit arcane- any suggestions?

  • Facebook open graph & Business Catalyst

    Hi all
    This is perhaps leaning toward a FB integration problem rather than BC.
    But hey - it might help
    I have created a FB app called Skimax Deals (although its not reall an app)
    I have loaded the data into the Skimax Social part which enables me to add the FB like module
    I have added one tag to one page and created it on a test template with the og meta data meaning it is specific
    Mostly - it is working well.
    And I love that it is posting controlled content to FB
    http://www.skimax.com.au/australia/ski-thredbo.htm
    You Can Share no problem
    and sharing ends up perfect on FB
    Liking however is different
    There are 2 issues
    1. The description is not making its way to the LIKE
    2. The app is genrating a URL string which i dont want as my old dev from 4 years ago made the menu work based on the page URL
    ?fb_action_ids=720861794614249&fb_action_types=og.likes&fb_source=aggregation&fb_aggregati on_id=288381481237582
    Anyone got any ideas on why the description is not making its way
    here is a screen grab from the app
    Cheers and Thanks

    <tt>prefix</tt> is not an HTML atttribute: it is part of RDF (which I haven't got my head round at all). However I get the same error on apex.oracle.com using
    <head class="foo"><tt>class</tt> is one of the HTML global attributes permitted on the <a href="<tt>head</tt> element, so this is definitely a parsing bug in APEX.
    Couple of possible workarounds:
    <li>In the examples in RDFa spec the <tt>prefix</tt> occurs in the <tt>html</tt> element, which APEX 4.1 will permit.
    <li>Add the <tt>prefix</tt> to the <tt>head</tt> element using a Dynamic Action/JavaScript on page load.
    You might try these and see whether they are compatible with whatever Facebook is doing.
    Please include the following information when posting a question (especially if it might be a bug):
    <li>Full APEX version
    <li>Full DB/version/edition/host OS
    <li>Web server architecture (EPG, OHS or APEX listener/host OS)
    <li>Browser(s) and version(s) used

  • How do i edit id3 tags for all mp3s in a folder?

    If I have a folder of mp3s, how do I set all of their id3 album tags to the same album? For instance, in Windows you can just select all of the files and then right click and go to Properties where any tags you edit get applied to each of the files. I'd prefer to do it all in Finder, but if there's some way through iTunes, or another app, I'd be glad to hear about it.

    That's the problem though, the tracks aren't in the same album according to their current id3 tags.

  • Cannot edit ID3 tags for newly added tracks

    I want to stress: this is for iTunes 10.5 b2 but I want to make sure this gets out there so this issue can be resolved sooner rather than later since it's somewhat ESSENTIAL for iTunes to actually function properly.
    But I upgraded to b2 from b1 today and now anytime I add any new mp3 files I cannot edit the ID3 tags - in fact I go to edit them and all the options are greyed out...
    Anything added PRIOR to the upgrade is editable it's just anything I add since the upgrade. I've tried restarting the app and it still is locked.
    Anyone have any suggestions? Has anyone else seen this?

    Since iTunes 10.5 is development release only and you as a developer agreed to not discuss it in accordance with your non-disclosure agreement, you should post the question over here -> http://www.developer.apple.com

  • Problem creating custom tags for site that has no outside internet connecti

    I've created a set of custom tags that work fine until we install our app at the customer site. The customer site has no outside Internet access, and so the DOCTYPE is failing since it references the web-jsptaglibrary_1_1.dtd located on Sun's site.
    I tried copying the dtd locally and got it to work, but the solution sucks because this web-jsptaglibrary_1_1.dtd file is referenced in both my taglib.tld file AND the web-jsptaglibrary_1_1.dtd itself. Soooo....I can put in a URL that references it on the local machine, e.g.,
    In the taglib.tld file:
    <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.// DTD JSP Tag Library 1.1//EN"
    "http://ClientAAA/web-jsptaglibrary_1_1.dtd">
    In the web-jsptaglibrary_1_1.dtd file:
    <!ATTLIST taglib id ID #IMPLIED
    xmlns CDATA #FIXED
    "http://ClientAAA/AdProduction/web-jsptaglibrary_1_1.dtd"
    >
    but that means for every client that uses this app (and we have several) I have to change that URL inside both these files.
    I tried simply changing it to the relative "web-jsptaglibrary_1_1.dtd", e.g.,
    taglib.tld:
    <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.// DTD JSP Tag Library 1.1//EN"
    "web-jsptaglibrary_1_1.dtd">
    web-jsptaglibrary_1_1.dtd:
    <!ATTLIST taglib id ID #IMPLIED
    xmlns CDATA #FIXED
    "web-jsptaglibrary_1_1.dtd"
    >
    but then it is requiring me to put the dtd in both my web app root directory AND my jakarta/bin directory. I get the following error:
    XML parsing error on file ../vtaglib.tld: java.io.FileNotFoundException: D:\jakarta\jakarta-tomcat-4.1.29\bin\web-jsptaglibrary_1_1.dtd (The system cannot find the file specified)
    It seems like I must be missing something here. This shouldn't be this hard. And it seems funny that to use custom tags, you have to have Internet access in the first place.
    Help!!! :)
    Thanks.

    Yeah, I think it's a bit ridiculous that in order to make all the tag library examples and instructions work, you have to have access to the Internet. I haven't seen a single example on how to make it work if there is no Internet access. That's very limiting. And I've tried all sorts of other ways of doing it, such as
    <!DOCTYPE taglib SYSTEM "web-jsptaglibrary_1_1.dtd">
    but even then it won't work because I get an error message saying:
    XML parsing error on file /assets/../vtaglib.tld: java.io.FileNotFoundException: D:\jakarta\jakarta-tomcat-4.1.29\bin\web-jsptaglibrary_1_1.dtd (The system cannot find the file specified)
    I just don't think I should have to place this file in the bin directory. There has to be another way. Do I need to modify the dtd somehow? Cuz the dtd has the following line...is this messing it up??
    <!ATTLIST taglib id ID #IMPLIED xmlns CDATA #FIXED "web-jsptaglibrary_1_1.dtd">
    I sure could use some help.

  • I am not able to share a blogpost image on facebook using the open graph meta-tag for the blogpost image.

    Dear Members,
    I am wrestling a few days now, and still not able to get a blogpost image into the facebook share-box.
    This is the link where i am talking about:
    Top 10 Celebrities on Holiday in Saint Tropez
    I have 2 issues:
    1
    Below ( under the blog-post ) you'll find my facebook like button.
    When i like the blog-post, the share-box pops up BUT without the blog image.
    I put the link in the debugger window from Facebook, but it tells me that the open graph tag for a image is not proper defined.
    this is the link to facebook debugger : https://developers.facebook.com/tools/debug/
    So i created this meta-tag :  <meta property="og:image" content="/_assets/images/blog/img-{tag_blogpostid}.jpg" />
    and put it inside the head of the html code for the detailed blog post lay-out ( site-manager/module-templates/Blog lay-outs/Blog post detail lay-out )
    2
    I dont know how i must specify the URL to be liked on facebook.
    My blog-list url = http://www.duvanduvan.com/blog  BUT i have to specify the url for a single blogpost item, but have no idea what to specify. i tried different url's like : duvanduvan.com/blog/{tag_itemurl} etc.... with no result
    Can you also help me out here?
    I really tried everything i possibly know off but without result :-(
    Can somebody help me out here?
    Much much appreciated.
    Stefan.

    try selecting music from the top bar check the songs you want, then sync

  • How to use open graph tags in muse to show facebook share images

    i am trying to use a facebook share button. i would like to have a preview of the image in the story i want to have shared.
    i know that it has to do with open graph tags. i am unsure of how and where to add these og tags to my muse program to have the preview of it show in the share window

    Hey tgtoast.
    I don't think this is possible in Muse, however, if you're at all comfortable editing your HTML file, then you can add the tags after they're uploaded to your host.
    Just log into your host and through file manager, find your index.html file. Open it for editing.
    Anywhere between the <head> and </head> tags, enter the following code:
    <meta property="og:image" content="http://www.yourdomain.com/imagename.jpg" />
    Then you should go to the Facebook Debugger https://developers.facebook.com/tools/debug and enter your website URL to make sure Facebook is showing the image you want.

  • Meta tags for Open Graph

    1. These are the meta tags that I use (I hope am using them right). What do you use mostly?
    2. Also I have a problem when sharing my website on facebook. the og:image is for forcing facebook to use an image of my preference as a thumbnail. Instead of that facebook is using a wrong image and marked it as "safe_image". Why is this happening?
    <meta property="og:title" content="Myname - Best Products in Town">
    <meta property="og:type" content="Product">
    <meta property="og:url" content="http://www.mybestproducts.com/">
    <meta property="og:site_name" content="Myname">
    <meta property="og:description" content="Selling the best products">
    <meta property="og:image" content="images/mylogo.png">
    <meta property="og:image:width" content="550">
    <meta property="og:image:height" content="550">
    Thank you all in advance

    Thanks but it's not what I am looking. First of all this article is not complete. There're missing attributes like : <meta property="fb:admins"  which is related to open graph meta tags. Also what I ask i what experts use when it comes to open graph meta tags  from their experience.
    Also I asked for a problem related with facebook posting. When I share my website facebook doesn't grasp the image as it supposed to do (as set in meta tag og:image). I used the facebook debugger and this is what I got :
    1. Object at URL 'http://(MY WEBSITE URL)/' of type 'designer' is invalid because the given value 'images/IMAGE.png' for property 'og:image:url' could not be parsed as type 'url'
    2. To help you debug, these are the canonical URLs this URL used to point to : facebook.com/(MYFACEBOOK PAGE).  I used to forward my domain to my facebook page for long time. Now that I've made my website what should I do? Will my domain stay connected with the wrong image forever?

  • Problem applying Spry tool tips to child pages because the head tag is in a locked region

    I’m new to DW and migrating a site from GoLive CS2 to DW CS5. The site uses templates created in GL CS2. I have stripped out as much GL stuff as possible.
    I want to use the SPRY tooltips as a way to show captions for graphics that are on some of the pages (I used to use an Open New Browser window for that but I don’t have as much control in DW as I did in GL). But when I try to apply SPRY tooltips (or any SPRY widget for that matter) I get the following message:
    “Required links could not be added to this file because the <head> tag is in a locked region. To insert this content, open the template file ‘xyz.dwt’ and either unlock the <head> tag or add this content to the template.”
    I am not sure how to go about solving this problem. In the template there is an editable region for adding graphics but in the template itself there are no graphics or anything else to apply a tooltip too. Also in the child pages there may be more than one place to use a tooltip. So that suggests to me that I should not add a tooltip to the template. That brings me to the other option.
    How would I go about unlocking the  <head> tag in the template, without messing everything up?
    Or, should I detach any page from the template when I want to add tooltips then reapply the template? I am planning to ditch the GL template anyway and apply a DW template to all the pages anyway.
    Any suggestions as to what I should do?
    Yours faithfully
    Branko
    PS I’m using Mac with Snow Leopard.

    I found a solution.
    I just made a transparent PNG. Put it in an inconspicuous part of the template. On the child page I could make as many copies as I needed making sure I provided id tags for each use etc.

  • Designing a Field Editable Header for Merging with Exsisting PDF doc

    I'm trying to accomplish designing a Field Editable Header so I may merge (import) into an exsisting PDF file to create 1 file.
    I have already designed my header in Live Cyle with editable fields. The only issue is when I save it as a PDF file I can't merge this with an existing PDF file to make just 1 PDF document.
    I also tried importing the header as a stamp but the issue here is the fields no longer stay editable in my header.
    My Business:
    What im trying to accomplish is sending out Submittal Sheets (Information Documents) with a professional looking header. I want to make this a simple process were I can open up a PDF document and place in the header (has to be with editable fields) for several PDF documents.
    Attached is the header I designed and would like to merge with PDF documents to creat 1 file. Please Note; the header has to still stay editable.
    Thanks,
    Anyone that can help would be greatley appreciated, James Alto

    And That would require a PC, because LiveCycle Designer does not exist on a Mac and most likely never, ever will.
    Or would require The cost of Parallels about $80, Windows 7 upwards of $300 depending upon the version, and what ever Live Cycle designer Cost around $100.00
    Or buy a decent PC (not one of the 2-300 dollar jobs that all is good for is using IE) with windows 7 on it. Then get a Copy of Acrobat and Live cycle Designer.

Maybe you are looking for