I am try to get for my joomla 2.5 website the feature of facebook "preview link". This feature should generate a preview when I enter a link in my article (just like facebook does in the status field). I only need this features for link to text/images not to video.
I found this link but I am having difficulties to understand how I am suppose to implementing it into a joomla website.
Thanks a lot for your help!
To dictate what is used for a Facebook link in your content, you need to make use of the Facebook OpenGraph meta tags.
Take a look at this section of the Facebook Developers site, mainly Section 3: Use proper Open Graph tags.
Link Here
The three you need for what you're after are:
<meta property="og:title" content="MyContentTitle" />
<meta property="og:description" content="Enter your snippet here." />
<meta property="og:image" content="http://myurl.com/images/logo-100x100.jpg " />
You can either statically set these for your website, or manipulate the template files for your articles, and echo out the article titles/images/snippets using PHP.
//EDIT//
After clarification from the comments, the easiest method would be to add tooltips using jQuery/jQuery UI:
jQuery UI Tooltips
You can make the tooltips as large as you like, so you could add a preview of the article that is leads to.
Of course, you'll have to make changes to your site template to add this, and also include jQuery UI/jQuery to your template header, if it's not there already.
In addition to that, you'll need to use PHP to echo the article title, description and image within the tooltip.
Related
I tried various codes and none worked.
This is one of those:
<?php
$title=urlencode('Title of Your iFrame Tab');
$url=urlencode('http://www.example.com/');
$summary=urlencode('Custom message that summarizes what your tab is about, or just a simple message to tell people to check out your tab.');
$image=urlencode('http://www.daddydesign.com/wp-content/uploads/2011/06/facebook_iframe_share_button.jpg');
?>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>
Facebook have changed something and now the only parameter that a developer can change is the URL of the page, but nothing else.
Does anyone know if it's still possible to change the title and description of the shared page?
Consider using Facebook Open Graph.
The Open Graph Protocol website.
Also there is a plugin for Open Graph.
An example:
You can change the title and description which appears in shares with these meta tags.
<meta property="og:description" content="Your description here" />
<meta property="og:title" content="The title of the page" />
Facebook also provides a debugging tool which you can use to see how it sees a given page from your website.
Sometimes Facebook seems not to clear the cache for a given page. There's a discussion about that issue here on SO. I have trouble with that sometimes. For me it works puting something like ?refresh=1 at the end of the URL and then increment that number each time.
You can see a list of best practices on the use of Facebook OG here. Last but not least here is a list with more available tags. You can click on each one to see more info. I fear it is not comprehensive, though as it does not include for example og:title.
I've a site and it has a News webpage called something like www.website.com/news/detail/id/3. Now when I try to share this on any social media sites it is taking the title of www.website.com for any of the news details I share, i.e only one title of the website is being shown for any links. I want to see News detail page URL to be shared in a way that when a user clicks it it should directly goto that details page that is dynamically created on addition of every news in MySQL. I'm struggling to solve this and want anyone who has a clear idea on how to set the particular News or article to be shared using a url link of that news detail page on any of the social network sites. Eg.. as said above sppose I've a News Title lets say "Welcome to Daniweb, the website for every technology to technocrats" and its url is www.website.com/news/detail/id/4 When I share or post the above link it should show the news title as "Welcome to Deniweb, etc... followed by some part of description or image of that article. I hope you might have a clear idea about this. something we see on linkedin.com
How to change the id 4 to News_title in the url link and I'm using the Model, Views, Controller, then the url of a specific page I view must be of this kind eg. www.website.com/articles/welcome_to_dani_web_a_site_for_blah_blah_blah.... etc.
Where should I change the code to set the various titles for each webpages, that can be shared using a url link with the particular content of that webpage linked to that shared url. I've a common .../includes/header.php & ../includes/footer.php embedded in all the pages in ..views/scripts/xxxxxx.phtml pages How?
How to share the news using the url link that is dynamically created when someone posts an article. You may see in Linkedin.com of the articles being shared from some website, its image, Title, content is seen with url of particular webpage, Hope you have a clear idea of this kind and got me what I'm saying How?
This is how the code I've crafted and lost in it, not sure where I'm going wrong. Please
Help. Specific part of the code is shared as shown below for your reference, .../scripts/news/detail.phtml page is as follows:
<div class="newsviewwholepad">
<div class="leftcol">
<div class="textnews"><br/>
<div class="floatleft">
<h2><a><?echo $this->queryresult[0]['News_Title'];? ></a></h2>
<pa>By: <?echo $this->queryresult[0]['News_Editor'];?>,
Published: <?echo $this->queryresult[0]['Published_Date'];?></pa>
</div>
<div class="floatright">
<a style="color:#666;" href="http://www.addthis.com/bookmark.php?v=300" onmouseover="return addthis_open(this, '','[URL]', '[News_Title]')" onmouseout="addthis_close()" onclick="return addthis_sendto ()">Share</a>
Here I've used the addthis so as to share it using a button and it does not work, also when I share a complete url of the webpage on social sites it still does not work, HELP?
<p><? echo $this->queryresult[0]['News_Content'];?> </p>
</div>
</div>
</div>
Why don't you use the Open Graph tags http://ogp.me/ , that is the universal protocol for sharing web pages across sites like Facebook, LinkedIn and Twitter.
Just for your reference
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
This will share your article across social media as you wanted.
Although using Open Graph tags is a good idea if you want to target specifically sites like facebook, you can use other technologies to improve your actual situation in deeper way. Also, consider that Open Graph is/was based on RDFa.
For instance, you can set mod_rewrite to have meaningful urls. You can use, dublin core, microformats, RDFa or Schema.org to provide meaningul metadata on your pages that can be used by sites like facebook and the like or other systems like google.
The Linkedin documentation can be found here
As it says, it needs:
og:title
og:description
og:image
og:url
Here is an example of my wordpress blog source code that for simplicity I use Jetpack plug-in:
<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Starbucks Netherlands Intel" />
<meta property="og:url" content="http://lorentzos.com/starbucks-netherlands-intel/" />
<meta property="og:description" content="Today I had some free time at work. I wanted to play more with Foursquare APIs. So the question: "What is the correlation of the Starbucks Chain in the Netherlands?". Methodology: I found all the p..." />
<meta property="og:site_name" content="Dionysis Lorentzos" />
<meta property="og:image" content="http://lorentzos.com/wp-content/uploads/2013/08/starbucks-intel-nl-238x300.png" />
In Facebook it works great, or you can see the meta data here. However LinkedIn is more stubborn and doesn't really parse the data even the If you're unable to set Open Graph tags within the page that's being shared, LinkedIn will attempt to fetch the content automatically by determining the title, description, thumbnail image, etc.
I know that I don't have the og:image:width tag but Linkedin doesn't even parse title, description or url. Any ideas to debug it?
I checked again my html and found some warnings/errors in metadata. I fixed them and all work good. So the solution if you encounter the same problem:
Check your html again and debug it. Even if the page load well in your browser, the LinkedIn parser is not as powerful in terms of small errors. This tool might help.
My very first suggestion is appending a meaningless query to the URL, so that LinkedIn thinks it's a new link (this doesn't affect anything else) i.e.:
http://example.com/link.php?42 or http://example.com/link.html?refid=LinkedIn
If that doesn't suit your needs, a more drastic measure is in order.
After making sure you don't have any errors in your console and validating your site using:
http://validator.w3.org/...
Add the prefix attribute to every tag (not to html tag), then re-sign in with your LinkedIn account to clear the cache...
prefix="go: http://ogp.me/ns#" i.e.:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Title of Page" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://example.com/image.jpg" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://example.com/" />
I hope one of these three solutions works for someone. Cheers!
If you're sure you've done everything right (using open graph meta tags, no errors on validator.w3.org) and it still is not working, be sure to try it with a different page, it might be a LinkedIn cache thing.
I had a <h1>Project information</h1> on my page, which LinkedIn used as the title for sharing the page, instead of the <title> or <meta property="og:title" [...]/> tag. Even though I did everything right. But when I completely removed this <h1>Project information</h1> from the page source, it kept using 'Project information' as the title even thought it wasn't on the page anymore.
After trying a different page, it worked.
I stumbled about the same problem for our Wordpress site. The problem is created by conflicting OGP and oembed headers in standard wordpress + yoast / jetpack seo plugin.
You need to disabled the oembed headers with this plugin (this has no side effects): https://wordpress.org/plugins/disable-embeds/
After that you can force a fresh link preview by appending a ?1 as some of you guys already pointed out!
I hope that fixes your problem.
I wrote a detailed explanation for the problem here: https://pmig.at/2017/10/26/linkedin-link-preview-for-wordpress/
Linkedin caches the urls so it's very practical to make sure that this is not your problem before starting to debug.
This might tool then might come in handy: https://www.linkedin.com/post-inspector/inspect/
Here you can preview your url and see how it looks like when sharing. It refreshes the caching as well so you can be sure if you have a problem or if it was the caching only.
After a long trial and error I found out that my .htaccess was somehow blocking the Linkedin robot (wordpress site). For those who use the ithemes security plugin for wordpress or another security plugin make sure that LinkedIn is not blocked.
Make sure there is no line like:
RewriteCond %{HTTP_USER_AGENT} ^Link [NC,OR]
The easiest way to check is to use wordpress default htaccess lines.
As mentioned before, make sure you don't retry cached pages in linkedin.
You can try this only once a week!
I had a link to my site and I wanted to customize the image Linkedin displayed. So I added open graph tags which didn't seem to render at all. Until I read this:
The first time that LinkedIn's crawlers visit a webpage when asked to share content via a URL, the data it finds (Open Graph values or our own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description, upload a new image, fix a typo in the title, etc., you will not see the change represented during any subsequent attempts to share the page until the cache has expired and the crawler is forced to revisit the page to retrieve fresh content.
https://developer.linkedin.com/docs/share-on-linkedin
The solution for me was to add a hashbang. I am on an ajax style application which doesn't render the whole page, I think linkedin has a bit of a hissy fit about the text/image not being on the page on initial scrape, adding
%23!
to the end of my encoded url or
#!
to the unencoded url before sending it off to linkedin seemed to do the trick nicely for my share button popup. Not wsure if this is only Ajax/js apps or not but it certainly solved a couple of hours of effort for me.
I guess this is only useful if your application is setup to handle the escape_fragment in the url and render a static page not a dynamic one but I can't test this theory right now
This was happening on one of my client's sites as well. I discovered that the .htaccess file was blocking the site from LinkedIn if the user-agents contained the string "jakarta".
As soon as I remove this filtering, LinkedIn was able to access all of the required the OpenGraph (og) information when the client would post a link.
True, the documentation states that you can have: title, url, description, and image. But in reality, you have two options. Pick one of the two following sets and use it, as you have no other choice...
Set 1 Options
og:title
og:url
og:image
Set 2 Options
og:title
og:url
og:description
That is the reason why og:description is mysteriously missing from preview links. But if you drop image, then your description will finally display.
Try it: Wikipedia has an og description but no og image, while GitHub has both. Share Wikipedia and Share GitHub. Clearly seems like either you get a choice to display description or a choice to display image. I have spent weeks struggling with LinkedIn Support to correct this, but to no avail.
We just made a re-design of the company I work with of the company wordpress blog to make it more SEO friendly, improving all we could. However I still have an issue with the Google+ share button you can see we have 2 sets of social buttons 3 in the header (facebook, google+ and twitter) these are to share the site and 3 buttons at the end of the post next to "Did you enjoy this article? Share it!" to share the article.
When clicking the "G+ share" button the snippet plug-in is not using the metadata of the site like the title and description:
And in the documentation it says that's all I need, because I'm using the Open Graph protocol, but when I test it this is the result, which is not using the information set in the metadata:
https://plus.google.com/share?url=http://blog.voicebunny.com/2013/02/21/how-voicebunny-gets-professional-voice-overs-so-fast/
And the last thing I'm totally lost is when testing with the rich-snippets tool everything looks fine:
http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fblog.voicebunny.com%2F2013%2F02%2F21%2Fhow-voicebunny-gets-professional-voice-overs-so-fast%2F&html=
Any idea how to fix the snippet? Thanks in advance.
To clearly document an apparent solution:
Putting a data-href tag as part of the that explicitly points to the page would make it clear where the metadata should be pulled from. Although there are other ways it can get this data (the cannonical link, for example), making it explicit as part of the button is best.
Not entirely sure, but I think you also have to update (or remove?) the itemprop meta at the beginning of your template:
<meta itemprop="name" content="The Carrot Chronicle">
<meta itemprop="description" content="The Official Blog of Mr. VoiceBunny">
I use the following share button to my page. Unfortunately my urls that are shared through my page have Greek letters in it "as" below:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
and I guess this causes a problem where the facebook does not show any image or content of the page. It only shows the url.
I found out that if I manually cut the above url to
http://www.domain.com/gb/news/12/13311/
the share works properly and the current page is shown. Everything is great.
So my question is how should I force the facebook share button to share the page after the modification? I know that by using var_dump($url['dirname']); I get the format I want.
According to FB docs, you can specify any URL you wish by populating the SHARE_URL a tag attribute:
<a name="fb_share" type="button" share_url="<?php echo $url['dirname'] ?>"></a>
By the way, what you are referring to is a canonical url, trimming this:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
To this:
http://www.domain.com/gb/news/12/13311/
The beauty of canonical urls is that they will not change, even though you decide to change keywords in the pretty url version. Useful for sitemaps.
You can use the FaceBook OG (open graph) tags to tell facebook what the "real" url is of the page. If you're serious about facebook sharing, you should be using those already. Put these in your
<meta property="og:title" content="Titeel Goes Here"/>
<meta property="og:url" content="URL goes here"/>
Verify what Facebook sees here: https://developers.facebook.com/tools/debug. You can also add a thumbnail image, and admin (so you can better see the likes and who shared).