How can I share embed content on facebook? For instance this facebook post https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fvine%2Fposts%2F1119625504750685&width=500 links to a Vine item that embeds an iframe. The iframe is from facebook itself, but it runs some javascript from Vine. Can I do that for my own product, or is it some kind of partnership between facebook and Vine?
I could not find anything about such embedding in fb docs. To clarify, I'm not trying to put facebook content in my website, but my content into facebook.
From their website
https://developers.facebook.com/docs/plugins/embedded-posts
Such as from here:
<html>
<title>My Website</title>
<body>
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"
async></script>
<div class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
data-width="500"></div>
</body>
</html>
Related
I want to put "like" button of facebook in my website, I use this
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.google.com.sg/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>
however, it doesn't work if I haven't log into facebook, what't the problem?
and how to implement the same function in twitter?
There is generators for both Twitter and Facebook integrations available for free at the corresponding company's webpage.
However, as you've already written, it will only work when logged in. When you are not logged in it'll display a login page for facebook, see here for a working jsfiddle with your code:
http://jsfiddle.net/Y5WAp/
And here for a screenshot of what happens (and SHOULD happen) when I try to like without being logged in to facebook:
http://i.imgur.com/U2Tgz.png
A friend of mine added a store to my fan page that uses the iframe...basically putting a website inside a facebook frame. It has a SSL certificate. We added social media like buttons to each product page by using addthis.com code. See below. The code below works on the product page, however the problem is when you share it to facebook or google+, the link that is provided for that product, when clicked, takes the user to the hosting url where the zencart resides.
<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "zencart1/images/" . $products_image; ?>" />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" glusone:size="medium"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true}; </script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-501a85992fdcfe86"></script>
<!-- AddThis Button END -->
Fan Page: https://www.facebook.com/TracyLoganDesigns
Go to the category Scarves - this is where I have a test product.
When you click on the product test link once it's been shared on facebook, etc, this is the link it goes to: http://firetreegraphics.com/zencart1...9#.UBrFH01lTjY
How can I set it up so that it will go back to the fan page url?
How can I set it up so that it will go back to the fan page url?
By not liking/sharing the product page hosted on your server, but the Facebook URL of your /page/app combination.
If you want to link to a specific product page inside of your app on Facebook (and not just the start page), then you have to use the app_data parameter inside of that link, and get it’s from the signed_request parameter once your app is loaded into the iframe on Facebook.
When posting a link directly to a Tab on a Facebook Page,
https://www.facebook.com/PAGENAME?sk=app_APPID
Facebook picks up the Page's Open Graph <meta> tags, which means the link post gets associated with the Page's profile picture, name, and a description of "Page • n like this".
I had hoped that Facebook would instead use the og <meta> tags from the app's HTML, allowing link posts to be customized.
What's the best way to provide a direct link to a specific Tab on a Facebook Page with custom content in the link post?
The best way I can see to have this accomplished would be to have a redirector page hosted on a website (www.example.com/fb/redirectorForApp.html) that does a redirect on a javascript timeout. That redirector page has the og tags you want to have specified. The redirect will land the person at the https://www.facebook.com/PAGENAME?sk=app_APPID. What's cool about the javascript redirect is that the redirect is not ran by the linter, so it can pickup the correct og: tags, while also allowing you to have the user go directly to the page tab. Good luck!
Since the content of your Page Tab is located inside an iFrame the Facebook scraper will always see first the meta tags outside the iFrame which are set by Facebook and which describe your Facebook Page. Try the url in the Facebook tool and see at the bottom of the page what the scraper sees for your url. Unfortunately you can not change those Facebook meta tags from within your iFrame. That is why the only way to achieve what you want is to go by a redirect. I have done this before using the following code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<!-- Facebook meta tags -->
<meta property="og:title" content="bla"/>
<meta property="og:url" content="https://yourdomain.com/redirect.html"/>
<meta property="og:image" content="https://yourdomain.com/thumb.png"/>
<meta property="og:site_name" content="bla"/>
<meta property="fb:admins" content="1234"/>
<meta property="og:description" content="bla"/>
<meta property="og:type" content="website"/>
<meta property="og:video" content="https://yourdomain.com/bla.swf?param=bla"/>
<meta property="og:video:width" content="398"/>
<meta property="og:video:height" content="224"/>
<meta property="og:locale" content="de_DE"/>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<!-- Check whether inside facebook -->
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("facebook.com") !== -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("https://www.facebook.com/PAGENAME?sk=app_APPID");
}
</script>
<!-- content here -->
</body>
</html>
I'm a new user so I can't comment on DMCS's answer yet :-)
But I had to do this once, and it was also through a "redirector". However there was no need to set a timeout, simply:
<html>
<head>
<meta ...> <!-- OG tags -->
<script type="text/javascript">
location = 'http://www.facebook.com/PAGENAME?sk=app_APPID';
</script>
</head>
</html>
So no delay.
BTW. if you check the tab URL here, you'll see that it has a redirect path via its og:url tag that redirects from https://www.facebook.com/PAGENAME?sk=app_APPID to https://www.facebook.com/PAGENAME. Maybe you should check if setting the Default Landing Tab to your tab changes anything.
I too have been using the redirect method, but it is insufficient where users have an incentive to share content (for example in voting apps): all too often they copy the page tab URL from their browser and the shared content ends up having the generic page profile information associated with it.
But the good news is there is a solution! It's fairly complex though - especially if you have more than one subpage with different og:tags (such as in a voting competition for example).
How it works?
This solution is to set up ogtags on the page on your server to have a canonical url which redirects to the canvas app page - canvas apps are allowed to specify their own custom ogtags in this fashion. If you then redirect all users to the proper page tab, the canvas page will effectively not be viewable, yet it will allow you to provide custom ogtags for your page tab app.
The steps
Create a canvas page for your app (use the same urls as for the page tab)
Add og:tags to your page just as you would normally
Set the og:url parameter to the canvas app's url (http://apps.facebook.com/yourapp/...etc)
Add code so that when the request is coming from outside of the page tab iframe (in the canvas or directly on your server) you redirect the user to the proper page tab
I was having the same question... so here's what I did:
Redirection Page: A page that will get a parameter & set the tags for your sharing services or at least the OpenGraph tags. Then this page will craft a URL to a second page (Facebook Pagetab) like this:
//{facebook-page.link}/?sk=app_{your-app-id}&app_data=X
To obtain {facebook-page.link} see this example request:
See example: https://graph.facebook.com/200866110154
See documentation: https://developers.facebook.com/docs/reference/php/facebook-api/
Do not do the redirect immediately everytime, will not work. Instead do the redirect on certain conditions. Example:
if (strpos($_SERVER['HTTP_REFERER'], '//www.facebook.com/')) {
drupal_add_js('window.location = "' . $url_final . '"', 'inline');
}
Remember, to craft the URL use the page link attribute obtained from Facebook, not the ID of the page, otherwise you will lose the app_data parameter in the signed request.
Facebook Pagetab: A page called inside an Iframe of a tab of a Facebook page. This page will get the SignedRequest with the app_data and will load specific content that the end user will see.
Remember that app_data can also be an array (or a serialized object):
app_data[var1]=value1&app_data[var2]=value2
Tip: If you are using Drupal you can avoid the final redirect, just overwrite $_GET['q'] to the page need. This way you don't bootstrap Drupal only to do another redirect. You can achieve this using hook_init.
Tip: Save your requests to the Facebook API to speed up future calls. Every request to the graph API takes 300ms at least. Database access is obviously faster.
I'm experiencing problems adding a like button to an iFrame based page within my FB fan pages tabs. I'm using the JavaScript SDK and the Open Graph to specify the page I'd like the user to "like" (which is the current page within my FB pages).
The page is iFrame based, is an app in FB, and is accessed via the FB Page tabs of my FB Page. The problem is that Facebook is assigning the Like to my FB Page itself (my FB page homepage if you will) rather than the page In question (my test page – it’s set up as an app and appears in my FB Pages tabs under the name “og test”).
I’ve tried running the target page for the iFrame through the FB linter and its giving a strange error saying I’ve supplied the Open Graph Type of “Other” (I haven’t, I’ve supplied “website” in my META tag) see below:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.airport-parking-quote.co.uk%2Ffacebook%2Fog-test.php
Also, from looking at the debug page it seems that Facebook is either ignoring the QueryString in my “og:url” value and therefore only seeing my FB page’s vanity URL, or there is some kind of block on being able to Like iFrame based app pages.
Can anyone shed any light on this? I thought from this article it would be possible to achieve what I am trying to do:
http://www.insidefacebook.com/2010/09/09/like-buttons-app-content/
The code for the iFrame target page is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test Like</title>
<meta property="og:title" content="OG Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.facebook.com/EssentialTravel?sk=app_275969292428556"/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="fb:admins" content="100002424161307"/>
<meta property="fb:app_id" content="275969292428556"/>
<meta property="og:description" content="OG test through canvas page"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '275969292428556',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
</script>
Test Page<br>
<script src="http://connect.facebook.net/en_US/all.js#appId=156081301143077&xfbml=1"></script><fb:like href="https://www.facebook.com/EssentialTravel?sk=app_275969292428556" send="false" width="450" show_faces="false" action="recommend" font=""></fb:like>
</body>
</html>
Anybody have any ideas?
Thanks,
Pjordanna
Unfortunately you can't set up a like button for an actual tab on a page.
As you have found out, trying to make a like button using a url such as https://www.facebook.com/EssentialTravel?sk=app_275969292428556 will just make a like button for the page not the individual tab.
The best way to make a like button for that specific tab would be to just use the URL of the app sitting on your server eg. http://YOURDOMAIN.com/YourAppDirectory
An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!