Does anyone how to do the following: when user inputs a link, how to get that page summary, so when you input facebook.com you get a page summary like title. I've tried googling it, but nothing came up.
Try adding meta tags to your site so when facebook parses the link it will search for the correct meta information. Not only facebook will parse the link either.
<meta property=”og:title” content=”Your Page Summary goes here,” />
https://blog.kissmetrics.com/open-graph-meta-tags/
If you are looking to add it to your website read this article.
http://www.sanwebe.com/2013/06/extract-url-content-like-facebook-with-php-and-jquery
As I understood your question (but if you clarify it, it'll be better ;))
You have to use Javascript on client or cUrl on server side to query the website and get the content.
Then parse the received contents to extract data you want to display.
Related
I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.
You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).
You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.
I want to share some simple text content on facebook time line using javascript of html. I have tried the below but i am unable to add any content, Can anyone help me how to create the below url to share content dynamically. What is the key for sharing content.
facebookshare
Thanks
djrecker
Try to encode the url shared, i.e. if you are using PHP try to call
p[url]=urlencode(LINK)
Same to the title and summary
I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary
I'm looking to share things on google plus but I need to be able to populate the snippet info myself as the pages I am sharing are loaded via ajax on my jquery mobile site.
So that being said I need to set the info either via the url (facebook sharer style) or via javascript.
If you are trying to change the rich snippet that appears, you should use the snippet tool to create schema.org that is then placed on your site. The share link would then be that page, which would contain the attributes set to how you want them to appear. You can specify the title, the image, and the description for the content that gets shared.
If you are trying to just create a link to share something, you can create direct links to the share dialog. For example,
Click to share
will create a share link to {your url}.
Because jQuery mobile is rendering a lot of the information on the actual client, you might need to generate a URL, similar to the one above, that would then point to another page that would with the right content in schema and a redirect to your site. When they follow the share link, a user would be redirected to the jQuery mobile page. When Google reached the page you're redirecting from, it would read the schema.org markup and correctly calculate the snippet. The following example works for me:
<html itemscope itemtype="http://schema.org/Article">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="This is the most awesome thing ever.">
<meta itemprop="image" content="http://placekitten.com/250/250">
</head>
<body>
<script>window.location='http://istoocute.com/#kittens';</script>
<a href='http://istoocute.com/#kittens'>Click here if you're not redirected</a>
There's really nothing to see here, move along...
<img src="http://placekitten.com/250/250" />
</body>
</html>
https://developers.google.com/+/plugins/+1button/#configuration - shows you the configuration settings that you need.
I was able to just go ahead and use the schema.org in my situation. This worked because when you view one of my pages is "promoted" to the first page in the list of cached pages. So even if you were to start on page A and browse to page B and then share page B when google searched the url you have provided page B is now before page A and thus is schema.org meta data is used.
I have no doubts that writing your own redirect page and passing it some thing like this
?redirect_url=http://google.com&img=your_image.jpg&description=its great&title=a product
would work. The only thing to remember is that you will need to use a javascript redirect that way when google looks at the page it see's the page and does not get redirected (bots dont use js) but when a person hits the page it will redirect them to the real page.
How do I make the followings code load the first thing in my website ? as matter of fact I want the href to load the first thing.
<link rel="image_src" href="" id="ShareImageID"/>
<script>
var ShareImageIdVar = location.href.match(/\d+/);
document.getElementById('ShareImageID').href = "http://www.mysite.com/Images/"+ ShareImageIdVar +".jpg";
</script>
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail. So i want this herf to be filled out as soon the page loads out.
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail.
I don't think this request makes sense. Loading order will not influence what Facebook offers as a preview icon for a page. Images inserted by JavaScript will likely not be visible to Facebook at all.
If you want to make Facebook choose a specific preview icon, use the Open Graph Protocol, namely
og:image - An image URL which should represent your object within the graph.
an example from the OGP web site:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The Open Graph protocol and Facebook Object Debugger have some information.
Does this have to be done in JavaScript? If you can use PHP, you can get the image ID from the query string and insert the dynamic link element before Facebook parses the document.
This works for me:
<?php
echo "<link rel=\"image_src\" href=\"" . $_GET['id'] . ".png\"/>";
?>
You would use a URL like:
http://mysite.com/index.php?id=12345
I'm not saying it's impossible in JavaScript, but I tried and Facebook didn't see the inserted image.
You can test using the Facebook debugger. Specifically, take a look at See exactly what our scraper sees for your URL and you'll see that it doesn't incorporate the JavaScript insertion.