Facebook share link on page - javascript

I'm trying to make a share as page(/page-id/feed) of a link with a picture (the link can be associated with any picture).
But the OG tags take over the control of the image, rather the data sent by the api.
I tried to hide the OG tags and the tags (description etc...) that can help Facebook to take the targeted pages information, with a extra URL parameter, but it doesn't work...
I just need to share a link on a page with a picture not defined by the targeted page.
Thanks for reading I hope you have understand, and then you can help me.

Related

How to share a link with image on facebook

I'm trying to make link button that shares the page on facebook, I'm using that url from facebook https://www.facebook.com/sharer/sharer.php?u=. The problem is the page I want to share has a dynamic image, so depending on the parameters in my url the image should be different, for example events.com?id=2, this should bring an image related to event 2 and so on, so I can't put the meta tag on my head. I was trying to add the meta tag after I receive the data from my database using jquery but it doesn't work. any suggestion?
You need to add meta tags to your page. More info in the following documentation

Multiple Facebook/Twitter/LinkedIn share images for different content on single page

Throughout one page I have important content that needs to be shared. When someone decides to share one of these sections I need to grab the custom image and text for that specific piece of content. This content needs to be shareable via Facebook, Twitter and LinkedIn.
However I'm struggling to define this as I usually only do one image per page using meta property in the head of my page.
If the content didnt have an image attached I would normally use a sharer link such as: Facebook Share. However to my knowledge you cannot define an image this way?
I'm pretty sure that I need to customise the meta property og:image to change depending on what piece of content is clicked but I'm not sure? I've seen a few different answers to this question but nothing definitive.
Just to clarify what I'm after I've mocked up a quick example with cats!
Each section would share their defined cat image and heading.
The site is a PHP Wordpress site, but its not the posts. Its just content on a single page.
You can either use a parameter in the URL and switch the og:image parameter serverside depending on the parameter - or you can use the FB.ui Feed Dialog with a custom picture: https://developers.facebook.com/docs/sharing/reference/feed-dialog

How should I render a widget with many links inside a blog so google don't penalize the blog?

We run a service (will not mention the URL, as this is not a pitch) and need advice on Google-viewing-links matters.
The service is for bloggers and allows them to create a "linkup" inside their blog post.
The linkup is like a mini pinterest inside their own blog where other users can add images/links/blogposts.
The widget that creates this linkup is a javascript snippet that does a remote call to our server. The response of the server is rendered inside the user's blog.
Now, the widget contains quite a few links. And we have set all links as nofollow so they don't look spammy in the eyes of google.
Going to google webmaster tools, I can see that the crawler can easily render the links even if they come from javascript.
So my question is: Is it better to
completely hide the widget from google
just leave it as it is, renderable with nofollow on the links
remove the links and create them only when someone clicks on them?
any other suggestion is appreciated!
Hiding of content including links can be considered as cloaking. If links are present on page there is no need to hide them.

Best approach to showing multiple html without reloading page

I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!

show contents of link

I've been searching the internet to get some information about how i can be able to detect and show what a url is about.
Facebook has a good example of what i actually want to achieve:
If you create a update on facebook and paste in a URL, facebook will detect some information about it and show a box with some text and often the right picture.
for instance, take: http://www.ebay.com/itm/Mens-Monk-Strap-Loafers-Suede-Lined-Metal-Buckle-Slip-Casual-Dress-Shoes-New-/311170422772 . then it shows the image of the shoe and headline.
Ive found other services which does this with image services and youtube, but what i need is about getting information of products most of the time, so often urls from shops. So the user pastes in a url, and i can detect what that link is about.
any ideer how this can be done ?
Is it backend code, like c# or javascript ?
Hopefully some of you can point me in the right direction. Thanks in advance!
Facebook scrapes pages for specific metadata in the back-end and uses it to generate the snippets you see, which can either be served along with the initial page load or brought in via JavaScript (front-end). From there it's a matter of using CSS and JS to style the popup to your liking.
Depending on how inter-related your site is with the content you want to display, this can be an easy task or a difficult one.

Categories

Resources