i have an share button on my page and have too the op:image, op:width: and op:height on my meta tags.
When user's share the page, sometimes images get an crop of top left and not take the full image. In the box when user's preview what will share the image is fine, but when in the wall the image is get the crop.
I google it but not had any solid answer. Someone can help me ?
This is my code in symfony framework:
$response = $this->getResponse();
$response->addMeta("og:image", "http://www.mydomain/upload/noticias/". $this->tbnews[0]->getImagem());
$response->addMeta("og:title", $this->tbnews[0]->getTitulo());
$response->addMeta("og:description", $this->tbnews[0]->getApoio());
$response->addMeta("og:image:width", "400px");
$response->addMeta("og:image:height", "209px");
<div class="col-md-1">
<a href="http://www.facebook.com/share.php?u=http://www.mydomain/noticias/index/<?php echo $noticia[0]->getId()?>&title=<?php echo $noticia[0]->getTitulo()?>">
<img class="fb-share-button" src="/images/fb.png" with='48px' height='48px' alt="Compartilhe essa notÃcia no seu Facebook.">
</a>
</div>
the first image is on box before share, when you confirm that.
the second image is the shared on facebook feed news, is how appear to users.
Related
I found many codes but not working for me, I want to share a page but show particular block or div from my entire page when I share with image and title on Facebook.
when I share result should look like.
my code
<div class="content">
<div id="mImageBox">
<img id='my_image' src='https://i.imgur.com/C8VWSZP.jpg' alt='tis is title' width="100%"
onclick="fbs_click(this)"/>
</div>
<script>
function fbs_click(TheImg) {
u=TheImg.src;
// t=document.title;
t=TheImg.getAttribute('alt');
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>
</div>
My code work perfect only for image share not working for image and Page URL. i want to share current page URL. it should be dynamic.
I am using a script, blazy, to change my page's images as the user scrolls down. It works fine, and I would like the user to have the possibility to share each image to his friends on Facebook. I managed to link the url to an anchor to the image. When sharing a link, a little thumbnail is displayed with the link with a short description of the image. My problem is that only the logo of my website is displayed and not the image the user wants to share.
<a class="facebook_share" href="actualites.php#237" onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href.split(location.hash||'#')[0] + '#237'),
'facebook-share-dialog',
'width=626,height=436');
return false;">
</a>
<div id="237">
<a href="content/posts/237/449.jpg" title="Voir en taille réelle">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="content/posts/237/449_thumb.png" alt="image" width="700px">
</a>
</div>
Looking at The Open Graph protocol, I tried to create a meta tag when clicking on the Facebook share button. The result is the same -- the image I want to share is not displayed, this is because Facebook linter only looks at the HTML in the response and does not run any scripts. The content of my page always changes, I cannot write the meta tags "by hand".
<a class="facebook_share" href="actualites.php#237" onclick="
$('meta[name=og:image]').remove();
$('head').append('<meta name=\'og:image\' content=\'***/content/posts/237/449_thumb.png\'>');
window.open(...[see above]);
I'm using addthis.com to share my pictures from an album (just a page with some pictures in it).
This is my addThis code:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="<?php echo HTTP; ?>album.php?id=<?php echo $_GET['id']; ?>"
http://lasala-gastrobar.be/album.php?id=27
addthis:title="An Example Title"
addthis:description="An Example Description">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_print"></a>
<a class="addthis_button_email"></a>
I have this code for every image in my album, and the javascript at the bottom.
Now when I share on facebook, it shares all the images, but I want to be able to share one 1 image at a time.
Same when I click print, only print that 1 picture, not the rest.
got it: the link has to go to a separate page showing only 1 image with correct tags in the head
Can anyone tell me Is it possible to use facebook social plugin comment box to comment on a picture in my profile?
This is the code for facebook social plugin comment box
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="MY_URL" num_posts="2" width="500"></fb:comments>
I tried this by replaying MY_UR with url of a facebook image in my profile(which is taken from garph api with a given image id).
<?php
$det = $facebook->api('/IMAGE_ID');
$image_url = $det['link'];
?>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="<?php echo $image_url; ?>" num_posts="2" width="500"></fb:comments>
But it doesn't work. Is there a way to do this?
Note : I have the publish stream permission.
You need to point the fb:comments href to the page that's hosting the comments plugin. This is where users will click when they see stories in their newsfeed after one of their friends has commented on your photo.
Hiwhile i go through this site(http://www.talenthouse.com/creativeinvites/preview/ae2dd0ca9ac9d1881f27132df12b6dd1/219),i came to see that while i login with help of either by twitter or facebook ,with my profile image, the F logo for Facebook and T Logo for twitter is embedded, how can i do that in PHP for facebook with help of Graph API??
If you look at the source of that page, you will see that the image is not actually embedded. They are just using css/html to overlay the "F"/"T" image:
<a>
<span class="photo" style="background-image: url(https://graph.facebook.com/4/picture);" />
<img class="fb-decorator" src="http://assets.talenthouse.com/images_01/fb-member.jpg">
<strong class="name">Mark</strong>
</a>
They may also have some special css applied to those elements - try inspecting it with Firebug or Chrome Dev tools - but you can see that its not embedded.