How to get my Joomla website working with Facebook Open Graph - facebook

I'm running a Joomla 3.4 CMS for my website and I recently enabled gzip and caching in order to speed it up, but now when I post a link to any page on my site from Facebook, it doesn't grab any of the information I'd like to see there (photo, page title, text/description/meta). After doing a bit of research I learned that gzip is known for causing problems with Facebook's bot, so disabled gzip and retested, but it didn't seem to make a difference. I found a plugin (https://github.com/dgt41/facebookfix) and installed it, but that hasn't helped either. I'm at a loss at this point. I'm wondering if maybe something else is going on, but I can't see it. My website is here.

These are all OpenGraph Social Meta Tag settings you have to do. Try these inside the <head> section of every page. You can use other extension also to do this automatically for you.
<meta property="og:site_name" content="My Website Name"/>
<meta property="og:title" content="Your Title Here"/>
<meta property="og:description" content="Your Description Here" />
<meta property="og:image" content="http://www.example.com/images/image.png" />
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.example.com/blog/article-name"/>

Related

Facebook sharing image (og:image) not working the first time despite having og:image:width and og:image:height

I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.

How are Open Graph og:see_also tags intended to behave in Facebook?

I've implemented og:see_also into my posts, but when they're liked, no additional webpages appear.
Is there specific criteria that needs to be met (i.e. do they require a specific og:type)?
Must they be placed in a specific place within the Open Graph Meta Tag order?
Here's how they're set up:
<meta property="og:see_also" content="http://mywebsite.com/article1/">
<meta property="og:see_also" content="http://mywebsite.com/article2/">
They're displayed appropriately in the FB Debugger Tool. I'm just wondering if perhaps I may be doing something wrong, or if the see_also articles will only appear intermittently?
Here's the full code:
<meta property="og:site_name" content="SITE NAME">
<meta property="og:url" content="http://THEWEBPAGE.COM">
<meta property="og:title" content="TITLE">
<meta property="og:image" content="http://IMAGE-HERE.com">
<meta property="og:image:secure_url" content="https://IMAGE-HERE.com">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:see_also" content="http://mywebsite.com/article1/">
<meta property="og:see_also" content="http://mywebsite.com/article2/">
The official OpenGraph protocol page doesn't mention anything about og:see_also, and Facebook's documentation doesn't do anything with it.
However, Pinterest mentions it, which suggests it may one of the og: tags Pinterest has extended from the standard. The only description we get is:
URL pointing to other related articles from the same domain. Up to 6 og:see_also tags can be provided.
Presumably, this tag would only have an effect when Pinterest users "pin" your page and get a "Rich Pin" out of it, which is a feature you'd have to apply for.

Dynamic Facebook Post

I am attempting to create a facebook share button on Page-A that will post a dynamic unique link to Page-B. I have accomplished this however I am unable to control the image that the post shows. When using the button on Page-A the post shows correctly, however once posted the image is of a completely different image found on Page-B. I have included the following on both Page-A and Page-B. (note the extra # is because of cold fusion escaping)
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb##">
<meta property="og:title" content="PaceButler Referral Program" />
<meta property="og:site_name" content="PaceButler" />
<meta property="og:url" content="http://www.pacebutler.com/referral.cfm?Referalcode=#GetProfile.referralCode#" />
<meta property="og:description" content="The lifeblood of our business is New Customers. When you refer a New Customer to PaceButler, we'll pay you what we pay them for the 1st shipment of cell phones they send in (see Program Details). This is an easy way to make some real money!" />
<meta property="og:image" content="http://www.pacebutler.com/images/referral/PB-Referral-Logo-Large.png" />
<meta property="og:type" content="website" />
thanks,
Mark
What I found was that after a few days facebook did eventually clear the images that it had stored in its cache.

Struggling to get FACEBOOK LIKE button to work on site "developed" using Iweb on a MAC

I have tried some of the older responses already posted on the site, but am still struggling to get the code to work.
I have developed a site using iweb, its basic - I am no coder, www.ondulinetileeffectroofingsheets.com , i have easily managed to insert a working video from youtube, and thought that simply copying and inserting the HTML snippet for the facebook like button would also work but the image fails to work, so when I copy and paste the from the facebook developers site, the Facebook image doesn't not appear. - any ideas - thanks in advance x ?
You are going to want to take a look at this link :
https://developers.facebook.com/docs/opengraph/
In there there are details of how to implement og:tags on your page. These tags help the Facebook to decide what image, text and links will be taken from your page to be displayed in the "like" dialog.
The tags look something like this :
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://example.com/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://example.com/zhen/cookie.html">

Unable to Administrate Facebook Comments Plugin

Everything seems to be correctly setup except I am not getting any administrative options. I have the Social Comments Plugin working, I even have the Open Graph tags properly setup and tested using https://developers.facebook.com/tools/debug (Response Code:206) it does scream errors; except still no administrative options.
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:video" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">
This is the meta tags I am using. They are all correctly implemented and tested. I tried with fb:admins and fb:app_id on there own and together. I also have my Facebook User ID and APP ID correct as well. Still no admin features.
The code I am using to make the plugin work is based on exactly what is displayed here. It comments plugin is working. So I am assuming it should all unfold.
https://developers.facebook.com/docs/reference/plugins/comments/
Something I am missing or is this feature not available for the comments plugin?
Update
I just did another test and added a bogus User ID and the debug did not display an error and excepted the fake ID. Shouldn't it have caught that?
I am reading that Facebook only Scrapes your page once every 24 hours.
Would this cause the problem? If it is can you clear this
You can cause facebook to rescrape the page by sending your url thru the facebook linter at: https://developers.facebook.com/tools/lint