I recently created a facebook application for integrating a domain's webpages with facebook.
But I can't figure out why the Admin Link will not show on the webpage whilst logged into fb as the admin.
Reading the developer documentation can be a little confusing since there seem to be various methods of implementing the code required on each webpage. It is difficult to determine which namespace matches with which way to load the SDK and with which markup method.
I am attempting to do this for HTML5.
<!DOCTYPE HTML>
<!-- Whilst I have found many html namespace modifications for XFBML methods I did not see any requirements for html5 an d the following method -->
<html>
<!-- The head og namespace is taken from the fb developers app > open graph > object types > get code link -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- The meta properties are also taken from the fb developers app > open graph > object types > get code link -->
<meta property="fb:app_id" content="APP ID NUMBER"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.domain.com/page.html"/>
<meta property="og:title" content="TITLE"/>
<meta property="og:description" content="DESCRIPTION."/>
<meta property="og:image" content="http://www.domain.com/og_thumb.jpg" />
<!-- The meta property here was not included with the above but is required according to https://developers.facebook.com/docs/reference/plugins/like/ -->
<meta property="og:site_name" content="SITE NAME" />
</head>
<body>
<!-- The following is the code given when using the "like" code generator from this page https://developers.facebook.com/docs/reference/plugins/like/ and selecting the "HTML5" option -->
<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_GB/all.js#xfbml=1&appId=APP ID NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.domain.com/page.html" data-send="true" data-layout="button_count" data-width="0" data-show-faces="false" data-font="arial"></div>
</body>
</html>
Whilst logged in as the admin user of the fb app I am able to visit the admin for the page by looking up the page name/id and append them to a url like so:
http://www.facebook.com/pages/TITLE-OF-PAGE/GRAPH-ID-NUMBER
I noticed this bug that seems related:
https://developers.facebook.com/bugs/178579068908181/
I understand that when using fb:admins the admin must "like" a page before being able to see the Admin Link.
However I am assuming that when using fb:app_id that it should not be necessary to "like" the page.
What am I missing to enable the Admin Link for the webpage ?
You should use both fb:app_id and fb:admins in the OG Markup. Don't forget to use the debug tool to scrape the page again so facebook knows that the details have changes. The admin link will only show if you have the fb:admins on the page.
You don't have to like the page, you could always wait for a user to like the page. Facebook will then create the associated page once it has enough likes and the admin link will appear correctly.
Related
when paste my web site link to Facebook time line the demo banner image appear in the preview although i removed them
Facebook Markup for sharing in facebook
Facebook has made its own markup language to understand content in your webpage.
This makes sharing in Facebook managed, beautiful and easy. For this you have to add following tags inside head tag of your webpage.
<meta property="og:url" content="Your current page's url" />
<meta property="og:type" content="content type" />
<meta property="og:title" content="Title of your page or title you want to show in facebook" />
<meta property="og:description" content="Short description what your webpage is about" />
<meta property="og:image" content="url of your image to be shown in facebook" />
You can now share beautiful content in facebook.
Hope it helps.
You have to use facebook open graph markup. Using this you can set title, description and image. To set an image, use this
<meta property="og:image" content="IMAGE_URL" />
Use those tags inside <head>. May be helpful, try this open graph markup
I currently have a blogging app hosted on heroku with a facebook share button. I googled read some post hear and other sites and came to the conclusion that I'm supposed to use meta tags in my head. So after running my url through the facebook url debugger and seeing these results
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Share App ID Missing The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
I did this
{% block fb_meta %}
<!- Search for these meta tags -->
<meta property="og:title" content="{{ post.title }}" />
<meta property="og:image" content="{{ post.image_url }}" />
<meta property="og:description" content="{{post.body}}">
<meta property="og:site_name" content="ysite"/>
<meta property="og:url" content="http:mysitedotcom{{ post.get_absolute_url }}" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<!-- Author info -->
<meta property="article:author" content="https://www.facebook.com/profile.php?id=100013675372228" />
<meta property="article:publisher" content="https://www.facebook.com/profile.php?id=100013675372228" />
<!-- End -->
{% endblock fb_meta %}
on my detail page and this in my head
{% block fb_meta %}
{% endblock fb_meta %}
It still does not work and shows the wrong pic, even after I deleted it. And when I check my console everything shows in the tags
like this
What is my issue? thanks for all help
EDIT this is the out put when I enter a url at facebook debugger
another question does order matter?
the following has been working for me. I have been fetching new scrape information which has the effect of updating the pic and for others who mayneed this info in the future the following is from the face book docs
Pre-cache the image with the URL Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
I created a web app with Rails and gave it the name on my local host LP4. Rails then made that the title of the site and, without thinking, I forgot to change it once I added a Facebook like button. Now anytime I or anyone else clicks "like" it shows that they like "LP4" on their facebook page. The only place it said LP4 on my site was in the title tags and I've changed them to the proper title of the site.
Furthermore, I put the Facebook meta tags in the header of my site indicating the new title etc, and the like button still puts "LP4" on the Facebook page.
I also never put the title LP4 on Facebook's developer settings http://developers.facebook.com so I don't know where it's getting it from.
Anyone know how to fix this?
<meta property="og:title" content="My New Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://mydomain.com/"/>
<meta property="og:image" content="http://blah.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="2484848484848"/>
<meta property="og:description"
content="random site description."/
>
I appreciate this could be construed as a somewhat lame question but the issue has me utterly perplexed. I simply cannot get the like button count to show up for a particular domain. The exact same code on an alternative domain works fine.
The problematic domain is www.gold.org. I have made four test cases, each using code basically verbatim from the FB website. In each example the url to be liked points to the domain's homepage (unless specified).
http://www.gold.org/test.php - HTML 5 implementation, this page also contains links to the other examples and open graph info.
I have taken time to ensure that the correct OG tags are in place (using the facebook debug tool), that each site has admin ids and have even gone as far as to implement facebook/insights for each site. The gold.org domain has used addthis.com analytics for sometime and I have recently upgraded the code to use native social button code. Insights reports show enough traffic to warrant the count being displayed, and an fql query for the gold.org homepage currently reports a count of 86.
Below is some sample code from the gold.org domain, for those unable/unwilling to check the examples above. The test case in the goldinspirations.com domain is the same, but with relevant urls and OG tags for that site.
If anyone could shed light on this I would be entirely grateful. I have read many other questions/answers related to this issue here on the FB stackoverflow site, and I believe I have implemented everything correctly. Feel free to shoot me down in flames if I have missed somethingm, I promise to slap my forehead and say DOH.
Many thanks
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FB Test</title>
<meta name="robots" content="index,follow" />
<meta name="copyright" content="Copyright (c) 2012 World Gold Council" />
<meta name="author" content="http://www.gold.org" />
<meta name="publisher" content="World Gold Council" />
<meta property="og:title" content="Homepage > World Gold Council"/>
<meta property="og:description" content="The World Gold Council – the market development organisation of the gold industry and voice of authority for gold" />
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.gold.org/"/>
<meta property="og:image" content="http://www.gold.org/assets/static/www.gold.org/img/favicon-apple.png"/>
<meta property="og:site_name" content="World Gold Council"/>
<meta property="fb:admins" content="100001681197681,536819656" />
</head>
<body>
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.gold.org" data-send="true" data-layout="button_count" data-width="300" data-show-faces="false" data-font="arial"></div>
</body>
</html>
http://www.gold.org/test.php > 702 likes
http://www.gold.org/test2.php > 702 likes
http://www.gold.org/test3.php > 3.1m likes
http://www.goldinspirations.com/test.php > 92 likes
http://graph.facebook.com/?ids=http://www.gold.org > 702 likes
http://graph.facebook.com/http://gold.org > 702 likes
This does concern me: http://graph.facebook.com/10150203036463274 doesn't display much information on your likes or shares like others tend to list like: http://graph.facebook.com/cocacola
I'm running vBulletin 4.1.5 and I have configured it's Facebook settings. The problem I'm facing is when someone clicked LIKE button, the thumbnail posted in Facebook is not the first image in the thread, it will pick randomly from anywhere in the page i.e. avatar of any user replied in that thread!
Appreciate your help!
one solution is that you can define a global "facebook-thumbnail" for all shares.
Go to
AdminCP
Settings
Options
Facebook Options
Image URL
This image should be your site-logo or something else.
I'm still programming with vB3.8.x, however I'm working on a plugin for facebook liking. Might help you write you're own for vB4.x
First, you need opengraph and facebook namespaces defined:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
Second, you need facebook's javascript:
<scr ipt type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</scr ipt>
Last, you need open graph tags defined in the section of the html page:
<meta property="og:type" content="article" />
<meta property="og:title" content="this shows up as article's title when you like" />
<link rel="image_src" href="http://www.yoursite.com/yoursite1.jpg" />
<meta property="og:image" content="http://www.yoursite.com/yoursite1.jpg" />
<link rel="image_src" href="http://www.yoursite.com/yoursite2.jpg" />
<meta property="og:image" content="http://www.yoursite.com/yoursite2.jpg" />
<link rel="image_src" href="http://www.yoursite.com/yoursite3.jpg" />
<meta property="og:image" content="http://www.yoursite.com/yoursite3.jpg" />
<link rel="image_src" href="http://www.yoursite.com/yoursite4.jpg" />
<meta property="og:image" content="http://www.yoursite.com/yoursite4.jpg" />
The plugin I'm working on will loop through the top 5 attachments for a post and write out image_src tags and og:image tags. Not yet sure which hook I'll use.
pseudo code:
$attachs = $db->query_read_slave("
SELECT attachmentid, attachment.dateline
FROM " . TABLE_PREFIX . "post AS post
INNER JOIN " . TABLE_PREFIX . "attachment AS attachment ON (attachment.postid=post.postid AND attachment.visible=1)
WHERE threadid = $threadinfo[threadid]
AND post.visible = 1
ORDER BY filename DESC
LIMIT 5
");
if ($db->num_rows($attachs))
{
while ($attachment = $db->fetch_array($attachs))
{
$strImages = "<meta property=\"og:image\" content=\"/attachment.php?attachmentid=$attachment[attachmentid]&d=$attachment[dateline]\" />"
}
}
FYI - facebook seems to add thumbnails in a reverse manner. They'll look at the last og:image and use that as the first thumbnail; the next thumbnail shown would be the second to last and so on. Might want to play with the sort order of the SQL if that's important. Also, the image_src link is used for non-open graph social sites (google plus, twitter)