Error showing og:image - javascript

I have problem with og:image in my website. og:image is displayed correctly only if I'm logged into their website sharethis.com with my facebook account. If I'm not logged in og:image picke some random image from my website.
I'm using DataLife Engine 10.1 and applied this script:
<script type="text/javascript">
$(document).ready(function(){
$("head").append('<meta property="og:image" content="[xfvalue_slika]" />');
});
</script>
Only when I'm logged into their website, image in tag [xfvalute_slika] is displayed when I share news on facebook. When I logout and try to share again, og:image choose some random image from website and display.
Even if I look at source code, the image path is taken correctly but not displayed on facebook. As previous said random image is shared on facebook wall.

Related

Facebook Feed Dialog URL Picture Param is not overwriting og:image

I want to share an infographic featured in an article, but the &picture= param in a facebook share url is being ignored and instead the image in the og:image meta tag is being shown. Need help ensuring that the facebook dialog box honors the picture parameter in the url.
I've tried using the Facebook Sharing Debugger, or a random image from another source but no difference.
My url structure is like the following:
In code:
const example = `https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=${encodeURIComponent(url)}&description=${encodeURIComponent(text)}&picture=https:${encodeURIComponent(img)}`
So I get something like this:
https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=https%3A%2F%2Fwww.example.com%2Farticle%2Fslug&description=Test%20Infographic%20Text%20Click%20the%20link%20to%20read%20more%20info!&picture=https%3A%2F%2Fimages.example.net%2FexampleImage.jpg
I expect that when a user clicks on the Article share button that the image used in the dialog box is the same as in og:image but when I click on the share button on the infographic the image used in the dialog box is the same as in &picture= url param.
Custom pictures are not possible anymore, you can only share with the og:image specified in the source.

FB share shows meta description instead of page content

I have generated my fb share button code using Like Button Configurator. The image and heading is showing correctly but the description showing is the meta description of my site. I need to show the first few lines of the page that I am sharing.
I have also tried with Feed Dialog method and try to pass the page content as description. but when I give sample text it is working but not working when I give the page content.
Also tried to set
<meta property="og:description" content="Your description" />
but it also not worked.
All I need is to show first few lines of the sharing page instead of meta description.
here is a sample page.
The meta tag og:description should work.
The issue is that Facebook cache the pages info and you need to clear the cache manually to see the changes.
Go to https://developers.facebook.com/tools/debug/ enter your URL and see how Facebook is seeing your page info also you can force FB to fetch your new changes using the "Fetch new scrape information" button.

prettyPhoto lightbox social tools: all images have the same number of Facebook likes

Background: I have a site using a prettyPhoto lightbox to display photos. I've enabled social tools to display the 'tweet' and Facebook 'like' buttons on the lightbox, in hope to enable the ability to 'like' only the current photo being displayed to the one viewing it.
Problem: The Facebook 'like' button actually results in all photos in the same gallery being liked: all photos display the same number of likes in the lightbox; and on Facebook, the user's 'like' in their news feed or recent activity links to the gallery page rather than the actual photo that was liked.
What I've tried: I have tried editing the jquery.prettyPhoto.js file to add in the placeholder found in this answer: https://stackoverflow.com/a/11796964/2205165
I have also tried replacing 'location_href' with '{path}' to see if that used the photo's full path/URL, but it did not, or didn't appear to do so.
I've tried the above with 'deeplinking' enabled and disabled, with no avail.
Help: If anyone has a solution to enable Facebook liking and Twitter tweeting of individual photos from the prettyPhoto lightbox, I'm all ears. Even if it's to the degree of photos displaying the correct number of likes, rather than all having the same number: I'm not too fussed at this stage about linking back to the individual photo: linking back to the main gallery page will suffice for that.
Thank you!
In case anyone ever comes up on this again, This solution worked for me and it shares the image directly.
This is for images only, but there's no reason it wont work for the rest of the cases in PrettyPhoto.
In your PrettyPhoto parameters in prettyPhoto.js, switch out the facebook iframe to look like this with whatever params you want, all that matters here is that "{path}" is in the href spot of the iframe src:
<iframe id="fbiframe" src="//www.facebook.com/plugins/like.php?href={path}&width&layout=button&action=like&show_faces=false&share=true&height=21&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:26px;" allowTransparency="true"></iframe>'
Then around line 274 in the prettyPhoto.js file you should see this line:
$pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]);
Add another line just like it and replace the href for the src like below, again with whatever params you want, the point is that the href is replaces with the image location variable:
$('#fbiframe').attr('src', "//www.facebook.com/plugins/like.php?href="+pp_images[set_position]+"&width&layout=button&action=like&show_faces=false&share=true&height=26");

Unable to specify separate link in the google plus icon

i am using google plus icon in my site using the following code
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium" href="https://plus.google.com/u/0/b/104806777345217966807/"></g:plusone>
but whenever i click that button it redirect me into wrong URL . How to i change this
> https://accounts.google.com/ServiceLogin?service=oz&continue=https://plusone.google.com/%2B1/profile/?type%3Dpo%26client%3D1%26gpsrc%3Dwidget%26parent%3Dhttps://plusone.google.com%26proxy%3DI2_1334919708352%26rsz%3D1%26hl%3Den_US%26gpsrc%3Dwidget&hl=en-US#724922462
If i use the below code it redirect me to given path but it show different view
Please guide me i already searched in all blog but i did not get solution for my issue
The purpose of the +1 button is for the viewer to plus 1, or recommend the linked site publicly on Google+
So the person has to be logged into G+ to be able to do it and thus the link redirects you to the google login page.
If I understand you correctly, you want an G+ image link to that page. In this case simply find and add a G+ icon image and enclose it within <a /> tag pointing to the link.

Unable to display the thumbnail in the status update

I have developed a facebook app, where I need to display a thumbnail of my website's logo as the facebook status if any users likes my website.
I have added the meta tag in the head of the web page like this:
<meta property="og:image" content="http://mydomain.com/images/admin/bg/PAP.png">
but it is displaying some other image on Facebook. I also check in the facebook debug site which actually showed the logo of the web-site but it is not being updated on Facebook instead some other pic being updated on Facebook.
What is the problem and what may be the solution?
I face same problem on in.affinity.com , but image displays fine on affinity.com.
I tried hosting image on other server , with different url and it worked.
Try this if not working tel me your site , i'll look to it.
Cheers.

Categories