Facebook Share preview showing CSS - facebook

Hey everyone I was working on a Wordpress site in a dev environment and when I shared a page on Facebook I would see a nice preview image and some of the text. When I moved the site to production now I don't see the image and the preview text is a bunch of CSS code.
Here are two links to test with
Dev - http://www.facebook.com/share.php?u=http%3A%2F%2Fssb.thejspot.ws&title=Sunset+Beach+Golf+Company
Live - http://www.facebook.com/share.php?u=http%3A%2F%2Fssbeachgolf.com&title=Sunset+Beach+Golf+Company

You don't have any open graph tags defined for either site. You're lucky on the dev site that you were getting what you want.
Either code the open graph tags into your theme or get a plugin (I like Wordpress SEO) that adds the tags for you.
Also, take a look at the output from the Facebook debugger for each of your URLs. That is the first place you should start when you're not getting the results you want.

Related

How to customise Facebook shares

I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.

Ensuring Facebook Opengraph posts look the same on mobile and desktop

I have an app that makes posts to facebook via a self-hosted object using open graph.
On desktop, the post looks exactly as I want. Here is how it looks:
And here is how it looks on mobile (incorrect, seemingly ignoring my sentence construction in the app admin console as well as my OG meta tags in my self-hosted object:
I am trying to find a way to make my mobile posts look more like this one, which seems to have its open graph meta tags honored on mobile as well as desktop (mobile shown here):
Can anyone let me know if I am making a crucial mistake? I can also share the meta tags in the self-hosted object if that will help get to the bottom of this!

Facebook Like/Share (Mostly) not working on my Wordpress blog

Facebook LIKE/SHARE functions are generally not working on my wordpress blog. I cannot LIKE or SHARE any new posts, but oddly if I have already LIKED a page, the SHARE function works fine.
The problem with SHARE is that the normal sharing window pops up, but there is no metadata populated in it. I've looked at the metadata in my blog posts and as best I can tell it is populated correctly by Wordpress. Additionally, I cannot find any differences in the metadata or code between posts that I have previously LIKED and ones that I have have not.
I've tried running the FB debugger/linter for a number of posts on my site and each one returns the message:
Error Linting URL: An internal error occurred while linting the URL.
I've tried googling this error, but cannot find any useful advice on what might be causing it.
Here is a sample post for people to examine this problem:
http://erb.kingdomnow.org/michael-pollan-talks-about-his-new-book-cooked-video/
Thanks...
You should use Open Graph tags (see "Use proper Open Graph tags and large images to generate great previews" and "Using Self-Hosted Objects") in the header of your webpages to help Facebook determine what metadata needs to be shared.
Since you are using WordPress, you could either edit the template file in your theme that defines page headers (normally header.php) or use Facebook's official plugin.

Sharing URL's from Wordpress with Open Graph on Facebook

When the URL's from my site diipad.com are copied and paste or shared directly from my site, facebook doesn't process the URL and it only display the same URL i mean the excerpt and thumbnail doesn't appear.
but if i paste the same link on http://developers.facebook.com/tools/debug it doesn't show any error and it does process the URL's ive checked my HTML structure and it's Ok, the metadata is the one included on the facebook wordpress plugin Open Graph.
Plaese i need help sorry for my bad english.
HERE AN IMAGE OF THE ERROR
Just because the FB debugger doesn't complain about your HTML code, doesn't mean it's all there (it doesn't raise errors for missing tags).
There are many Open Graph plugins for WordPress (just search for "Open Graph" on wordpress.org to see). You might want to give this one a try: http://wordpress.org/extend/plugins/nextgen-facebook/
js.

No Title - Wordpress facebook share

I have created my website using wordpress 3.4.1 and, I tried sharing my webpage in facebook. I do not get any thumbnail or the basic blog description in the facebook post. Instead I get "No Title". I know this question has been asked a number of times in wordpress forums. But, most of them are leading to dead ends. Can some one help me in this regard.
PS: I tried using the facebook debugger (http://developers.facebook.com/tools/debug) I get the following
Error Parsing URL: Error parsing input URL, no data was scraped.
You need to add OpenGraph tags to your page, or even easier, finf a WordPress plugin to do it for you. Run the page through the debugger again and the issues should be fixed.
Just like what Niraj said you need to make sure you have the open graph meta tags on your blog. Here is a plugin which will add them http://wordpress.org/extend/plugins/facebook-open-graph-meta/.