I know this question has been asked before, but I feel like my circumstance is slightly different.
I have a site where I a global like button on every page that basically "likes" the site. Now I have a page with a bunch of photos on it and if you click each page, it pops up in a fancybox.
Here's the html that's on the page. Each of these images shows the corresponding title in the fancybox when it's clicked.
<a href="/image1.jpg" class="zoom img">
<img src="/image1.jpg" width="150" height="100" />
</a>
<a href="/image2.jpg" class="zoom img">
<img src="/image2.jpg" width="150" height="100" />
</a>
<a href="/image3.jpg" class="zoom img">
<img src="/image3.jpg" width="150" height="100" />
</a>
<div id="fancyboxTitles" style="display: none">
<div>title1</div>
<div>title2</div>
<div>title3</div>
</div>
What I want to do is have a like button in each of the fancy boxes for that specific image so when someone clicks "Like", that specific image will show up on facebook.
Currently i'm using the iframe method with the meta tags for my global like button.
My answer to the other question (http://facebook.stackoverflow.com/questions/9252899/fancybox-with-share-buttons-linked-to-unique-image) still applies.
You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.
Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.
EDIT
Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.
http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3
Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.
See http://ogp.me for how to specify og tags.
Related
I am trying to find a way to post an image along with a description to a Facebook page. The idea is for users to submit a photo and a description to a website. Once the image is uploaded the user can then share the uploaded image with the description they've added on to a Facebook page.
I'm not sure if this is possible to do. I guess it's something Facebook's Graph API might help or maybe something like from this question (Facebook share button and custom text) would be enough:
<a title="send to Facebook"
href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
target="_blank">
<span>
<img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook
</span>
</a>
I have this code for a Facebook custom share button:
<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">
<img src="../../../../../image/photography/pics/fb-share.png" alt="Share this!" width="57" height="21" border="0">
</a>
This is supposed to scrape info from the page but for some reason it doesn't and it gets redirected to the site's main index.html.
I've tried adding facebook og tags and the extra code in the but to no avail.
Any thoughts?
EDIT: Having been told that the share function has been deprecated, I tried to do this with the feed dialog:
<a href="https://www.facebook.com/dialog/feed?link=http://www.travel2italy.com/Travel/Italy/Company/photography/index.html&picture=http://www.travel2italy.com/image/photography/pics/homepage/florence1-home.jpg&name=travel2italy.com&caption=Photo%20Gallery&description=A%20Beautiful%20photo%20of%20Florence&redirect_uri=http://www.travelive.com" target="_blank">
<img src="../../../../../image/photography/pics/fb-share.png" alt="Tweet this!" width="57" height="21" border="0">
</a>
but when i click on the link it takes me to facebook and says an error occured, wth?!:(
EDIT 2:
I wasn't aware that the app_id argument is needed, signed up for an app and it works now, but it strips away the #section I have at the end of the link (i want it to link to a specific slide in a slideshow)
EDIT 3:
Now some of the share buttons using the sharer do seem to work but don't pull all the photos off the page for me to choose the one i want, this is insane-o, could it just be a caching issue?
Ok, so I've looked around a number of different websites but seem to get mixed information. Does anyone have any advice for implementing a Facebook Like button in an HTML email campaign?
I have already tried this article but for some reason, clicking the like opens a blank page with another like button. http://emailexpert.org/adding-a-facebook-like-button-to-your-email-template/
Any help would be appreciated.
Here is how you can add a Facebook Like button, Share Button, and Tweet Buttons. Please Note: Where it says my-campaign-url.com is the webpage of the email newsletter. Replace img src with your own image for the button. Also I am not sure you need everything in the Facebook button but you can clean it up with some testing =>
Facebook Like
<a title="Like this on Facebook" href="http://www.facebook.com/plugins/like.
php?href=http://my-campaign-url.com&layout=standard&show_faces=
false&width=450&action=like&colorscheme=light&height=427%20">
<img src="/Images/network_icons/fblike-button-small.png" style="border:
0 none;" alt="Like This on Facebook"></a>
Facebook Share
<a title="Share this on Facebook" href='http://www.facebook.com/share.php?u=http://my-campaign-url.com'><img src='/Images/network_icons/fb-share.png' alt='Share my campaign' /></a>
Tweet Button
<a title="Share Via Twitter" href="http://twitter.com/intent/tweet?
url=http://my-campaign-url&text=My%20Text%20-%20&via=My Name&">
<img src="/Images/network_icons/tweet-button-small.png"
style="border:0 none;" alt="Share Via Twitter"></a>
Another (possibly easier) option.
Use the AddThis Service for E-Mail Marketing. See AddThis site for more info. Example Code Follows:
<!-- AddThis Button BEGIN -->
<!-- Facebook -->
<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmy-site.com%2Fnewsletter&pubid=ra-[Your AddThis ID for Analytics]" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook" /></a>
<!-- Twitter -->
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmy-site.com%2Fnewsletter&pubid=ra-[Your AddThis ID for Analytics]" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png" border="0" alt="Twitter" /></a>
<!-- Rest of AddThis Services-->
<a href="http://www.addthis.com/bookmark.php?source=tbx32nj-1.0&=250&pubid=ra-[Your AddThis ID for Analytics]&url=http%3A%2F%2Fmy-site.com%2Fnewsletter " target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/more.png" border="0" alt="More..." /></a>
I had this problem also. But the answers above, and elsewhere, didn't help me too much.
It seemed like often the solution being offered was creating a way to allow people to like the EMAIL CAMPAIGN itself. That's definitely not what I want... I want it to make it so that people can click to like MY ORGANIZATION'S FACEBOOK PAGE.
Fortunately, I am a mailChimp user, and for those of you that use MailChimp, this is the article that explains it very easily: http://kb.mailchimp.com/article/how-can-i-add-a-become-a-fan-on-facebook-button-to-my-campaigns
this allows you to simply put a special tag and to specify the URL of your FB page... awesome. And it works. Sure, you do have to confirm with a second click, but that is OK.
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
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!