I made my website My SMS Buddy and i have included one facebook like button to sharing my website on facebook. But, whenever i clicked on the like button, it is only showing my website url,but it is not showing thumbnail,title,description, although i have written the code for all the information inside the main page. This is the sample code of the main page
<head>
<meta property="og:title" content="My SMS Buddy" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.eravikant.com" />
<meta property="og:image" content="http://www.eravikant.com/images/image.jpg" />
<meta property="og:site_name" content="My SMS Buddy" />
<meta property="fb:admins" content="100002723853376" />
<meta property="og:description" content="Share and Send Free Sms Anywhere In India Which Support Upto 160 Characters Long Sms Without Any Advertisements Attached with the Sms To Any Mobile In India With Easy Group Messaging" />
</head>
<body>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eravikant.com&send=false&layout=box_count&width=60&show_faces=true&action=like&colorscheme=light&font=segoe+ui&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:90px;" allowTransparency="true"></iframe>
</body>
Need suggestion, what am doing wrong here...
Suggestion will be appreciated ...
There are some really odd things in your page's HTML. You have duplicates of your opening and closing HEAD, BODY and wrapping HTML tags. This is invalid HTML and doesn't parse at all. This also won't show your page properly in web browsers since it won't know which part of the HTML to render. This is what is confusing Facebook.
Remove the first HTML opening and closing (plus its contents) and Facebook should get your OG Metadata fine. It's in the second HTML HEAD metadata and that looks fine.
Related
So I have this cakephp project, when I share the link to facebook i don't get og:description, og:image etc, even though everything seems to be there.
My code: (Views/Layouts/default.ctp)
<head>
...
<meta property="og:url" content="<?=Configure::read('og_url');?>landing" />
<meta property="og:title" content="<?=Configure::read('app_title');?>" />
<meta property="og:description" content="<?=Configure::read('og_description');?>" />
<meta property="og:image" content="<?=Configure::read('og_image');?>" />
...
</head>
I initialize everything in bootsrap.php so all my files can have access to these values.
Which produces this, View Page Source:
<head>
...
<meta property="og:url" content="https://www.philippidescompetition.com/landing" />
<meta property="og:title" content="Back To School Spin & Win! " />
<meta property="og:description" content="Συμπλήρωσε τα στοιχεία σου και παίξε "Spin & Win"!" />
<meta property="og:image" content="https://www.philippidescompetition.com/img/wheel/og_image_s.jpg" />
...
</head>
So far so good, but when I share the link on facebook I don't get any of the meta data.
I tried the debugger tool, but it didn't really help.
I want to share philippidescompetition.com/landing this link, which redirects to the facebook app page or to the actual url philippidescompetition.com/users/register on my server, according to if its from a desktop or mobile, so am thinking this redirect causes the issue, but if I share philippidescompetition.com/users/register which doesn't have a redirect, all meta data are still empty
Any ideas?
You need to add an exception to your automatic redirect for the Facebook scraper.
It can be recognized by its User-Agent, see https://developers.facebook.com/docs/plugins/faqs#faq_1748179212062572
In order to share an Html content in facebook (witch may not be possible), i saw a trick using Open graph protocol and a SWF Player so the post will be treated as video post .
Exemple (link) :
<meta property="og:title" content="What anti agin method do you preffer?">
<meta property="og:image" content="https://mintsapp.io/uploads/polls/5639037a63bed.jpg" />
<meta property="og:url" content="https://mintsapp.io/poll/view/1395" />
<meta property="og:video" content="https://mintsapp.io/player/player.swf?id=1395&type=poll&token=567dcd401fb74&voteChoiceId=3172" />
<meta property="og:video:secure_url" content="https://mintsapp.io/player/player.swf?id=1395&type=poll&token=567dcd401fb74&voteChoiceId=3172" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="472" />
<meta property="og:video:height" content="355" />
and when it comes to share this page on facebook , it will be treated like a video and an html content will be compiled using that SWL player , its actually load the html content and display it as flash content .
see this link : https://mintsapp.io/player/player.swf?id=1395&type=poll&token=567dcd401fb74&voteChoiceId=3172
I need to understand how to do something similar to that, because i've been googling the whole day with no results.
Thanks
I have an application on laravel and i am using AddThis (https://www.addthis.com/) for my website.
Everything is fine when i try to share the homepage, but i keep getting this "Whoops! There was an error." when i try to share any non-index pages.
I am using templating for the mata-data on the various pages
in my base.blade.php i have
<meta property="og:site_name" content="ALLMENZ" />
<meta property="og:url" content="mycontent" />
<meta property="fb:app_id" content="" /> <!-- for facebook-insights-->
<meta property="og:title" content="{{{$meta_title}}}" />
<meta property="og:description" content="{{{$meta_description}}}" />
<meta property="og:image" content="{{{$meta_photo}}}" />
and in the non-index page i have
<?php View::share('meta_title', 'user timeline'); ?>
<?php View::share('meta_description', 'this is the user timeline page'); ?>
<?php View::share('meta_photo', ''); ?>
Anyone has any idea what is happening here? Thanks in advance (=
You should generate the tag's content dynamically, for example, to generate the current url with http/https use following in your og:url:
<meta property="og:url" content="{{ Request::url() }}" />
The Request::url() will generate the current url for the page you are on. Also, don't leave any blank content in any meta tag. Then debug the url's using Debugger Tool.
What Worked For Me
If you happen to be trying to use AddThis with UTM codes or other querystring variables, here's what finally worked for me.
As per Sol, use OpenGraph meta tags but then use the FB Debugger to verify that Facebook cache has been refreshed and got all the proper meta tags in the page header correctly, then verify that there are no querystring UTMs/variables your AddThis sharing link to facebook. For my purposes, Index.html couldn't include any querystring variables or AddThis passed the URL incorrectly to Facebook. The only way that worked for me looks like this:
<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=https%3A%2F%2Fwww.example.com%2Findex.html" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook" /></a>
What Failed For Me
When trying to use the below AddThis "data_track_addressbar" and "addthis_widget.js" modules for sharing, Facebook completely fail to pull the new OpenGraph Meta Tags.
<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
I am going crazy over this, like going gray haired instantly.
I hope someone can help me.
I am currently developing a website which has accommodations.
They have a page for each accommodation with details of that item.
Before the document is put out to the browser, I collect all meta data for Open Graph with php and output it all in the head of the document with the use of og meta tags.
A strange thing happens at all these pages, for example http://parclaclusure.internetanders.nl/nl/accommodaties/lodgetenten/
Because when I use the Facebook Debugger on that url it comes up with different results than the browser gives me in the source code.
The things I did to rule out any problems on my part:
Checked the HTML with the W3C validator, it checks out, no errors
Used an extra parameter to ensure that de meta data is not cached # Facebook, like adding ?test=1234 to the url
Search on Stackoverflow (and the rest of the interwebs) for the same problem, couldn't find any
Can anyone point out what's wrong with my og meta tags? or why they are ignored/changed in Facebook. (Facebook uses the og meta data of a page located 1 step higher -> http://parclaclusure.internetanders.nl/nl/accommodaties/)
Note: Please be discrete with the website address, because it's a development environment and not yet meant to go public, live or viral :P, thanks!
It looks like a session problem. I have the feeling a session is set after all the required data is loaded.
What I notice is that after a page refresh I see different content.
Hope this helps...
You need to check your page with the OpenGraph Debugger : https://developers.facebook.com/tools/debug/
It will update the content of your OG tags in Facebook. It doesn't update the content each time someone share your page, only on debug.
EDIT : On your code :
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/defaults/default.facebook.png" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-e04fcee6a2ba22c917d1c45e6c61b926.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-0cb0ca4759b278c22f075c781a628956.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-6c63e58a9ba8d555f277d34d2daeddc5.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-73f0f66a0d05d0bf570254f1eb7072f8.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-063fcc1f10db6bdb3e2d3c4d053f76db.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-1c0526d2cc3c916fc3c67d0b83e6f7f9.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-a850047c2225b1b9e5d5fddae1d1c7bf.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-25094d3a08fb093983dedffdcaf14c88.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-3414c0ad4780a27ad8326007ec3987ae.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-845b24160e9fe438e851a6b2fb17af17.jpg" />
<meta property="og:image" content="http://parclaclusure.internetanders.nl/uploads/images/300x300-0e2b4efe0d30745ea34afc9b01bb6eb4.jpg" />
What do you expect from this ? You are supposed to have only one OG:image metatag...
I have the following url to a file on my website:
http://www.foo.com/download/1
This downloads the file with the force_download function, using the download helper.
I've been requested to provide like buttons for these files which are displayed in a html table on one of the site's pages.
So, using facebook like button tool I've created the following button:
<div class="fb-like" data-href="http://www.foo.com/download/1" data-send="false" data-width="450" data-show-faces="false"></div>
However, because this is a direct link to the file, the correct open graph metadata is not being received e.g. the description is: "%PDF-1.3 %�ãÏÓ 1041 0 obj.."
So my question is how do I provide the open graph metadata for links to my downloads? For example:
<meta property="og:type" content="website" />
<meta property="og:url" content="http://foo.com/download/1" />
<meta property="og:title" content="Download 1" />
<meta property="og:image" content="bar.png" />
<meta property="og:description" content="File description" />
For the url that where you download the file itself you can't, since it's (probably) not an html page and even if it is, you wouldn't want to change the content of the file with your own metadata.
What you can try is use some kind of redirection on the URL used by both the clients downloading the file and the crawlers of facebook, and of course you will need an url for the real download too.
On your view sent for like and the users:
<!-- meta tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="http://foo.com/download/1" />
<!-- .... -->
<body>
<script>
// imaginary real download url url
window.location = '<?php site_url('download/real_download/'.$download_id);?>';
</script>
</body>
Facebook also doesn't seem to understand refresh meta tags, so you can write and avoid javascript usage:
<meta http-equiv="refresh" content="1;URL='<?php site_url('...')?>'">
Disclaimer: I didn't find any documentation from facebook that describe what their crawlers understand so there's no guarantee that any of these will keep working. I myself using a javascript solution for like a year now in a similar situation.