Social media share buttons don't redirect back to fan page iframe product page - facebook

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.

Related

Embed content in facebook feed

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>

Customizing Addthis Plugin - passing url using classic asp

I am having lots of problems while coming up with a solution.
I have a website that share text or image greetings( text greeting only at this time) on facebook or twitter etc. I planed to use Addthis.
So I created a function like this
<%
Function DisplayShareDiv(surl, sT, sSummary)
%>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="<%=surl%>"
addthis:title="<%=sT %>"
id="addthis_container"
addthis:Description="<%=sSummary%>">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = { "data_track_addressbar": true };</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=###################3"></script>
<!-- AddThis Button END -->
<%
end function
%>
Now problem is that title appears when click on facebook or twitter but url doesn't. I also want to add the description to it. I have og tags too but they need to be dynamic too and i am having problems with fb not picking up that info either. Even though i have run it through debugger. I am at it for 2 days and it is now all a mish mash. I would really appreciate if someone can please help me!!
Now I'm getting this. Is that as you require?
I think facebook was picking up an old version of your page.
The text it picked up were from the OG and description meta tags on your home page.
If you run your page through their debugging tool, that forces it to scrape the latest version of your page. Plus you might get some useful info too. https://developers.facebook.com/tools/debug/

Wrong image & tekst Facebook Like Button

I'm using Facebook Like on my product pages. When somebody like's a product the wrong tekst and image is displayed on the Timeline of the User. Pinterest and Twitter are working okay.
I use Opencart version 1.5.2.1 and my buttons are from Addthis. The Pinterest button is modified for Opencart. The code i use is:
<div class="share"><!-- AddThis Button BEGIN --> <div
class="addthis_toolbox addthis_default_style "> <a
class="addthis_button_pinterest" pi:pinit:url=<?php echo
$breadcrumb['href']; ?> pi:pinit:media=<?php echo $thumb; ?>
pi:pinit:layout="none"></a> <a class="addthis_button_tweet"
tw:count="none"></a> <a class="addthis_button_facebook_like"
fb:like:width="85" /></a> </div> <script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f68526319f4252e"></script>
<!-- AddThis Button END -->
If someone is able to help me with this it would be very appreciated.
It was a user agent problem.
Facebook was not able to see my page.
It is solved now by putting the user agent in array.

AddThis button + Facebook Like button

I am trying to use AddThis button on a web page of mine, which you can share, like (facebook), and tweet (twitter) -
the AddThis code is pretty straight forward below,
<!-- AddThis Button BEGIN -->
<div id="share" 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_counter addthis_pill_style"></a><!---->
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cdb5be51dc49c98"></script>
<!-- AddThis Button END -->
but I don't understand - in the code above, where can I put the image or video url which I have uploaded and posted on my fb page? for instance the url below is the image from my facebook page that I want to track how many people like this picture through my website,
http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971
I have read through the documentation on AddThis but it doesnt explain this at all!
http://www.addthis.com/help/client-api#configuration-sharing
It points me to this,
http://developers.facebook.com/docs/reference/plugins/like#
again, this is a Facebook plugin, no used within AddThis. If I am using the Like button from the Facebook API, then I cannot use the AddThis plugin above, can I?
furthermore, The Like button from Faebook API seems to work on the Facebook page, but not an individual picture or video I uploaded/ posted on my Facebook Page, for instance, I tried this on my localhost, the picture on my Facebook Page won't collect the number of likes even though I have clicked the Like button on my screen.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971" layout="button_count" font="arial"></fb:like>
so my main doubt on the Like button itself - does it work on facebook only or does it apply to the individual picture/ video on my facebook page? I tried to find this answer from the facebook Like documentation but it doesn't explain anything about this.
it would be grateful if you have any idea. thanks!
Try this:
...
<div class="addthis_toolbox addthis_default_style"
expr:addthis:title='Photo'
expr:addthis:url='http://www.facebook.com/photo.php?fbid=10150115644909972&set=a.10150115644754972.329183.55239684971'>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a><!---->
</div>
...
See also: http://www.addthis.com/help/widget-sharing#tagging
You might get an error with the add this way to display the Facebook Like Button and IIS7.0.
I had the problem yesterday and have posted a solution here.
Hope this helps,
Covo

How to embed iframe in facebook?

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!