I have Facebook share button on my Wordpress site. I have the open graph call in my functions.php. The problem I'm having is when you press the share button below a single post you get the meta description of the site from header.php along with a random image posted to Facebook.
When you use twitter which I have linked to my Facebook page you all the meta info along with the correct image for that particular post the same with a Facebook linked Pinterest account.
I've used the Facebook developer tool scraped various post URL and the all came back with the correct meta info and image error free. Can anyone explain this issue to me.
I figured out what the issue was.
Posting solution in case anyone might come across the same problem.
add: <?php the_permalink(); ?> to the data-href= URL:
<div class="fb-share-button" data-href="<?php the_permalink(); ?>" data-layout="button"></div>
oppose to:
<div class="fb-share-button" data-href="YOUR SITE URL" data-layout="button"></div>
This will load all pertinent info into the Facebook Iframe for Facebook Posting.
I have a list of facts
I want people to be able to share each individual fact with a custom pic.
Is this possible?
Looked at sharer but it does not seem to work any more it jsut seems to use the url and not the other parameters.
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&
p[url]=http://google.com&
p[images][0]=http://myimage.png&
p[title]=This is the title&
p[summary]=This is the summary">
<img src="img/button-facebook-like.png" alt="Facebook like" />
</a>
It is only possible to share a specific URL nowadays, Facebook takes the Open Graph tags of that URL for the title, description and image.
Open Graph tags: http://ogp.me/
I can't see any solutions out there that allow this specific request without a lot of scripting or meta tags so I'm hoping there's a simple way to do this.
I'm looking for a custom share links for all four social networks. Let me give a concrete example.
If someone clicks on a twitter icon link on my site, they're clicking the following:
<a href="https://twitter.com/home?status="Welcome to my site and tell all your friends! #sitename #mysiterules http://bit.ly/site">
<img src="twitter.png">
</a>
it will go to Twitter's site and produce the following:
This allows someone to very quickly promote my site with a custom message that they can change if they like but there's no effort involved outside of clicking the icon link.
This is exactly what I want to do with the other three social networks, with a custom message and links. They can also pull the default logo of my site which twitter can't do.
How can I accomplish this?
I recommend you use the proper social sharing buttons like we implemented in on our live campaign page, but here is some code I stole from a mockup of the campaign page.
<div class="leader-half kids0514-share">Share this on:
<img src="images/en/share_mail.jpg" alt="email">
<img src="images/en/share_fb.jpg" alt="facebook">
<img src="images/en/share_tweet.jpg" alt="twitter">
<img src="images/en/share_pin.png" alt="pinterest">
<img src="images/en/share_plusone.jpg" alt="google plus">
</div>
Not all social sharing buttons are created equal, some have more functionality and even old versions you can still use. Pinterest is pretty minimal. I recommend using the official buttons and full structured meta data, not doing it the way this snippet from the mockup does.
On Facebook you are not allowed to share a prefilled message according to Platform Policy 2.3: "Ensure that all content in the user message parameter is entered by the user. Don’t pre-fill. This includes posts, messages, comments, and captions."
If you want people to share on Facebook I would suggest using the Share button: https://developers.facebook.com/docs/plugins/share-button/
We are making use of the FB Like/Share functionality on various pages for our client's site(s). On each page we want shared, we add the following in the meta tags:
<head id="ctl00_Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- social sharing metadata -->
<meta property="og:title" content="Our Site Title" />
<meta property="og:description" content="A description to be used in the share dialog." />
<meta property="og:image" content="http://us.oursite.com/images/FB_ShareThumbnail_US.png" />
<title>Our Page Title</title>
<!-- favicon -->
<!-- stylesheet and js links -->
<!-- inline js -->
</head>
In addition, we also display a Facebook graphic with the following HREF:
The client would like a standard Image, Title, Description used, regardless of the actual page\article shared (sort of "brand control"). We currently have our og: meta tags setup to render down the same data for each page/article.
When the users click the "share" functionality, they don't get a page/article picture, nor any good description or title (as i thought the tags were supposed to provide).
The pages currently being shared are accessible to anonymous users, so the FB bot can access the pages. The image specified in the og meta tag is also available to anonymous users. The first question is why does this method of sharing not seem to use the correct defaults for sharing??
The next question is, the next feature request is to have authenticated pages be able to be shared with the same default image, title, description. I was approaching this from a server perspective, where I'd look for the FB bot and redirect the bot to a "static" page that contains only the minimal markup needed to extract the image, title, description. I've proofed this and it works pretty well. I just feel like it might be a bit complicated. Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??
Thanks In Advance!
Update:
I found this related Q/A on StackOverflow: Facebook Share doesn't show my description or my thumbnail
When I ask "Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??", this is the type of thing I am talking about. If I can pass all data needed to the Facebook sharer.php via querystring parameters (and this results in no Facebook scraper action needed/taken), that is ideal, then I don't need to write any server side logic to re-route the Facebook scraper.
I tried taking the Url provided in the above noted Q/A, reformat with my data, but no luck. Wondering if this is documented somewhere on FB?
There can be a number of reasons why it isn't using the provided og meta data, but unless you share us the code/url we can just guess what might be the issue.
Make sure the og metadata resides inside the <head> tag as it won't be looking for them anywhere else. If you define them in the <body> tag or some other place, it will just ignore them.
If the pages have been liked before you added the metadata, you need to refresh the cache Facebook has for the page by providing the url's to the Facebook linter tool.
If neither of those steps resolve the problem, please share the url/code.
As far as your question regarding authenticated pages goes, you could just add that metadata on the public, non-authenticated version of the page, without checking is it actually Facebook or not, as when someone shares the page, that same information becomes public regardless of the users who view the share have access to the page or not.
After some further digging, I found a way to work with the "sharer.php" functionality to specify exactly the Image, Url, Title, and Description I want displayed, without relying on the OG meta tags. This will work for both anonymously accessible pages and pages that require an authenticated user. The linked StackOverflow Q/A (http://stackoverflow.com/questions/2950189/facebook-share-doesnt-show-my-description-or-my-thumbnail) got me headed in the right direction, then after some digging, found some other posts in the Facebook developer forums (http://forum.developers.facebook.net/) by searching for "sharer.php". This one in particular got me to where I needed to be: http://forum.developers.facebook.net/viewtopic.php?id=101127
In essence, there is no need for the OG meta tags. Just ensure the pieces of your URL are correctly encoded and that you are using the correct parameter keys (i.e. "&p[title]=" rather than "&t=".
After removing the OG meta tags from our site/pages, I also modified our Facebook sharing button/link to render the following markup:
<a href="http://www.facebook.com/sharer.php?s=100&p[title]=Our+Site+Title&p[url]=http%3a%2f%2fus.oursite.com%2fdefault.aspx&p[images][0]=http%3a%2f%2fus.oursite.com%2fimages%2fFB_ShareThumbnail_US_90x85.png&p[summary]=Our+facebook+description+that+is+used+on+the+FB+share+page." target="_blank">
<img src="/images/fb_icon_20x20.png" />
</a>
Note that I was tempted to investigate whether I could find a parameter that allowed me to specify a default "message", but that was not a requirement for us, so perhaps later on I'll dig for that information.
How about this now:
https://developers.facebook.com/docs/sharing/webmasters/crawler
You just need to whitelist the facebook crawler
I'd like to place my google docs form(for newsletter sign-up) on my facebook page.
using this tutorial I was able to create an app, but no content showed http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/
So I wanted to know if there was another way of doing this, or anyway of doing this at all.
I had the same issue with using the iframe that google docs give you and using the url for the application tab on Facebook. The resulting facebook page is blank.
What I did to resolve this is whip up a simple html file that does the embedding from google and placed it on my (ssl encrypted) server. Then I used the url to that file as the application tab URL in my facebook app. Viola it worked.
Is Facebook not allowing embeds from docs.google.com? There's a simple workaround.
Here's the code from my html file on my server with the formkey mangled to protect privacy.
<html>
<body>
<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dGhOU" width="500" height="780" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</body>
</html>
There's a php class that i've been using. It provides functionality to capture form elements into a google doc.
That's a possibility but requires a larger learning curve if you're not familiar with PHP:
http://code.google.com/p/php-form-builder-class/