Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Design Extender › Social Media Toolkit › Social Toolkit.

Social Toolkit.

Thread began 5/09/2013 7:25 am by Simon | Last modified 5/10/2013 10:41 am by Simon | 4396 views | 8 replies |

5/09/2013 7:25 am | #1 Simon

Social Toolkit.

Lets say I insert a share button into my page. When I load this onto the server and test, there is a thumbnail picture that appears on Facebook. How can I change this image? Also if I insert a like button and test, the image that shows is a twitter icon, what I would want is a logo for my business appearing in Facebook. Is this possible?

5/09/2013 7:41 am | #2 Jason ByrnesWebAssist

you can control the image and text used when you like a page by adding custom meta tags, I believe thee are also used by the share script:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

5/09/2013 9:33 am | #3 Simon

Help!

The problem i have is that i new to Dreamweaver and have little experience with the code side, and do most my work in design view.
Could you try to explain to me how to:

Use a specific image so that when people Share/Like/Comment on my site the thumbnail pic has been chosen by me and not FB.
I would be very grateful for any help you can give me.

Regards
Simon Morton.

5/09/2013 9:36 am | #4 Jason ByrnesWebAssist

add the meta tags into the head of the apge using code view, past them just after the opening <head> tag:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

in the og:image meta tag, change the content;
content="thumbnail_image"

to the full URL fore the image:
content="http://mysite.com/images/image.jpg"

5/09/2013 11:53 am | #5 Simon

I tried to follow your instructions, but i am still getting the wrong image!
here is the code from a test page i created in my site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="http://www.africanbikeadventures.com/images/fbicon.jpg" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>African Bike Adventures</title>
<link rel="stylesheet" type="text/css" href="../webassist/social/wasocial.css"/>
<script type="text/javascript" src="../webassist/social/wasocial.js"></script>
</head>

<body>
<div class="wasocial">

<div class="icons">
<a name="fb_share" type="icon" href="#" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.africanbikeadventures.com', 'Facebook', 'toolbar=0,status=0,width=626,height=436'); return false;" title="Facebook">
<img src="../webassist/social/icons/facebook.png" />
</a>
</div>
</div>
</body>
</html>

The image that show's location details are as followed:

https://fbexternal-a.akamaihd.net/safe_image.php?d=AQAUwnjJbW9iqBLe&w=100&h=100&url=http%3A%2F%2Fwww.africanbikeadventures.com%2FImages%2FStart%2520Page%2FAdventure.jpg&cfs=1&upscale

Regards

5/09/2013 12:04 pm | #6 Jason ByrnesWebAssist

please post a link

5/09/2013 8:42 pm | #7 Simon

Reply

Hi.

Sorry for the late reply! I reside in South Africa, i am not sure what the time difference is.

My website is: www.africanbikeadventures.com
Please note that it's still under construction.

You will see that if you click any of the social stuff there will be different images appearing
on you Facebook profile, i would like to make these standard.

Regards.

5/10/2013 9:00 am | #8 Jason ByrnesWebAssist

Since the page has already been liked, you will need to refresh the cache on face book by using there debug page.

https://developers.facebook.com/tools/debug

This will force the facebook to refresh the cahse.

also you should have a toitle tag:

<title>Page Title</title>

and a description meta tag:
<meta name="description" content="site description" />

5/10/2013 10:41 am | #9 Simon

Thanks.

Great. This has solved the problem!
Thank you for your support !!!!

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.