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.
Related
all. I am trying to create Twitter cards dynamically by filling in "content=" values with Django model object fields that I can update using the admin panel. My HTML header code looks like this:
<meta name="twitter:card" content="{{ lesson.twitter_card_type }}">
<meta name="twitter:description" content="{{ lesson.twitter_description }}">
<meta name="twitter:title" content="{{ lesson.twitter_title }}">
<meta name="twitter:site" content="{{ lesson.twitter_site }}">
<meta name="twitter:image" content="{{ lesson.twitter_image }}">
<meta name="twitter:creator" content="{{ lesson.twitter_creator }}">
Replacing the variables with static values passes the Twitter card validator checks. When using variables, the browser inspector displays the proper meta tags, but I get the following output from the Twitter card validator log:
INFO: Page fetched successfully
INFO: 13 metatags were found
ERROR: Invalid card name (Card error)
According to this answer Twitter card meta tags work in index.html, not in React Helmet and this answer Dynamically adding meta tags using javascript or jquery [twitter cards], it seems that there might be an issue using variables in meta tags; however, this site https://www.ordinarycoders.com/blog/article/how-to-add-django-meta-tags states using Django model objects should work.
Unfortunately, I need to create cards dynamically the way my site is set up so hard-coding is not an option. Thanks in advance to anyone who can offer any insight!
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
There are previous posts about this on the web, however none of the proposed solutions actually work for my scenario.
I have a children pages which all have their own unique og tags, and a parent root domain page with its own og tag, all to be crawled by facebook so people can see the descriptions/images when they are posted.
However, when I post my child url in the box, the results are blatantly proof that facebook crawled the parent page instead. Even the "see exactly what our scraper sees" page confirms that because it is only the parent template being shown.
Here is a link to fb's scraper : https://developers.facebook.com/tools/debug
Here are my og tags in the root domain html template:
Suppose the parent is www.me.com
Suppose one child is www.me.com/path/path
<head> ...
<meta name="keywords" content="...">
<meta name="description" content="..." />
<meta property="fb:app_id" content="..."/>
<meta property="og:site_name" content="..." />
<meta property="og:type" content="website" />
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
<meta property="og:url" content="http://www.me.com" />
Here are the og tags in the child html template:
<head> ...
<meta name="keywords" content="...">
<meta name="description" content="..." />
<meta property="fb:app_id" content="..."/>
<meta property="og:site_name" content="..." />
<meta property="og:type" content="article" />
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
<meta property="og:url" content="http://www.me.com/path/path" />
This is very frustrating because i've tried removing and adding many of the tags in different combinations, and every single time, the www.me.com parent gets crawled, while the child is left ignored!!
I tried to mimic the order of the tags of other sites with this feature working like cnn.com, but however mine still refuse to crawl the child..
Any help? Thank you.
Check that you're not
Rejecting the crawler's attempt to reach the child page
Redirecting the child page to the parent page when the crawler tries to load it
Including an og:url meta tag on the child page pointing to the homepage
Including a canonical meta tag in the child page pointing to the parent
Those are by far the most likely reasons for this, and though you've said in your question your og:url tags are correct, in my experience that's most likely to be the problrm
I fixed the issue after after finally noticing some odd hints. The site i'm working on is set so the first page view redirects to a splash page if and only if a specific cookie has not been set.
Hence, the Facebook crawler was hitting that page every time. It was not obvious though because the splash page inherits so much and looks just like one of the regular child pages.
What an unfortunate & time consuming bug.
This may be a stupid question, but I'll ask it nonetheless: Do the child urls have public access? The problem you are facing could be because the child url is being redirected to root url.
In the facebook linter output check for Fetched Url and Canonical Url section. This will give you some idea, whether redirections are happening.
It's Facebook.... there's something in their 'cacheing' or whatever you want to call it....
when a page is registered with a incorrect url... correcting that can be tricky....if not impossible...
Just try this.... change your back page url to:
www.me.com/path/path/file1.php
and run it thru the linter....with the correct metatags.....
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.
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)