I created a Coming Soon page with a "Share on Facebook" button but when it's clicked it'll open up Facebook on the "Say something about this" page but the actual content it's shows is nothing but a 403: Forbidden. When I end up sharing it anyway it still appears on my wall as the 403: Forbidden but the link as it should works though, i.e. by clicking on it on my wall it'll take me to my site just fine. Also when I go to my site normally it also works. I'm using Nginx as my server and from what I've seen 403s are quite common for Nginx and I've found multiple articles dealing with 403s but none of them talk about solving it for FB share buttons (only for when you get a 403 trying to access the site normally).
In my HTML I have the following meta tags in the head, the following script and the following share button:
<!-- Meta Tags: -->
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="exampleName" />
<meta property="og:description" content="exampleSlogan" />
<!-- FB Script -->
<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 = 'https://connect.facebook.net/i/suspect/i/should/maybe/keep/this/part/secret';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Share button -->
<div class="social-btn btn-fb" data-href="http://example.com" data-layout="button" data-mobile-iframe="false">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=example.com;src=sdkpreparse"><i class="fa fa-facebook"></i></a>
</div>
I'm sure you'll be able to tell where I censored urls, values, etc. but if you're not sure whether or not something is wrong or if it's censored, feel free to ask
As far as Nginx goes my skills are still pretty limited so I don't really know what to include here to help solve the issue so If you want me to post something Nginx related let me know and I'll do it. Also let me know if I need to supply any other information.
Edit I don't know if this is relevant to my issue but when I open the my web page it gives my js error: FB.NativeExtensions.onready only works when the page is rendered in a WebView of the native Facebook app. Test if this is the case calling FB.UA.nativeApp()
To figure out what goes wrong in such a case, re-scrape the URL using the Facebook debug tool, and then check the server logs around this time.
If scraping alone solved the issue, then your server for some reason blocked the request the last time the Facebook scraper did try to gather data, but doesn't any more now. If this wasn't a one-off occurrence, but turns out to be a more systematic issue with new articles, then check if you maybe have a like button embedded in a preview of the URL that is only available to the logged-in admin, or something like that, that could trigger a scrape by Facebook before your system is willing to answer the request "properly" to outsiders.
If you need to correct this issue for more than a few URLs now, you can also trigger a re-scrape via the API.
Related
I am trying to test out the twitter cards and can't figure them out. I coppied one of their examples and just changed target link so it would link to my site. I created this quick example website to test out: http://www.canvasmagazine.tk/index.htm/
When I go to twitter card validator, it keeps returning the same error.
ERROR: FetchError:exceeded 4.seconds to Portal.Pink-constructor-safecore while waiting for a response for the request, including retries (if applicable) (Card error)
So I took out the CSS which has custom fonts and background and would slow down the runtime. Yet I still received the same error. I also went back and forth changing the metadata from name to property and then combined this with the above and still no luck. Hopefully it is something obvious I'm missing. Any help would be appreciated.
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:creator" content="#Environmentnyou">
<meta property="twitter:domain" content="http://canvasmagazine.tk/index.htm">
<meta property="twitter:title" content="Canvas Magazine | ">
<meta property="twitter:description" content="test">
<meta property="twitter:image" content="http://canvasmagazine.tk/images/tile.jpg">
EDIT: I also tried close "/>" each meta tag instead of ">", yet this made no difference.
EDIT2: SOLVED. Twitter has blocked my server.
I am too getting this problem and we were not able to figure out the issue. But i have found certain troubleshooting steps which might be helpful to you.
Check robots.txt and make sure that user-agent: twitterbot is allowed. Sometimes, Twitter is blocked from reading the metadata by this file.
Check that the IP Addresses of twitter server is not blocked by your host. These are the IP Address used by twitter:
199.59.148.209
199.59.148.210
199.59.148.211
199.16.156.124
199.16.156.125
199.16.156.126
(Source: https://dev.twitter.com/cards/troubleshooting)
Also, Twitter’s ASNUM is AS13414.
Your Apache .htaccess file is denying requests.You can check this by opening your .htaccess file and looking for something like the following:
deny from 199.59.149.*
Follow above mentioned troubleshooting steps and let us know if works for you!
Thanks,
Rakesh Solanki
So I'm trying to help a friend out with his Blogger blog and its integration with Facebook. He'd been having several issues (like a messed up og meta tags and what not) and we were finally able to get everything sorted, and running the site on Facebook's Debugger, everything came out fine. But now we have an issue where new posts show the overall likes of the main page, and not of each individual post for their Facebook Like buttons, while old posts are unaffected (have individual like counts.)
FYI, the site in question is Los Heladeros (which apparently has around 87 likes at this point), and the Facebook site is /LOSH3LAD3ROS (which has 765 likes, so the likes aren't tied to the Facebook site, but rather the main page domain).
Now, we followed this tutorial to create the code for the Like button to show up on each post (which it does, no problem). Here is the code for the button:
<div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="lucida grande" action="like" colorscheme="light"></fb:like>
</div>
However, now, any new posts on the site are including the total likes for the main page (not the FB page), and not likes for the individual post (i.e., every new post starts off immediately with something like 87 likes at this point), yet all the old posts (before we fixed the Open Graph metadata issues) are perfectly fine (i.e., they show maybe a few likes, and are not affected by new likes or shares from the main page.)
FYI, I've just noted that a post that was before the fix, and previously only showed a few shares, has now reverted to the overall count...
Here's the Open Graph metadata for the site:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'>
<title>Los Heladeros: TU UPDATE MUSICAL ANTES QUE SE DERRITA</title>
<!-- Facebook Open Graph Meta Tags -->
<meta content='Los Heladeros' property='og:title'/>
<meta content='blog' property='og:type'/>
<meta content='http://www.losheladeros.com' property='og:url'/>
<meta content='https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/377165_310579818971632_1169246050_n.jpg' property='og:image'/>
<meta content='Los Heladeros' property='og:site_name'/>
<meta content='502365163' property='fb:admins'/>
<meta content='335887849786080' property='fb:app_id'/>
<meta content='Descargas gratis de música que no es cool, pero lo será mañana | HOUSE | INDIE | DISCO |' property='og:description'/>
<!-- Open Graph Meta Tags by: www.MetaTagGenerator.org -->
So I've read on other posts that you have to set the "og:url" to the specific site in question (i.e., every single post) and not the overall site, but isn't that what the "data:post.canonicalUrl" bit in the FB Like button code supposed to do? I know there has to be a way to have one universal code on the template page, and have the urls be pulled dynamically and the counts be individual for each post (and looking back at the old code before the meta tags were cleaned up, he had the same overall site URL as we have now, and never encountered this issue, so clearly before it was somehow working in a way).
Also, if I share any of the new articles, I subsequently get the picture and description of the main page, and not of the individual post, but when I share an old post, it auto generates the correct image and description. I've tried comparing the Facebook Debugger on both an old post and a new post and there is no discrepancy (as there shouldn't be any). I'm so confused as to what could possibly be doing this since it's a universal, over arching code, and I guess I would expect ALL posts to act the same way, and not just some (i.e., new and old).
FYI, since I'm a new user I can only post two links, but if you go to the main page, the newer posts are up top and have the 87+ like counts on the buttons and if you scroll down you'll eventually see older posts which have more modest counts (i.e., they're being counted correctly).
I would greatly appreciate any help you guys can give me. This is my first stackoverflow post, and I've read almost every single related post and still cannot find an answer to this problem.
OK, so I'm pretty much calling this one solved. I stumbled upon the following tutorial which details a thorough way of creating the correct Facebook Open Graph meta tags for Blogger:
Open Graph markup for Blogger [version 3]
Here are my updated meta tags, which seem to work perfectly fine going forward:
<!-- OPEN GRAPH MARKUP FOR BLOGGER [VER. 3] TAGS http://goo.gl/tyJ9a FOR ORIGINAL TUTORIAL -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta content='blog' property='og:type'/>
<meta content='https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/377165_310579818971632_1169246050_n.jpg' property='og:image'/>
<meta content='502365163' property='fb:admins'/>
<meta content='335887849786080' property='fb:app_id'/>
</b:if>
<!-- OPEN GRAPH MARKUP FOR BLOGGER [VER. 3] TAGS http://goo.gl/tyJ9a FOR ORIGINAL TUTORIAL -->
Of note, I added the admin and app id at the bottom, indented under and the Facebook Debugger/Linter seemed to be OK with that (before it gave me a warning that it was out of place). Also, my friend had a mismatch of APP IDs between the meta tags and the javascript implementation. I fixed that and put the same APP ID, and although the posts that were messed up are still messed up with their counts, going forward, all posts behave as they should with correct Like counts and when shared, the posts' info is correctly pulled into the share on FB (Title, Photo, Description).
Hope this helps anybody else who might be running into the same problem. Props to George B Moga. Here is the stackoverflow post where I found his link to the template for the meta tags.
I'm trying to figure out how to implement the Share button exactly as how it is implemented here. I want the ability to let users post a given link to their news feed without requiring any kind of app permissions with some optional text that they can add to it. How did BuzzFeed do it? The Facebook documentation is very confusing to me which is why I'm having a hard time implementing it myself. It'd be great if somebody could just layout the steps needed to take. What exactly do I need to put in my HTML page? Do I need to create a Facebook app?
To share your web-page, you don't need to create a facebook application.
You can just put that Facebook-share image there, with an href = "http://www.facebook.com/sharer.php?u=<your url>"
Facebook's like button allows sharing as well. The code to generate that for your website is in the official documentation.
Edit the page you want to be shared, add these to the meta tags in the head.
<meta property="og:image" content="http://www. XXXX url of a jpg image you want to be displayed on shared content has to be 200x200 pixels (make it in photoshop ect.) XXXX"/>
<meta property="og:title" content="xxxx A title you want to be dispayed in shared content xxxx"/>
<meta property="og:url" content="http://www. url of the page you want shared including the slash after .com xxx .com/"/>
<meta property="og:description" content="xxxx discription of the shared content xxx "/>
There is a list of the og properties other than these here- http://ogp.me/
Next insert this where you want the share button on your page,
<a title="xxx Share mypage.com xxx" href="http://www.facebook.com/sharer.php? u=http://www. xxx url of page you edited above xxx .com &t=xxx a title you want to use xxx" target="_blank"><img src="http://www. xxx an image for the share button (make it in photoshop ect.)xxx" width="xx" height="xx" alt="Share"/></a>
Obviously take out the xxx's and leave the " " , if you change any of the above while testing you may have to go to facebook debugger and debug it as it sometimes hold on to the original content.
hope this helps
If you want to customize that share page, try this:
Javascript Popup Example:
var title = 'My Title';
var summary = 'This is my summary';
var url = 'http://www.mydomain.com/path/to/page';
var image = 'http://www.mydomain.com/images/myimage.png';
var fb = window.open('http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent(title)+'&p[url]='+encodeURIComponent(url)+'&p[summary]='+encodeURIComponent(summary)+'&p[images][0]='+encodeURIComponent(image));
fb.focus();
This is what works.
in HTML:
Facebook Link
Where you replace http://google.com with your URL.
in PHP, if you want it to pull the url you are on:
Facebook
I am wrapping a razor view in an iframe. The razor view is a web service on a different domain.
Here is what I am doing:
<!DOCTYPE html>
<html>
<body>
<p align="center">
<img src="http://somewhere.com/images/double2.jpg" />
</p>
<p align="center">
<iframe src="https://secure.somewhereelse.com/MyPortal?CorpID=12334D-4C12-450D-ACB1-7372B9D17C22" width="550" height="600" style="float:middle">
<p>Your browser does not support iframes.</p>
</iframe>
</p>
</body>
</html>
This is the header of the src site:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/cupertino/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>
I want the iframe src to use the CSS of the calling site.
Is there a way to pass in the CSS URL or have it inherit the CSS of the calling site?
I'd even settle for the css file location being a parameter being passed in from the originating site.
Anyone have any suggestions?
You cannot enforce your css on your site using an iframe. The css must be included in the source of the page included in an iframe. It used to be possible but in certain cases using javascript, and for the page to be on the same domain.
The only other way you may be able to use your own css is if the web service allows you to pass in the url of the css. But you would have to consult the documentation of the web service to find that out.
I would pass the CSS url as an argument to the iframe's src attribute:
<iframe src="http://somedomain.com/?styleUrl=#(ResolveStyleUrl())"></iframe>
Where ResolveStyleUrl might be defined as:
#functions {
public IHtmlString ResolveStyleUrl()
{
string url = Url.Content("~/Content/site.css");
string host = "http" + (Request.IsSecureConnection ? "s" : "") + "//" + Request.Url.Host + url;
return Raw(url);
}
}
This is of course assuming that the domain would accept a style url query string and render the appropriate <link /> on the remote page?
Eroc, I am sorry you cannot enforce your css on others' site using an iframe because most browsers will give an error like the one chrome gives:
Unsafe JavaScript attempt to access frame with URL http://terenceford.com/catalog/index.php? from frame with URL http://www.example.com/example.php. Domains, protocols and ports must match.
But this does not mean that you cannot extract the html from that page (which may be modified as per your ease)
http://php.net/manual/en/book.curl.php can be used for site scrapping with http://simplehtmldom.sourceforge.net/
First play with these functions:
curl_init();
curl_setopt();
curl_exec();
curl_close();
and then parse the html.
After trying yourself, you can look at this example below that I made for parsing beemp3 content, when I wanted to create a rich tool for directly downloading songs, unfortunately I couldn't because of the captcha but it is useful for you
directory structure
C:\wamp\www\try
-- simple_html_dom.php
-- try.php
try.php:
<?php
/*integrate results for dif websites seperately*/
require_once('simple_html_dom.php');
$q='eminem';
$mp3sites=array('http://www.beemp3.com/');
$ch=curl_init("{$mp3sites[0]}index.php?q={$q}&st=all");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
//curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
$result=curl_exec($ch);
curl_close($ch);
$html=str_get_html("{$result}");
$ret = $html->find("a");
echo "<head><style type='text/css'>a:link,a{font-size:16px;font-weight:bold;font-family:helvetica;text-decoration:none;color:#458;}a:hover{color:#67b;text-decoration:underline;}a:visited{color:silver;}</style></head>";
$unik=array(null);
foreach($ret as $link)
{
$find="/(.{1,})(\.php)[?](file=.{1,})&song=(.{1,})/i";
$replace="$4";
if(preg_match("{$find}",$link->href))
{
$unik[]=$link->href;
if(current($unik)===prev($unik)){unset($unik);}
else{
echo "<a href='".$mp3sites[0].$link->href."'>".urldecode(preg_replace($find,$replace,$mp3sites[0].$link->href))."</a><br/>";
}}
}
?>
I know that you do not code in php, but I think you are capable of translating the code. Look at this:
php to C# converter
I spent time on this question because only I can understand what it means to offer bounty.
May be the answer seems unrelated (because I have not used javascript or html based solution), but because of cross-domain issues this is an important lesson for you. I hope that you find similar libraries in c#. Best of luck
The only way I know to achieve that is to make the HTTP request on your server side, fetch the result and hand it back to the user.
A minima, you'll need either to strip completely the header from the targeted site to inject the content in your page using AJAX, or to inject your own css in the page headers to put it into an IFRAME.
Either way you have to implement the proxy method, which will take the targetted URL as an argument.
This technique has many downsides :
You have to do the queries on you server, which can cost a lot of bandwidth and CPU
You have to implement the proxy
You cannot transmit the domain specific cookies from the user, though you can manage new cookies have by rewriting them
If you do a lot of requests you server(s) is/are likely to become blacklisted on the targeted website(s)
The benefits sound low compared to the hassles.
I've got the basic comment box on my site. NOT attached to an app or part of one (as I don't develop apps).
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.-----.com/tech" data-num-posts="3" data-width="500" data-colorscheme="dark"></div>
In the head tag:
<meta property="fb:admins" content="My User ID"/>
Now, when someone comments on a friend's comment, I don't want that to show on my site. How the heck can I remove the comments from my site!? This is driving me insane.
So other than this https://developers.facebook.com/tools/comments, what can I do to remove some of these comments?
Ensure that you have replaced the code with your user_id from facebook
You can find out your user id by going to the following address:
http://graph.facebook.com/[YOUR USERNAME]
For example, mine is http://graph.facebook.com/coulton resulting in the following.
<meta property="fb:admins" content="543270572"/>
This must be in the tag of the page which contains the Comments plugin
Now when you're logged in to Facebook with this account, you will see a "moderator view" button appear at the top of the comments window.
You should now see the interface to edit the comments from your site.
Also when you don't develop an app on FB, you can use the comments-tool from facebook and it's what I strongly recommend, because it's the easiest one. The comment-box itself can be registered to an app and you don't need to write a real app to use it, that's just what Facebook calls it.
So therefore you just create an 'app', which is only responsible for comment administration. Create an app and register it in your meta-tags with fb:app_id on your page with the comment box! Instantly you can use it to moderate all your comments.
The other solution is to be logged in with the user defined in the fb:admins tag and go to the comment box and choose moderation view. Use the tips mentioned by Coulton. Use the debugger to see if everything is set up right.