For a Facebook share button, I deed to add some meta tags to a page in Liferay.
The result of the HTML should look like the following example:
<html>
<head>
<meta property="og:title" content="My website title" />
<meta property="fb:app_id" content="4711" />
</head>
<body>...</body>
</html>
How can I do that in Liferay WITHOUT coding but just by configuration in the admin control area?
Note: For www.mydomain.com/en the content of the meta tag should be in English. For www.mydomain.com/de it should be in German.
If this is not possible by configuration easily, it can be all in one single language.
You can add fb meta tags in portal_normal.vm in theme.
Also,these changes are not instantly reflected but takes a while until the fb crawlers re cache content from your tags.
Related
Using Dreamweaver CS6 Fluid Grid Layout.
I've researched the stackoverflow questions (and more) relating to this -
Facebook object debugger:
"Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable."
Another answer on this site pointed out that something in the coding is resulting the secion ending before the meta tags - but I can't work out what it is. Code validator: there is a stray /head and body tag.
http://www.thatsrightratso.com.au/imp/lickit.html
What is it, can anyone help? Thank you
It looks like you added your meta tags inside of the body tag rather than the head. Typically the head section contains metadata and resources that are not directly displayed on the page, where these meta tags were added inside of the body, where HTML is rendered onto the page.
Take a look at this screenshot I took of your code. I have highlighted the Facebook meta tags for you. You should move these up inside of the head element.
<html>
<head>
<!-- title tags, stylesheets, other important items -->
<meta property="og:image" content="http://www.thatsrightratso.com.au/imagesimpjewellery/lickitring9ctyellowgold.jpg">
<meta property="og:description" content="Lickit ring, 9ct yellow gold or sterling silver, mens womens">
<meta property="og:url" content="http://www.thatsrightratso.com.au/imp/lickit/">
<meta property="og:title" content="Lickit">
</head>
<body>
<!-- Page Contents Rendered Here -->
</body>
</html>
I'm trying to customize image, page title, and description data for facebook share feature on my page. When I view the og meta tags in the source of my page, I see the correct info
<meta property="og:title" itemprop="name" content="You got an A!" />
<meta property="og:description" itemprop="description" content="Find out how much you know about the Hittites at MYQUIZPAGE" />
<meta property="og:image" itemprop="image" content="http://PAGE/MYPAGE/MYIMAGE.jpg" />
However, when I plug the url into the facebook debugger, I instead see details of the parent site.
I dont know why this is, as the correct info is sent in the header, NOT appended afterwards or anything like that.
Im using the following anchor for the share button(wihch I have used many times in the past without fail)
<a href="//www.facebook.com/sharer/sharer.php?u=MYURL" target="_blank">
One more detail- the content of the og tags on my page depends on values in the url query string.
Any ideas as to what is going on?
How facebook identify the entered hyperlink and get data from that link. it shows thumbnails, text, pictures, etc. Does facebook using any javascript for framework?
Open graph protocol (OGP) is what helps Facebook get specific data from URL i.e. Web page title, site name, description ... etc
To install OGP on your site (page)
Add: prefix="og: http://ogp.me/ns#" into <html> tag
And:
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="{site_type}" />
<meta property="og:url" content="{page_URL}" />
<meta property="og:image" content="{Thumbnail}" />
between <head> tags.
Those above are basic meta properties You can read more about it on OGP
I have facebook like on my mediawiki site and when I run it through the debugger http://developers.facebook.com/tools/debug I get the errors:
Admins And App ID Missing fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Like Button Tag Missing og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Like Button Tag Missing og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
Like Button Tag Missing og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
It also posts it as a 'recent activity' not a post with the image.
How do I solve this?
The "og:" tags must be in the head element of the HTML page that the like button refers to (usually the page the button is on). The Facebook debugger is telling you that they are not there. They should look like this:
<head>
<meta property="og:title" content="My web page title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://exmaple.com/image.jpg" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:site_name" content="My site name" />
<meta property="og:description" content="This site is awesome!" />
<meta property="fb:app_id" content="YOUR_APP_ID" />
</head>
You can use EITHER the fb:app_id or fb:admins, but not both.
I don't understand this, "It also posts it as a 'recent activity' not a post with the image. How do I solve this?" When the Like button is clicked a post is added to the user's timeline and the post may be visible to their friends depending on how they have configured privacy.
I am creating a Facebook iFrame tab application that features weekly interviews and uses a CMS to manage the interview content. I would like to be able to post a link to my newsfeed that points to the application tab and will show a preview with metadata in the newsfeed. Currently, there is no metadata showing up and it is just a blank link. How can I get Facebook to show a preview of the link to the application tab, the same as it would show a preview of a link to any website when posting to my newsfeed?
I know this was asked a long time ago but I figured I'll share more details on how I went about solving this issue:
Facebook does not read metadata from iFrame or application tabs. In other words, when you share a link of a Facebook tab, Facebook will override the meta data values of the iFrame page with the Page’s default ones. In order to work around this limitation, you can set up a redirect page with custom open graph meta tags. Here is how:
Create a redirect page called redirect.php with meta data information:
<html>
<head>
<title>Name of App</title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<!-- This is a page redirect -->
<meta HTTP-EQUIV="REFRESH" content="0; url=URL_OF_FACEBOOK_APP">
</head>
</html>
Use Facebook URL Linter to scrape page (https://developers.facebook.com/tools/debug)
Enter the address of your app’s root URL.
Use Google Shortner and enter the address of the redirect.php that you set up.
http://goo.gl/
Now you can share the new Google Shortner link
Facebook doesn't read metadata from your iframed tab, but you can set up a redirect page with custom Open Graph meta tags as described in the Facebook Developers Forum here: http://forum.developers.facebook.net/viewtopic.php?id=96146
UPDATE 2012.05.20: forum.developers.facebook.net has been replaced by facebook.stackoverflow.com. The link I provided no longer works, but there are some helpful related threads on the new forum:
http://facebook.stackoverflow.com/questions/8407013/open-graph-information-for-a-link-to-a-page-tab
http://facebook.stackoverflow.com/questions/7197919/how-can-i-301-redirect-a-page-in-the-open-graph-and-retain-facebook-like-informa
http://facebook.stackoverflow.com/questions/6053657/open-graph-pages-can-i-use-a-stub-forwarding-page