I want to share campaign name along with image and description but it only share name
<%= social_share_button_tag(#campaign.project.project_name, :image => #campaign.campaign_image_url) %>
Is there any way to share image on social media?
From the code snippets in the question I'm guessing you're using the social-share-button gem.
Unfortunately, if an attribute you pass in to the social_share_button_tag is used depends on the platform you're trying to share on to, and each of them accept different params than the other. For example, Facebook doesn't allow you to specify images when you try to share that way. You can see the attributes that are passed into each of the platforms in the social-share-button.coffee file.
The best way to get the image to appear is to include meta tags for open graph which includes the title, description, image to use etc for that page. You can see all the relevant Open Graph Markup here. If you render those tags in the header section of your page when its rendered, those images and other information will appear when you share the page. For example:
<meta property="og:title" content="<%= #campaign.project.project_name %>" />
<meta property="og:description" content="<%= #campaign.project.description %>" />
<meta property="og:image" content="<%= #campaign.campaign_image_url %>" />
Additionally, it'll appear even if the user shares the page using the URL straight, rather than going through that plugin. This has become pretty standard now and other platforms such as Slack etc will also use those tags to determine how to display a link on their platform.
Related
When someone posts a tweet that only contains a URL, Twitter does a bit of scraping where it grabs some text and an image from the webpage.
Example below:
Is there any way of retrieving this data from the Twitter API? I've not been able to find this data in anything that's returned. Do I need to provide some special parameter maybe? Or is this just something that's not possible?
No. You cannot get that data from the Twitter API.
The data that you're seeing is a Twitter Card.
Here's how it works.
The web developer puts some meta tags in their web page - take a look at the source for https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html and you'll see:
<meta name="twitter:site" value="#nytimes" />
<meta property="twitter:url" content="https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html" />
<meta property="twitter:title" content="For Your Brain’s Sake, Keep Moving" />
<meta property="twitter:description" content="Exercise changes the workings of new brain cells in ways that may protect against dementia, a study in mice suggests." />
<meta property="twitter:image" content="https://static01.nyt.com/images/2017/10/10/well/04physed-brain-photo/04physed-brain-photo-videoSixteenByNineJumbo1600.jpg" />
<meta name="twitter:card" value="summary_large_image" />
When Twitter sees a URL, it fetches it and looks for those tags. If it finds them, it will display a photo and headline on the Twitter website.
If you want to retrieve that data, you need to visit the URL and look for the OpenGraph tags.
I'm not a coder but I was able to build my site from nonstop searching for "how to do xxxx" on this site. Thank you all so much for the posts and info!
I want to know how I can apply the "nopin" tag for pinterest to my "og:image"
Here is a link to a sample page http://jamesngart.com/harvester.html
I made a horizontally cropped image of the illustration to be used as the og:image for facebook and twitter links, but I dont want pinterest to pick it up. I used the nopin tag for some images that I dont want pinned and it worked, but I cant seem to apply it to the OG:image.
pin interest is also not picking up any of the data-pin info i enter, I was thinking to add "this is a cropped image please pin the others" but nothing works. Here is my code:
<meta property="og:image" content="http://jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />
Thank you!
James
Don't add the nopin attribute to the facebook open (og) graph metatag.
Instead create a new meta tag and add it below or above the opengraph tag.
In the following example - pinning is disabled for the whole page:
<meta property="og:image" content="jamesngart.com/img/OG-Harvester.jpg" />
<meta name="pinterest" content="nopin" />
If you want to disable pinning per image you have to add the nopin attribute to the image (IMG) tag:
<img src="jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />
Read more about pinterest data-attributes and metatags in this article at csstricks
Reading various articles about this on the wide web, there seems to be very few guides for specific images, but this
http://allyssabarnes.com/2013/07/22/how-to-block-your-images-from-being-pinned/
link shows:
<meta name="pinterest" content="nopin" description="Enter your new description here" />
and
<img src="your-image.png" nopin="nopin">
Which leads me to establish that due to Opengraph being a meta feature that you would need to do something like:
<meta property="og:image" content="jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />
I would also hope you'd be using https://developers.pinterest.com/docs/getting-started/introduction/ for reference as well.
See also https://stackoverflow.com/a/10421287/3536236
Which actually states that (as of 2012) Pinterest does not directly reference OG:images in its processing.
Overall it's a little questionable why you would want to share an image on OpenGraph, (ie for Facebook and Google searches) that would then not be available for Pinterest specifically.
What's the practical difference between using url vs sameAs properties in schema.org?
I'm adding microdata information to the big Internet website, contains millions of pages. Using a correct tag is very important. The context may be, for example, the link to the official page on the page describing the County, State or a public Park. It may be also the link to external page with more details about the topic (which may be basically anything in a range from drugs prescriptions to an English grammar).
[Note that you are linking to schema:URL (which is a datatype) and not to schema:url (which is the property your questions seems to be about). Schema.org URIs are case-sensitive.]
For authors: it often makes sense to think of url as the URL that you want to use (typically from your own website), and of sameAs as the URL(s) others use for the same thing (typically from external websites).
For consumers: it might make sense to use url for outputting a link, and for finding more data about the same item from the author’s perspective (e.g., following the link on a teaser page to the full article page), and to use sameAs for better understanding what the author is describing in their item.
Example
Let’s take Jamendo as example, a site about free/libre music.
They have a page about the music group "pornophonique" (/en/artist/8303/pornophonique) and they have various pages that link to this page (e.g., /en/search?qs=q=pornophonique).
The group also has an official website (http://www.pornophonique.de/) and a Wikipedia article (https://en.wikipedia.org/wiki/Pornophonique).
On the search result page, Jamendo could simply link to their own URL for that group:
<!-- on <https://www.jamendo.com/en/search?qs=q=pornophonique> -->
<article itemscope itemtype="http://schema.org/MusicGroup">
<a itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique"></a>
</article>
On the dedicated page, they could again specify this url, to make clear that it’s the canonical URL for the item:
<!-- on <https://www.jamendo.com/en/artist/8303/pornophonique> -->
<body itemscope itemtype="http://schema.org/MusicGroup">
<link itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique" />
</body>
And on this same page for the group, Jamendo could use sameAs to link to the official website (as the homepage URL typically represents the thing the site is about) and the Wikipedia article:
<!-- on <https://www.jamendo.com/en/artist/8303/pornophonique> -->
<body itemscope itemtype="http://schema.org/MusicGroup">
<link itemprop="url" href="https://www.jamendo.com/en/artist/8303/pornophonique" />
<section>
<h1>External links</h1>
<ul>
<li><a itemprop="sameAs" href="http://www.pornophonique.de/">Official website</a></li>
<li><a itemprop="sameAs" href="https://en.wikipedia.org/wiki/Pornophonique">Wikipedia article</a></li>
</ul>
</section>
</body>
(Of course they could do this also on the search result page, if they don’t mind the data repetition/overhead.)
And just to be sure: On Jamendo’s page about one of their tracks (e.g., https://www.jamendo.com/en/track/81740/sad-robot), Jamendo should not use url to link to the group’s page or sameAs to link to the Wikipedia article, as both URLs do not represent/identify the track. A possible sameAs value would be the URL of the page about this track on the group’s official website (http://www.pornophonique.de/download.php?song_id=1).
<!-- on <https://www.jamendo.com/en/track/81740/sad-robot> -->
<body itemscope itemtype="http://schema.org/MusicRecording">
<link itemprop="url" href="https://www.jamendo.com/en/track/81740/sad-robot" />
<link itemprop="sameAs" href="http://www.pornophonique.de/download.php?song_id=1" />
</body>
I have seen in documentation that fields are not rendered in the view, and instead it can be used in helpers, partials etc. but I can't find a way how they are used.
The documentation says to use it like this:
{{ cms:field:some_label }}
But I am courios how can I use that? I wanted to be able to define some text in the snippet and then, use that field in my partial or in my helper function to form some data that will be used in the view. Can somebody tell me how can I use fields in this CMS?
Imagine you have a CMS site set up so it's using an application layout. Somewhere in that layout you have: <meta name="description" content="Something about the page"> Now, how do you dynamically populate content of that tag from the page? We can define {{cms:field:meta_description}} tag.
In the admin area you'll be able to populate it and. Now you need to output that like this:
<meta name="description" content="<%= cms_block_content(:meta_description) %>">
My site has an FB like button on a dynamic page.
There are also mod re-write rules on the site to allow a friendly URL for that dynamic page.
i.e the following opages are the 'same':
(url 1) www.getawayearth.com/property.php?id=703
(url 2) www.getawayearth.com/property-rental/holidayhome703.html
The page has a like button on it.
My problem is that the like button shows different values for each url, even though the the page is the 'same'. For example if you were to visit URL 1 an click on the like button, the like count would not be registered URL 2.
I understand why this is happening, however I was wondering if it is possible to set the like button to recognise the both urls as being the same?
If you have multiple Like buttons which should all 'like' the same thing, you need to point the href of the like buttons to that URL - i.e on page 1 and page 2, both like buttons will be of the form <fb:like href="http://example.com/page1"/>
I understand your issue, and Open Graph meta tags could be a way to let Facebook now that 2 different URLs are the same by setting the same og::url meta on both each URL page.
The same issue occurs with SEO, and it's why there is a meta data named "canonical" to specify the official URL of a page, even if there is different URLs to reach the same page content.
<html>
<head>
<meta name="title" content="your page title" />
<link rel="canonical" href="http://your-official-page-URL" />
<meta property="og:title" content="your page title" />
<meta property="og:url" content="http://your-official-page-URL" />
</head>
…
Hope that can help.