I can't see any solutions out there that allow this specific request without a lot of scripting or meta tags so I'm hoping there's a simple way to do this.
I'm looking for a custom share links for all four social networks. Let me give a concrete example.
If someone clicks on a twitter icon link on my site, they're clicking the following:
<a href="https://twitter.com/home?status="Welcome to my site and tell all your friends! #sitename #mysiterules http://bit.ly/site">
<img src="twitter.png">
</a>
it will go to Twitter's site and produce the following:
This allows someone to very quickly promote my site with a custom message that they can change if they like but there's no effort involved outside of clicking the icon link.
This is exactly what I want to do with the other three social networks, with a custom message and links. They can also pull the default logo of my site which twitter can't do.
How can I accomplish this?
I recommend you use the proper social sharing buttons like we implemented in on our live campaign page, but here is some code I stole from a mockup of the campaign page.
<div class="leader-half kids0514-share">Share this on:
<img src="images/en/share_mail.jpg" alt="email">
<img src="images/en/share_fb.jpg" alt="facebook">
<img src="images/en/share_tweet.jpg" alt="twitter">
<img src="images/en/share_pin.png" alt="pinterest">
<img src="images/en/share_plusone.jpg" alt="google plus">
</div>
Not all social sharing buttons are created equal, some have more functionality and even old versions you can still use. Pinterest is pretty minimal. I recommend using the official buttons and full structured meta data, not doing it the way this snippet from the mockup does.
On Facebook you are not allowed to share a prefilled message according to Platform Policy 2.3: "Ensure that all content in the user message parameter is entered by the user. Don’t pre-fill. This includes posts, messages, comments, and captions."
If you want people to share on Facebook I would suggest using the Share button: https://developers.facebook.com/docs/plugins/share-button/
Related
Background
Lately, Facebook added a "carousel" ad format, showing multiple slides in a sponsored post. This is now available for non-business users too.
Facebook example of a carousel ad format
Meta annotation
I am looking for a way to "annotate" my website in a way that it will be showing a carousel in a Facebook post when the url is used in a post. Currently I am using Open Graph (og) meta tags for annotation.
HTML share link
Besides that, I'm looking for a way to add multiple "carousel slides" to a Facebook share link. Currently I am using the following html for Facebook share links:
<a
href="http://www.facebook.com/dialog/feed
?app_id=123
&link=http%3A%2F%2Fmy.url.com
&picture=http%3A%2F%2Fmy.url.com/img.jpg
&name=MyTitle
&caption=MyCaption
&description=MyDescription
&redirect_uri=http%3A%2F%2Fmy.url.com"
target="_blank"
>
Share on Facebook
</a>
Both ways result in the default post format. Can anyone help me with Facebook sharing in carousel format?
This is currently a feature that is being tested and it's not possible to apply for it.
Now this feature is live & when posting on a page select Image format and select carousal, you can add about 6 images to carousal & publish.
I know the title is not worded properly but I do not know how best to summarize my issue.
I have a ShareThis button installed on my site and an older Facebook Share Button.
When I share any page on my site, both the ShareThis and the Facebook share pop-ups show a thumbnail version of the site's Home Page.
I want the thumbnail to show the current page being shared.
How do you make that happen? Is it even possible to do?
Social sharing sites like Facebook and LinkedIn tend to respect schema.org schemas. So I tend to slap SoftwareApplication on my body then use a hidden div, putting what I want shared in there. You could manually (or programmatically) take a snapshot of the page and include it in the schema div to have it display as the image.
Here's what it looks like from one of my sites:
<body itemscope itemtype="http://schema.org/SoftwareApplication">
<!-- SoftwareApplication information -->
<div style="display: none;">
<h1 itemprop="name">Dache - Distributed Caching For .NET Apps</h1>
<img itemprop="image" src="/images/logo.png" />
<p itemprop="description">Fast, scalable .NET distributed caching with meaningful performance metrics for your managers and a simple API for your development team.</p>
</div>
...
Facebook in particular uses their OpenGraph technology. Here's an article on configuring what appears when your site is shared on Facebook.
I've looked high and low around the web looking for an answer to my question but the answers just don't quite give me what I'm looking for...
I have an e-commerce site where I'd like to add a share button to the order confirmation page that, when clicked, shares the specific product they have just purchased.
How would I go about doing this?
Each product needs to have a unique URL in order to be shared. This is the URL that you will use when generating your share button.
When implementing a share button, you'll need the JavaScript SDK (as mentioned in the link) and once you have that, all you'll need to do is have this HTML on your page:
<div class="fb-share-button" data-href="http://your-product-url" data-type="button_count"></div>
The data-href attribute is what you want to be dynamic and swap it out for each product you want to share.
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).
Twitter has a beautiful share API. If I want to customize text, I just include it in the URL I'm linking to:
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="whoa, check out this SUPER-EASY CUSTOMIZED TWEET TEXT!"
data-via="foo">
Tweet
</a>
My question is whether there is a way to do this with Facebook, Google Plus, and LinkedIn.
I want to be able to do this without having to put og meta tags in the link target. Basically instead of the link target having knowledge of the message, I want the share button itself to have that knowledge.
Thanks
It is a good idea to populate your pages with metadata to describe them to non-human systems including search engines, social networks, screen readers etc. For Google+, you have your choice methods: Schema.org metadata, OpenGraph, or simple meta names/descriptions. You can read more about how to populate snippets from your site at https://developers.google.com/+/plugins/snippet/