Is it possible to have a custom share image for Facebook, Google+ and Twitter?
I've already set up the open graph tags in the head of the document.
Thanks
UPDATE:
For Facebook:
<a href="http://www.facebook.com/share.php?u=url" target="_blank" ><img src="fb-img"/></a>
For Twitter:
<img src="twitter-img" />
Still looking for google+
By the way, any difference with sharer.php v/s share.php for Facebook?
I found the best solution to implement custom share button with Facebutton:
Go to facebook developers page and there you will have to read the following article which will explain you how to use meta tags (HTML) on the head of your page:
https://developers.facebook.com/docs/sharing/webmasters
Basically you need to add a Share Button on your page, right?. So, what you need to do is first of all, add the meta tags that page ask you for on the head of your page. Then everything is so easy. After facebook provides you with the code for the share button, now when you click on it, it will show you the image you specified on your meta tags. Take a look at that page and you'll see how easy is to implement it.
Twitter still i haven't implement it yet neither for google :(
Related
SImple question: If I post a link to my website on twitter, the image does not appear even though I checked the link on twitter card validator and the image and the link work well there.
Here is the link: https://globalgoodness.ca/unehistoiredhommesdelephantsetdabeilles/
Thanks for the help (and plz consider that I am a twitter "illiterate :)
Right now im building a simple html/css site for a friend. The homepage is a series of grid block divs that hold some content.
There are currently 3 block divs we have marked for social media posts. So for example, he wants his latest tweet to appear in one of those divs. His latest instagram post to appear in another and facebook in the last.
We can ignore facebook for the time being as I'm only focusing on the twitter/instagram for now.
I'm struggling with where to begin for this project. In the past I have only embedded twitter timelines, Instagram posts using widgets etc....nothing too complicated.
But for this project I will need separate stripped down posts, ie: just the plain text from his tweet inside the twitter div. The image from his Instagram post as the background image on the Instagram block etc...
I've spent the last few hours trying to get my head around oEmbed, and I can safely say I'm failing miserably.
I'm actually more confused now then before I started, so if any kind soul could give me a dummies guide to how I can approach this, that would be absolutely amazing.
Thank you!
You can acheive a single embedded tweet using an embedded timeline.
To get just one tweet, use the data-tweet-limit attribute on the embed tag, as detailed here:
https://dev.twitter.com/web/embedded-timelines/parameters
For example:
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-widget-id="some_id" data-tweet-limit="1"></a>
According to twitter's documentation, that is the recommended way of getting tweets onto websites. From your description of the use case, I'd highly recommend just using Twitter's official widget.
If you really want to use Twitter's REST API and generate your page server side, I'd check out this stack overflow question as a starting point:
Setting up Twitter API, getting the last few Tweets
Hope that helps!
I want to use regular share button like on this page https://twitter.com/about/resources/buttons#tweet but to add an embedded image from my site, not just link.
I know all about 1.1 api and uploading, but making an tw application and then ask visitor on my site to give permission to write on his timeline just to share one pic from my site is not likely scenario, so I think about alternatives.
I've noticed when just paste links of pic that are already uploaded on twitter into tweet, if you paste link like https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg that is not going to be embeded, but if you paste link like this pic.twitter.com/NuDSx1ZKwy it will be embeded. So I think if I make profile and app that will call https://upload.twitter.com/1/statuses/update_with_media.json and upload pic, and then paste link in share button I will get tweet with pic embeded. Or there is better way? I use php.
Look into twitter cards.
The trick is not in the button but rather the page you are sharing. Twitter Cards pull the image from the meta tags similar to facebook sharing.
Example:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="#creator_username">
<meta name="twitter:image" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
To create a Twitter share link with a photo, you first need to tweet out the photo from your Twitter account. Once you've tweeted it out, you need to grab the pic.twitter.com link and place that inside your twitter share url.
note: You won't be able to see the pic.twitter.com url so what I do is use a separate account and hit the retweet button. A modal will pop up with the link inside.
You Twitter share link will look something like this:
Share on Twitter
You're right in thinking that, in order to share an image in this way without going down the Twitter Cards route, you need to to have tweeted the image already. As you say, it's also important that you grab the image link that's of the form pic.twitter.com/NuDSx1ZKwy
This step-by-step guide is worth checking out for anyone looking to implement a 'tweet this' link or button: http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.
You can create an href link like this:
Click to tweet
You can grab the image link if it has been tweeted first.
Go to the tweet, click on options & click Embed tweet. You will find the image link in the Embed tweet.
I used this code to solve this problem.
<img src="path_to_my_image"/>
You can check the tweet-button documentation here tweet-button
Using Javascript to create a twitter button, I use Fontawesome's classes for fetching the design. Remember to add the Fontawesome script in your HTML head.
let twitter_btn = document.createElement("i")
twitter_btn.className = "fa-brands fa-twitter-square fa-xl"
twitter_btn.setAttribute("index", array_index)
element.appendChild(twitter_btn)
twitter_btn.addEventListener("click", () => {
let url = "https://twitter.com/intent/tweet?url=" + params.url +
"&text=" + params.text
window.open(url)
})
I want to add facebook like button on a page in my website, but have the URL go to a totally different page in my website that has more detail. Is it possible to do this?
Yes, you can add a "data-href" attribute to the fb-like div, like so:
<div class="fb-like" data-href="http://www.DOMAIN.com/PATH/TO/MORE/DETAILED/PAGE" data-send="true" data-width="450" data-show-faces="true"></div>
Documentation found here
I'd like to have a facebook like button, and I would like it to act like this:
When a user clicks on the button in the user's news feeds the following is shown:
- the name of my site
- link to my web site
- my web site logo
- short description
I am using ruby on rails 3.
Would you be so kind and help me configure this?
Thanks, D.
There are two steps on how to achieve this. First step is to use the appropriate OpenGraph Tags on your website. These are just additional tags in your HTML head. You can find examples on the Open Graph Webspage.
Second step is to embed the like button. You can configure the code on the Facebook Developer page. When a user clicks on the button, the OpenGraph tags are automatically parsed and the result is shown in the user's stream.
Configure your requirement in below page
You can get the required script for facebook like button, by giving inputs to the widget in the page
http://developers.facebook.com/docs/reference/plugins/like/